Tables
The <table> tag can also be used to display content in tabular format. There are two types of tables: data tables and layout tables. Data tables are tables which contain information mean to be evaluated in columns and rows. Layout tables are tables used to be place content at specific locations on the web page. From a coding point of view, data and layout tables are produced in almost the same manner. The discussion below represents something of a simplified account of tables and their use.
Data Tables
Data tables have the following structure:
| Column 1 Header | Column 2 Header | |
|---|---|---|
| Row 1 | ||
| Row 2 |
This structure is produced using the following elements:
| Element | Description |
|---|---|
| <table> | Table Element |
| <tr> | Table Row |
| <th> | Table Header (the column header) |
| <td> | Table Cell |
Hence the code to produce the first table above is:
<table>
<tr>
<th> </th>
<th>Column 1 Header</th>
<th>Column 2 Header</th>
</tr>
<tr>
<td>Row 1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Row 1</td>
<td> </td>
<td> </td>
</tr>
</table>
Notice that empty table cells are filled with the entity . If this is omitted, the cell borders will not always display correctly.
Table headers (<tr>) are by default displayed in bold and centred in most browsers. However, this behaviour can be changed using CSS. Data tables must have column headers for reasons of accessibility, since many assistive technologies read tables horizontally, rather than down columns.
The appearance of tables can be adjusted through the use of attributes and/or CSS. The following attributes are commonly used for the <table> element (there are others).
| Attribute | Description |
|---|---|
| @align | Table Alignment |
| @width | Table Width |
| @border | Table Border |
| @cellspacing | Space between table cells |
| @cellpadding | Padding between cell borders and their content |
All these attributes (except for @align) are measured in pixels by default, or by percentages if they have a percentage sign. The following table element uses all these attributes:
<table align="center" width="50%" border="1" cellspacing="5" cellpadding=5">
The following attributes are commonly used inside the <th> and <td> elements (there are others):
| Attribute | Description |
|---|---|
| @align | Cell Alignment |
| @width | Cell Width |
| @height | Cell Height |
| @colspan | Make the row span multiple columns |
| @rowspan | Make the column span multiple rows |
The use of @colspan is illustrated in the following table:
| Column 1 | Column 2 | |
|---|---|---|
| Subcolumn A | SubcolumnB | |
In the first row of the column, the code <td colspan="2"> is used to indicate that the row should span two column. @colspan is used in a similar way.
Layout Tables
It should be clear that attributes like @colspan make it possible to layout the content of an entire web page inside table cells. For instance, although the layout of this web page is achieved using CSS, its basic structure can be created with a table:
| Header | |
| Menu | Content |
| Footer | |
Apart from the fact that no <th> elements are used, this layout table is coded using the same techniques describe above.
The W3C recommends the use of CSS, rather than layout tables, for web page layout since this enforces the principle of separating content from presentation. The method involves applying various CSS properties such as margin and padding to (X)HTML <div> elements. It is not always easy to achieve the desired results, especially across multiple browsers. This web page adopts one method for producing a two-column format with a header and a footer. The three-column equivalent is known in web design circles as the "Holy Grail" because of the difficulty of finding a way to produce a perfect three-column layout.
Other than the fact that different browsers implement CSS differently, part of the problem is that the current version of CSS (CSS2) was not designed for layout purposes. Hence the methods currently available in CSS for layout are not always practical. Until CSS3 becomes a standard, there is still likely be a need for layout tables.
Return to Top