CSS Table Captions

By default, table captions will be displayed centered above the table, like so:

Company accounts
Year Income Expenditure Profit
2004 10m 8m 2m
2005 13m 10m 3m
2006 16m 12m 4m

If this is what you want then that's great, but often people want to move the caption. There is a CSS property which we can use to position our captions, but unfortunately it is not supported by Internet Explorer at the moment. However, it is worth knowing about because hopefully in the not-too-distant future Microsoft will get around to implementing it. In the meantime it works ok in other browsers.

To specify a position for our caption we need to use the caption-side CSS property. The value can be left, right, top or bottom. For example, if we want to move our caption to underneath our table we can do so by using the following CSS declaration:

caption {
	caption-side: bottom;
}

Below is the result of this code. If the caption appears below the table then your web browser supports this tag; if it still appears above the table then I'm afraid it doesn't!

Company accounts
Year Income Expenditure Profit
2004 10m 8m 2m
2005 13m 10m 3m
2006 16m 12m 4m

As well as changing the caption's position, we can also style its appearance using the various text styling properties available, in exactly the same way as we would style any other text. For more detail see the text styling section.