Coding: XHTML: Tables

Tables are a very useful tool for organizing information. They are often used in sharing data and also in navigation. They have two functions: data display, and layout.

First, they can be used to organize data in rows and columns.

Second, tables can be used to help organize content elements on a page such as graphics and text. Increasingly, people are encouraged NOT to use tables for layout. Instead, use the power of CSS for most layout needs.

Read Chapter 16: Tables by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.

Try It!
Explore and practice a table at TryIt Editor.

Table Tag

Be sure to include both a start and end tag for your table.

Use the border attribute to show lines around the cells. Invisible lines are created by setting the border to 0.

Width can be set as relative or absolute. Percents are used for relative. In other words, the table adjusts related to the width of the page. Set the width to 100% if you wish the table to span the width of the page. Pixels are used for absolute.

Within the table you'll use tr, td, and th tags.

The <tr> tag is used to define a table row.

The <td> tag is used to define a table cell.

The table cell tags are embedded with the table row tags.

The <th> tag is used to define the table header. For data tables, indicate the head rows and/or columns with the <th> tag. Use <th> instead of <td>. Besides simply centering and bolding the text, the <th> tag is important for intelligent screen-reading software (to aid the vision-impaired users).

Use cellpadding to add space around the contents of a cell.

Use cellspacing to add spaces between cells.

Use colspan or rowspan if you need to span across columns or rows.

Be sure to include the table summary attribute for web accessibility. The summary attribute has no on-screen effect (it is not seen), but intelligent screen-reading software will read it for the benefit of vision-impaired users.

Caption is also useful in accessibility.

Keep in mind that alignment options including align and bgcolor are now deprecated. They are not supported in XHTML.

Example

<table border="xx" width="xx/x%" cellspacing="xx" cellpadding="xx" background="filename" summary="Information about the table" >

</table>

<tr valign="top/middle/bottom"> </tr>

<td valign="top/middle/bottom" width="xx" nowrap colspan="x" rowspan="x"> </td>

<th valign="top/middle/bottom" width="xx" nowrap colspan="x" rowspan="x"> </th>

<caption valign="top/middle/bottom"> </caption>

Example

<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4">Use colspan="4" to span all four columns</td>
</tr>
<tr>
<td rowspan="3" width="184">Use rowspan="3" to span three rows</td>
<td width="103">cell</td>
<td width="109">cell</td>
<td width="94">cell</td>
</tr>
<tr>
<td width="103">cell</td>
<td width="109">cell</td>
<td width="94">cell</td>
</tr>
<tr>
<td width="103">cell</td>
<td width="109">cell</td>
<td width="94">cell</td>
</tr>
</table>

Results

Use colspan="4" to span all four columns
Use rowspan="3" to span three rows	cell	cell	cell
	cell	cell	cell
	cell	cell	cell

Example

<table width="75%" border="1" summary="name, points, grade">
<caption>Student Grades</caption>
<br>
<tr> <th>Name</th> <th>Points</th> <th>Grade</th> </tr>
<tr> <td>Anderson, Andy</td> <td>195</td> <td>A</td> </tr>
<tr> <td>Johnson, John</td> <td>175</td> <td>B</td> </tr>
</table>

Result

Student Grades

Name	Points	Grade
Anderson, Andy	195	A
Johnson, John	175	B

 

Learn More

Table Basics from WEBalley

Layout Basics from WEBalley

Table Resources and Tutorials from W3 School

---