7. Tabeller

start  ||   föregående  ||   nästa

Tabeller används i huvudsak för att strukturera upp information i XHTML.

Table:   <table></table>
Table-taggen omger hela tabellen och talar om för browsern var en tabell startar och slutar. Enbart en table-tagg tillför inte mycket till ett dokument, utan tabellen behöver också ha ett innehåll.

Ex.

<body>
   <table>
   </table>
</body>

Table row:   <tr></tr>
Tr-taggen märker upp raderna i tabellen. Allt som placeras mellan <tr> och </tr> hamnar på en ny rad.

Ex.

<body>
   <table>
      <tr>
      </tr>
   </table>
</body>

Table data:   <td></td>
Td-taggen representerar cellerna i en tabell. En tr-tagg kan innehålla ett frivilligt antal td-element.

Ex.

<body>
   <table>
      <tr>
         <td>Data 1</td>
      </tr>
   </table>
</body>

ger en tabell med 1 rad och 1 cell:

Data 1


Ex.

<body>
   <table>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
   </table>
</body>

ger en tabell med 1 rad och 2 celler:

Data 1Data 2


Ex.

<body>
   <table>
      <tr>
         <td>Data 1</td>
      </tr>
      <tr>
         <td>Data 2</td>
      </tr>
   </table>
</body>

ger en tabell med 2 rader med 1 cell:

Data 1
Data 2
Table header:   <th></th>
Th-taggen är ett tabellhuvud som används som rubrik för underliggande td-celler.

Ex.

<body>
   <table>
      <tr>
         <th>Rubrik 1</th>
         <th>Rubrik 2</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
   </table>
</body>

ger en tabell med 1 rad och 2 celler med rubriker:

Rubrik 1Rubrik 1
Data 1Data 2
Caption:   <caption></caption>
Det går också att att göra en rubrik för hela tabellen med caption-taggen. Caption-taggen måste då vara det första elementet i tabellen.

Ex.

<body>
   <table>
      <caption>Tabellrubrik</caption>
      <tr>
         <th>Rubrik 1</th>
         <th>Rubrik 2</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
   </table>
</body>

ger en tabell med 1 rad och 2 celler med rubriker samt en tabellrubrik:

Tabellrubrik
Rubrik 1Rubrik 1
Data 1Data 2
Table head:   <thead></thead>
Genom att märka upp de olika huvuddelarna i en tabell kan man underlätta tillgång till dessa för formatmallar. Tabellen delas upp i huvud, kropp och fot. Huvudet (table head) markeras med thead-taggen. Denna paketerar in tabellens huvudelement.

Ex.

<body>
   <table>
      <caption>Tabellrubrik</caption>
      <thead>
         <tr>
            <th>Rubrik 1</th>
            <th>Rubrik 2</th>
         </tr>
      </thead>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
   </table>
</body>

Table body:   <tbody></tbody>
Tabellens kropp märks upp med tbody-taggen.

Ex.

<body>
   <table>
      <caption>Tabellrubrik</caption>
      <thead>
         <tr>
            <th>Rubrik 1</th>
            <th>Rubrik 2</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
      </tbody>
   </table>
</body>

Table foot:   <th></th>
Dessutom kan man lägga till fotinformation till tabeller genom tfoot-taggen.

Ex.

<body>
   <table>
      <caption>Tabellrubrik</caption>
      <thead>
         <tr>
            <th>Rubrik 1</th>
            <th>Rubrik 2</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <td>Fot 1</td>
            <td>Fot 2</td>
         </tr>
      <tfoot>
   </table>
</body>

ger en tabell med foter nederst:

Tabellrubrik
Rubrik 1Rubrik 1
Data 1Data 2
Fot 1Fot 2

Valid XHTML 1.1!