HTML and CSS Reference
In-Depth Information
As well as the
colspan
attribute, you can also specify a
rowspan
attribute. This effectively does the same thing
as
colspan
but merges cells across rows instead of across columns.
Table Header, Body, and Footers
When working with tables, you can use the
<thead>
,
<tbody>
, and
<tfoot>
elements in order to give greater
semantic meaning to your tables.
The <thead> Element
The
<thead>
element can be used to wrap the row of your table that contains the table headings. This enables com-
puter programs and search engines to easily find the column headings. Using the
<thead>
element can also come
in handy when writing CSS, because you may want to target just the elements within the
<thead>
with your CSS
rules.
The <tfoot> Element
The
<tfoot>
element should contain a set of summaries for each of the columns in a table. Although it is a footer
element, it is best to place the
<tfoot>
element under the
<thead>
in your table. The web browser will automat-
ically move this content to bottom of the table, but by putting it under the
<thead>
you make it easier to find if you
have a table with a lot of rows. See the next code extract for an example on how to use the
<tfoot>
element.
The <tbody> Element
The
<tbody>
element is used to define the rows of data that are being presented in the table. It should contain one
or more
<tr>
elements.
Here's an example of a table that uses the
<thead>
,
<tbody>
, and
<tfoot>
elements.
<table border="1">
<thead>
<tr>
<th>Pupil</th>
<th>Result</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Average</td>
<td>86</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>James</td>
<td>85</td>
</tr>
<tr>
<td>Alicia</td>
<td>97</td>
</tr>
<tr>
<td>Tom</td>
<td>76</td>
