Data tables are table elements that holdbrace yourselfrows and columns of data. As far as the W3C is concerned, data tables are the only type of table worth talking about, since the HTML spec defines table tags for precisely this purpose. The W3C hates it when you borrow table tags for heretical purposes such as creating page layout. GEEKSPEAK A data table is an HTML table that contains rows and columns of data instead of the layout of a page. |
Table 56.1 displays common HTML table tags. Many of these tags don't make sense in the context of layout tables, so you may not be familiar with them. But when you build a data table, keep them in mind, because proper markup improves the accessibility of your work. Table 56.1. Common HTML Table Tags in Order of Appearance in the CodeTAG | INDICATES |
---|
table | A table | caption | The caption of the table | col | A column in the table | colgroup | A group of related columns in the table | thead | The head section of a table | tfoot | The foot section of a table | tbody | The body section of a table; may appear more than once in a table to denote different sections in the table body | tr | A row in the table | th | A table cell that holds the header of a row or column | td | A table cell that holds an ordinary piece of data |
Figure 56.1 shows a data table that uses all ten of the tags from Table 56.1. Figure 56.1. This data table uses all ten of the tags from Table 56.1.  Look over the View Source for this figure to see how the markup works. Listing 56.1. View Source for Figure 56.1. [View full width] <table border="1"> <!-- The first piece of content is the table caption. --> <caption> Table 1. Mutagenic Effects of the Kenneth Frequency on HTML Table Cells </caption> <!-- Next comes a description of the column structure of the table. The col and colgroup tags in this particular table indicate a structure of one column on the left followed by a group of six columns. Notice that the col tag does not have a closing version, while colgroup does. --> <col> <colgroup span="6"></colgroup> <!-- Next comes the table head, which describes the top row of the data table. The table cells use th tags instead of td tags to indicate that they are header cells. --> <thead> <tr> <th>x =</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> </tr> </thead> <!-- Next comes the table foot, which describes the last row of the data table. It must appear before any of the table body sections. The foot section often matches the head section exactly, like it does here, but the foot can have unique content, such as a Totals row. --> <tfoot> <tr> <th>x =</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> </tr> </tfoot> <!-- Next comes the table body. This particular table divides its content into three different body sections. The first one begins here. --> <tbody> <tr> <th>width</th> <td>17</td> <td>19</td> <td>25</td> <td>67</td> <td>108</td> <td>202</td> </tr> <tr> <th>height</th> <td>18</td> <td>21</td> <td>26</td> <td>68</td> <td>209</td> <td>525</td> </tr> </tbody> <!-- Here is the second body section. --> <tbody> <tr> <th>align</th> <td>left</td> <td>left</td> <td>center</td> <td>center</td> <td>right</td> <td>right</td> </tr> <tr> <th>valign</th> <td>top</td> <td>bottom</td> <td>bottom</td> <td>bottom</td> <td>bottom</td> <td>bottom</td> </tr> </tbody> <!-- Here is the third body section. --> <tbody> <tr> <th>bgcolor</th> <td>#0000FF</td> <td>#00FFFF</td> <td>#FF00FF</td> <td>#00FF00</td> <td>#CCFF00</td> <td>#00CCFF</td> </tr> </tbody> <!-- Add a closing table tag to finish the markup. --> </table> |