Tabellers opbygning

Indlæs andet indhold på denne side:

I gamle dage - før css - var det almindeligt at bruge tabeller til at styre hjemmesidens indhold. Men i dag må tabellen siges kun at være beregnet til 'tabulære data', dvs. oplysninger, som det også på et stykke papir vil være naturligt at ordne i et skema.

Det kan i den forbindelse undertiden være en fordel, rundt omkring i tabellen at sammenlægge enkelte celler på tværs eller langs - det vender vi tilbage til om lidt, først skal vi have den simple tabel oprettet.


Tabel med scroll

Siden er opdateret 16.2.2008

Herunder ser du - tilsyneladende - en tabel, der kan scrolles. Konstruktionen kan være praktisk hvis lange tabeller skal vises på begrænset plads.

Men det er snyd, det er 2 tabeller inde i hinanden og den inderste ligger i en <div></div> med overflow.

Tabeloverskrift
Kolonne 1 Kolonne 2
Footer
celle 1.1 celle 1.2
celle 2.1 celle 2.2
celle 3.1 celle 3.2
celle 4.1 celle 4.2
celle 5.1 celle 5.2
celle 6.1 celle 6.2
celle 7.1 celle 7.2
celle 8.1 celle 8.2
celle 9.1 celle 9.2
celle 10.1 celle 10.2

Konstruktionen ser du kort her:

<div id="tablediv">
<table>
<caption>Tabeloverskrift</caption>
<thead>
  <tr>
    <th>Kolonne 1</th>
    <th>Kolonne 2</th>
    <th id="tom"></th>
  </tr>
</thead>
<tfoot>
  <tr>
    <td colspan="3">Footer</td>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td colspan="3" style="padding:0">
      <div id="inner">
        <table id="indre">
          <tr>
            <td>celle 1.1</td>
            <td>celle 1.2</td>
          </tr>
          flere rækker med to tabelceller i hver
        </table>
        </div>
      </td>
  </tr>
</tbody>
</table>
</div>

I <tbody> i den ydre <table> er der kun en enkelt celle med tildelt colspan="3" (2 aktive kolonner plus den ekstra celle til udligning for scrollbaren (gjort usynlig med css)).

I cellen ligger en <div> med overflow sat til auto og med en defineret højde. I denne <div> ligger så den indre tabel.

Det rigtig sjove kommer, når konstruktionen skal tilpasses, så det fungerer optimalt i alle browsere. Sætter man bare en bredde i px på tabellen, får man en uønsket vandret scrollbar i andre browsere end IE:

table {
  width: 296px;
  }

Det kan løses ved at indsætte en lille tilføjelse i css:

table {
  width: 296px;
  }
html>body table {
  width: 100%;
  }

... så ser det ens ud i IE op til version 6, FF og Opera. Men du får desværre en vandret scrollbar i IE 7. Derfor skal du i en conditional comment slutte af med at lave en tilføjelse til IE 7:

<!--[if IE 7]>
<style type="text/css">
table {
  width: 296px !important;
  }
</style>
<![endif]-->

Tilbage er så bare at lave almindelig css-tilpasning af tabellen, så den ser sådan ud som du vil have den til. Lad dig eventuelt inspirere af min css.

Valid XHTML og CSS / Copyright © Hjemmesideskolen april 2000
Hjemmesideskolen
Du er her: Forsiden - html - Tabellers opbygning
Brugere lige nu: 1
Home Mail