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.

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 Code

TAG

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> 



Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net