HTML Coding: Tabular Data I

If you want to display tabular data on a page then this is when you should use tables. You’ll get mixed reviews on tables. For those who learned how to code up websites before CSS gained popularity, they’ll have used tables to control their layout, and plenty of people still do (unfortunately!), and for those who have started to learn HTML in recent years, most don’t have a clue about tables except they’re ‘bad’.

Tables have a place in (x)HTML. They’re not deprecated and shouldn’t be avoided, simply used for the right job, just like every other aspect of HTML. If you want to display tabular data then you should use a table, not multiple divs, paragraphs or spans.

Table Tags

So where do we start with a table? This week I’ll go through the HTML tags associated with them. Next week I’ll explain how to put it all together

table

The main tag is the table tag. This defines the start and the end of a table. It’s a block level element so shouldn’t be placed in a paragraph. It has a number of available attributes which are:

border

This defines the border of the table. The default is 0.

cellpadding

This is the padding around the content of a cell and the edge of the cell. It can accept either a number or percentage.

cellspacing

This is the spacing between cells. It can accept a number or a percentage.

summary

This is a summary of the table for accessibility purposes.

width

This defines the width of the table and accepts either a number (for pixels) or a percentage.

Although the above are all allowable attributes, it’s recommended to set your cellpadding, width and border via CSS using padding, width and border properties.

caption

The caption tag gives the table a caption and allows you to associate a table’s title with its contents. It’s recommended for accessibility and usability.

colgroup

The colgroup tag can work in a couple of ways, but its main function is to define the column group within the table. You can use it on its own, to define the number of columns and their widths in a table, or in conjuction with the col tag (see below). The attributes available to this tag are

span

The number of columns the colgroup should span. This should only be used if just the colgroup tag is being used. It should be omitted if the col tag is also being used.

width

This defines the width of the columns within the group. It can accept a number or percentage.

col

The col tag allows you to define the width for a column or a group of columns within the colgroup tag. The col tag is an empty tag, so in XHTML it is self closing. It accepts the same attributes as the colgroup tag above.

thead

This tag defines a table header. It should be used to wrap around the heading row. It doesn’t accept any attributes but should be used for semantics.

tfoot

As with the thead tag, this is the table footer and should actually come directly after the table header (once the thead tag has closed). It should wrap around the footer row. Although it comes after the heading row, it will still be placed at the foot of the table.

tbody

This is the table body and should wrap around the content for the table. You can have multiple table bodies.

tr

This stands for table row, and is used to define a row in the table. It contains the table cells (th and td).

th

This defines the table heading cell and should be used within a table row, within the table header. The more commonly used attributes for this are:

colspan

This defines how many columns the cell spans

rowspan

This defines how many rows the cell spans

scope

This defines whether the cell provides header information for the rest of the row, rowgroup, column (value of col) or colgroup that contains it

There are a number of advanced attributes for the th tag which I won’t go into at this point.

td

This defines the table data cell. It holds data value within the table. It accepts a number of attributes, the most commonly used are:

colspan

This defines how many columns the cell spans

rowspan

This defines how many rows the cell spans

Table Example

There’s a lot of information above. I’ll explain about how it can all go together next week, however here is an example of how a table can/should appear to be:

Written by Sarah from Stuff By Sarah
Posted on January 29th, 2009 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

3