XHTML Table

// February 17th, 2009 // CSS, XHTML

Standards based web development and the semantic web call for markup language which matches the stucture and semantic meaning of the data. Screen readers are also an important aspect which need to be catered for. This does not mean that the tables cannot be “beautified” so I have included some CSS for the table.

Table Caption
Staff ID Staff First Name Staff Surname
Staff ID Staff First Name Staff Surname
1111 Mark Robson
2222 Paul Diston
3333 John Grisdale

Here is the table XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<table border="0" summary="This is an example table demonstrating thead, tfoot, and tbody."><caption>Table Caption</caption>
<thead>
<tr>
<th id="id">Staff ID</th>
<th id="firstname">Staff First Name</th>
<th id="surname">Staff Surname</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Staff ID</td>
<td>Staff First Name</td>
<td>Staff Surname</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1111</td>
<td>Mark</td>
<td>Robson</td>
</tr>
<tr>
<td>2222</td>
<td>Paul</td>
<td>Diston</td>
</tr>
<tr>
<td>3333</td>
<td>John</td>
<td>Grisdale</td>
</tr>
</tbody></table>

And the style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

table
{
border-top:1px solid #999;
border-left:1px solid #999;
border-collapse:collapse;
}
caption
{
letter-spacing: 5px;
font-size:14px;
padding-bottom:5px;
color:#930;
}
th, td
{
padding:5px 10px;
border-right:1px solid #999;
border-bottom:1px solid #999;
}
th, tfoot tr td
{
background:#ccc;
font-weight:bold;
}

Leave a Reply