Walk-through the table code
This tells us a table is starting.
In normal HTML, there are a few
parameters you can use. However, these are not permitted in xHTML.
- Border thickness, applied to every
cell. If you use xHTML (and also to follow best practice), you'll need
to apply the CSS border property to the td and th elements.
- Padding (spacing) inside
every cell. Alternatively, use the CSS padding property.
- Spacing outside
every cell, separating them from each other. In CSS, use the margin
The table head section does not
contain actual data, just header cells for columns (<th>
If you want column header cells,
these should go inside a <thead>, not in a table row
The first table row in the table head
section indicates a row of header cells.
These table head cells appear both in
the table head section (<thead>) and in table rows
In the table heading section, they
are column headers; in table rows, they are effectively row headers.
The content between the start and end
tags will appear in the header cell.
After the <thead> has
been closed, put the main body which will contain your rows of data.
You don't have to use a
<tbody> section, but you should if you use a
<thead> section with column headers.
Each row in the table body has to be
defined with start and end table row tags.
Start and end tags define an actual
table data cell.
Here are a few useful techniques
you'll need when creating HTML tables.
- Making cells span across columns or
- Setting properties of columns and
groups of columns.
Making cells span across columns or
You can use the properties colspan
and rowspan for a <td> to make that cell span across more
than one column or row.
The trick is making sure you remove
the relevant cells in adjacent rows or columns, which are being merged.
Trial and error is the only way to get these right.
Example of colspan and rowspan
Code for example above
Setting properties of columns and
groups of columns
You can define certain properties for
whole columns at the top of your table (between the
<table> and <thead> tags), using the
<col /> or <colgroup /> tags.
<col /> is for setting
the properties of one column at a time. <colgroup /> is
for setting properties for several columns together.
(Note that both tags are
self-closing, so if you're using xHTML, you must use the trailing
Where I find these tags most useful
is for setting the widths of columns (without having to set widths for
particular cells). What's great about it is that you can use the same
settings for a series of tables, and be sure that relevant columns will
line up, even if the amount of content in cells varies.
(If you don't set widths for columns,
then your browser should squish the columns of a table around in order
to minimise the table's overall length.)