A Complete Table

Now that we have looked at all of the pieces that make up a table it is time to put them all together and see what we get. Here's a sample table that combines all of the features we have discussed.

example table
  Col 1 Col 2 Col 3
  Foot 1 Foot 2 Foot 3
Row 1 row 1, Col 1 row 1, Col 2 and 3
Row 2 row 2, Col 1 row 2 and 3, Col 2 row 2, Col 3
Row 3 row 3, Col 1 row 3, Col 3

The only styles I have applied to the above table are to the columns - where I have set a background colour to make the table cells more obvious. You of course can add whatever styles that you need to your tables.

Here is the actual HTML that generated the above table so that you can see how it all fits together.

<table summary="example table">
<caption>example table</caption>
<colgroup>
<col style="background:#fcc;" />
</colgroup>
<colgroup span="3" style="background:#ccc;"></colgroup>
<thead>
<tr>
<th>&nbsp;</th>
<th scope="col">Col 1</th>
<th scope="col">Col 2</th>
<th scope="col">Col 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>&nbsp;</td>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Row 1</th>
<td>row 1, Col 1</td>
<td colspan="2">row 1, Col 2 and 3</td>
</tr>
<tr>
<th scope="row">Row 2</th>
<td>row 2, Col 1</td>
<td rowspan="2">row 2 and 3, Col 2</td>
<td>row 2, Col 3</td>
</tr>
<tr>
<th scope="row">Row 3</th>
<td>row 3, Col 1</td>
<td>row 3, Col 3</td>
</tr>
</tbody>
</table>

As you can see, we have a lot of tags just to define a fairly small table. When creating your own tables you should probably consider following the order that I have used in the preceding tutorials to add the pieces to your table one at a time until you have the whole table built up the way you want it. Only then should you add the actual tabular data into the appropriate spots in the table. Doing it that way will help ensure that you don't miss any of the tags.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate