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:
| Name1 | Website | Daily Visitors | Subscribers |
|---|---|---|---|
| 1 Pretend names for pretend people | |||
| Joe Blogs | http://www.iamjoebloggs.com | 2000 | 500 |
| Bob Smith | http://www.smithy.net | 3000 | 1000 |
| Jane Doe | http://www.janedoe.com | 5000 | 750 |







Thanx so much for this tutorial Sarah
Waiting for next week tutorial
Just what the doctor ordered. Agree with every you said and looking forward to your next post!