CSS tabeller

CSS gör det enkelt att förändra utseendet på tabeller.

<table border="1">
   <caption>Lorem ipsum</caption>
   <tr>
      <td>Lorem ipsum</td>
      <td>Dolor sit amet</td>
      <td>Consectetur adipiscing</td>
   </tr>
   <tr>
      <td>Lorem ipsum</td>
      <td>Dolor sit amet</td>
      <td></td>
   </tr>
</table>

Tabell layout

CSS-egenskapen "table-layout" anger hur en tabell ska formateras. Egenskapen kan anta värdena "auto" eller "fixed".

CSS

table {table-layout:auto}

CSS

table {table-layout:fixed}

Visning av tomma celler

CSS-egenskapen "empty-cells" anger om en tabell ska vasa tomma celler eller inte. Egenskapen kan anta värdena "show" eller "hide".

CSS

table {empty-cells:show}

CSS

table {empty-cells:hide}

Visning av kantlinjer

CSS-egenskapen "border-collapse" anger om kantlinjerna mellan tabellelement ska slås samman eller visas med padding och margin emellen. Egenskapen kan anta värdena "collapse" eller "separate".

CSS

table {border-collapse:collapse}

CSS

table {boder-collapse:separate}

Tabellrubriker

CSS-egenskapen "caption-side" anger var tabellrubriken ska visas. Egenskapen kan anta värdena "top", "
bottom", "left", "right" och "inherit".

CSS

table {caption-side:bottom}

Notera att Internet Explorer enbart stödjer denna CSS egenskap om en korrekt doctype har angetts på sidan!

Avstånd mellan kantlinjer

CSS-egenskapen "border-spacing" anger avståndet mellan tabellcellens kantlinjer om egenskapen "border-collapse" är satt till "separate" (vilket är standardvärdet).

CSS

table {
   border-spacing:10px 5px;
   border-collapse:separate;
}