Tabular data

XHTML tables are capable of presenting complex tabular data with grouped columns, grouped rows, headers and footers, however, we will just look at the basic representation of a table.

The basic <table> element contains one or more rows represented by <tr> elements and each row will contain one or more cells of data represented by <td> elements. If a row or column contains headers the the particular <td> elements should be replaced by <th> elements. So, a table with 2 rows and three column, where the first row is headings and the first column is headings would be coded like this:

<table summary="Comparison of rainfall in Chester and Wrexham">
  <caption>Comparison of rainfall in
           Chester and Wrexham</caption>
    <th>Yearly Rainfall</th>
    <th>No. of wet days</th>	

and would look like this:

Comparison of rainfall in Chester and Wrexham
Yearly Rainfall Chester Wrexham
Inches 35 42
No. of wet days 67 82

You can leave out the <caption> element in a table, but you must always provide the 'summary' attribute, otherwise your page will fail accessibility tests.

More complex structures

If you have a data table with a more complex structure you may want to take advantage of row and column grouping elements.

The <thead>, <tfoot> and <tbody> elements can be used to group rows of data. Note: <tfoot> must appear before <tbody>. You can have several <tbody> sections.

The <colgroup> and <col> elements can be used to specify columns and column groupings. Be aware, though, that these elements have attributes which specify presentation aspects such as column width. Unless there is a good reason, you should perform layout by using 'id' or 'class' attributes and CSS. See the CSS Tutorial for information about this.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera