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.
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.
Kolonne 1 | Kolonne 2 | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Footer | ||||||||||||||||||||||
|
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.