WEB DESIGN GARAGE [Electronic resources] نسخه متنی

Chapter 56. Designing Data Tables

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.

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.

Figure 56.1 shows a data table that 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.

<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>