Auto-captions on tables and images

This page is an experiment in making auto-numbered captions for tables and images by using the CSS2 generated content and counters. Especially for tables the possibilities are quite extensive, as by using attribute selectors the content of the summary or title attributes (if present) can be used.

Auto generated captions for tables

The first example extracts the values for the title and summary attribute of the HTML table, and places a caption at the top and bottom of the table.

This table uses css
generated content for the caption 
table[summary]:after {
content: "Table " counter(table) ":  " attr(summary);
counter-increment: table;
display: table-caption;
caption-side: bottom;
font-size: 10px;
font-style: italic;
white-space: nowrap;
margin-top: 5px;
margin-bottom: 20px;
}

table[title]:before {
display: table-caption;
caption-side: top;
content: attr(title);
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}

<table summary="This is the value of the summary attribute" title="This is the value of the title attribute">


<tr>


<td>This table </td>


<td>uses css</td>


</tr>


<tr>


<td>generated content</td>


<td>for the caption</td>


</tr>


</table>

The next example does not put the title as a caption, but places it inside the table as a table-cell.

This table uses css
generated content for the caption 
table#test1[title]:before {
content: attr(title);
display: table-cell;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}

<table id="test1" summary="This is the value of the summary attribute" title="This is the value of the title attribute">


<tr>


<td>This table </td>


<td>uses css</td>


</tr>


<tr>


<td>generated content</td>


<td>for the caption</td>


</tr>


</table>

The next example has a more traditional <caption> tag which is put at the bottom of the table.

This is the content of the <caption> tag.
This table uses the
<caption> tag for the caption 
table#test2 caption {
caption-side: bottom;
font-size: 10px;
font-style: italic;
margin-top: 5px;
margin-bottom: 20px;
}

table#test2 caption:before {
counter-increment: table;
content: "Table " counter(table) ": ";
}

<table id="test2">


<tr>


<td>This table</td>


<td>uses the </td>


</tr>


<tr>


<td>&lt;caption&gt; tag</td>


<td>for the caption</td>


</tr>


<caption>This is the content of the &lt;caption&gt; tag.</caption>


</table>

The last example combines the <caption> tag with generated content. This time the caption is at the top and the summary attribute is put at the bottom.

This is the content of the <caption> tag.
This table uses both the
<caption> tag and css generated content 
table#test3 caption {
caption-side: top;
font-size: 12px;
font-weight: bold;
}

<table id="test3" summary="This is the value of the summary attribute">


<caption>This is the content of the &lt;caption&gt; tag.</caption>


<tr>


<td>This table</td>


<td>uses both the </td>


</tr>


<tr>


<td>&lt;caption&gt; tag</td>


<td>and css generated content</td>


</tr>


</table>

Captions on images

A very elegant technique to create captions for images is also possible with Generated Content, by using the title attribute of the img tag.

[African Waterhole] [Atomic Bomb] [Golden Gate] 
img[title]:after {
content: "[" counter(image) "] " attr(title);
counter-increment: image;
display: block;
font-size: 10px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 20px;
color: black;
}

The last image does not contain a title attribute, so there is no caption or automatic numbering.

© 2003-2006, Mark Schenk.