10. Tabeller

table-layout
Table-layout-elementet låter användaren ange hur en tabells innehållsfördelning ska beräknas, dvs. hur dess kolumnbredder ska fördelas. Table-layout kan ta två värden:
  • auto
  • fixed
Auto-attributet beräknar de olika kolumnernas bredd utifrån deras innehåll. Det letar igenom alla kolumner efter dess bredaste cell och anger kolumnbredden efter denna. Detta tar relativt lång tid, eftersom hela tabellen måste gås igenom innan värdet bestäms, men tabellen blir anpassat efter innehållet. Fixed-attributet låter användaren ange ett värde för varje kolumn.

Ex.

<body>
   <table style="table-layout: fixed">
      <col width="100"><col width="50"><col width="300">
      <tr>
         <td>Text</td>
         <td>Text</td>
         <td>Text</td>
      </tr>
   </table>
</body>

Detta ger en tabell med tre kolumner med individuellt fastställd kolumnbredd:

Text
Text
Text

border-collapse
När två angränsande element båda har kantlinjer så kommer kantlinjen där de två möts att ritas ut som dubbel. Det är inte alltid man vill ha det så. Därför finns i CSS elementet border-collapse som slår ihop två sådana linjer till en. Border-collapse kan ta två attribut:
collapse
slår ihop kantlinjer
separate
ritar två separata kantlinjer


Ex.

<body>
   <table style="table-layout: fixed; border-collapse: collapse">
      <col width="100"><col width="50"><col width="300">
      <tr>
         <td>Text</td>
         <td>Text</td>
         <td>Text</td>
      </tr>
   </table>
</body>

Här har vi tagit exemplet ovan och satt border-collapse till collapse för tabellen:

Text
Text
Text

Valid XHTML 1.1!