9 Tables

A table is a rectangular array of cells, arranged in rows and columns. To create a table in HTML we use the <table>...</table> tags. Every row of the table is enclosed in <tr>...</tr> and the data for each cell is enclosed in <td>...</td>.

<!-- HTML to generate a table of contents -->
<table>
<!-- Start the first row -->
<tr>
<!-- Start the first column entry for this row -->
<td>
Chapter 1
</td>
<!-- Start the second column entry for this row -->
<td>
<a href="introduction.html">Introduction</a>
</td>
</tr>
<!-- Start the second row -->
<tr>
<!-- Start the first column entry for this row -->
<td>
Chapter 2
</td>
<!-- Start the second column entry for this row -->
<td>
<a href="first_html.html">First HTML</a>
</td>
</tr>
</table>

This generates:

You might want the very first row and/or column of the table to contain the headings that describe the data, and to do this you use the <th>...</th> tags instead of the <td>...</td> ones.

Tables are always made large enough to accommodate all of their data. Tables can have several attributes to define how they look:

• align specifies the alignment of the table as a whole.
• width=80% specifies how much of the page width the table should use, and overrides the browser's automatic table size calculation. You can also specify an absolute width in pixels but this is not recommended.
• border=2 specifies a border two pixels wide. Obviously you can change "2" to any number you like, and "0" means no border.
• bgcolor="maroon" specifies the background colour for the table, and the colour the border will be displayed in.
• cellpadding=2 specifies you want a minimum of two pixels of white space between the contents of a cell and its border.
• cellspacing=10 specifies you want a minimum of ten pixels of white space between adjacent cells.
• summary="Partial Table of Contents for this presentation" gives a summary of the table's contents and purpose. This is primarily to aid blind or partially-sighted users, as it can be read out by HTML-to-speech renderers.

Each row and data tag can take attributes as well:

• align specifies the alignment of the row as a whole.
• valign specifies the vertical alignment, either top, center or bottom..
• bgcolor="maroon" specifies the background colour for the table data.