Row Headings

We have already seen how to add column headings to our table using the thead container but in some instances we will have tables whhere we need row headings either instead of or in addition to the column headings. This is in fact easily handled simply by substituting th elements for the first td element in each row of our table. For example:

<th>row 1, heading</th>
<td>row 1, Col 1</td>
<td>row 1, Col 2</td>
<th>row 2, heading</th>
<td>row 2, Col 1</td>
<td>row 2, Col 2</td>

With the row headings defined like this we can then easily apply the spame appearance to all of the headings within our table whether they are column headings or row headings as all of the headings are contained within th containers while the actual content of the table is within td containers.

Again we should probably add a scope="row" attribute to the row headings so that the browser can clearly identify it as such.

Where you have both row headings and column headings you may end up with one element to the left of the column hheadings and above thhe row headings that doesn't need to have any actual content in it since it isn't above or to the left of any of the actual content of the table. You may want to give that first th element within the thead an id or class so as to allow you to hide the top and left borders of that element so as to avoid having an empty box at the top left of your table. Alternatively you may use that field to provide a heading for one or other of the sets of headings in which case the only way people will be able to tell whether it is a row heading over the column headings or a column heading over the row headings is by whether you give it scope="row" or scope="col" respectively.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow