Location: Home > HTML Tutorials > Tables in HTML > Page 3

Tables in HTML (page 3)

Table of contents

Pages:<1 234 5 >

Horizontal grouping

An HTML table can be organized horizontally in three groups: the header (HTML thead element), the body or bodies (HTML tbody element) and the footer (HTML tfoot element). Each one of these elements locks up a group of rows. These divisions may help to make tables easier to read, specially when the table must be rendered in more than one page (e.g., when a large table is printed). In that case, headers and footers are rendered in each page to aid comprehension.

Code

<table>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Vitamin A</th>
<th scope="col">Vitamin B</th>
<th scope="col">Vitamin C</th>
</tr>
</thead>
<tfoot>
<tr>
<td scope="row">All</td>
<td>32.8</td>
<td>104.2</td>
<td>21.0</td>
</tr>
</tfoot>
<tbody>
<tr>
<td scope="row">January</td>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
</tr>
<tr>
<td scope="row">Feubrary</td>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
</tr>
<tr>
<td scope="row">March</td>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
</tr>
</tbody>
</table>

View

Month	Vitamin A	Vitamin B	Vitamin C
All	32.8	104.2	21.0
January	12.8	42.6	5.2
Feubrary	10.5	30.1	10.4
March	9.5	31.5	5.4

Note that footers are placed in the code preferably right below the headers at the beginning of a table. This is because very large tables may take some time to download completely (up to minutes), and browsers may choose to render footers even before all the body cells have been received.

A single table may have more than one body. This provide authors with a way to group or separate rows. For example, in the table above all the months can be grouped quarterly, generating this way 4 bodies in the table.

Pages:<1 234 5 >