Help:Table caption

From the AARoads Wiki: Read about the road before you go
Jump to navigation Jump to search

The caption tag is used inside the HTML element "table". This can also be done indirectly using the code "|+" as part of the wikicode for a table.

Captions are placed above the table by default. Captions can also be placed below, to the left, or to the right of the table, based on the value of the "align" parameter.

This is a caption placed to the left of the table.
This is a caption
Data-type-1 Data-type-2
Data-1a Data-2a
Data-1b Data-2b
Wiki code:
{| border="1"
|+ This is a caption
! Data-type-1 !! Data-type-2
|-
| Data-1a || Data-2a
|-
| Data-1b || Data-2b
|}
HTML code:
<table border="1">
<caption> This is a caption </caption>
<tr>
<th> Data-type-1 </th><th> Data-type-2 </th>
</tr><tr>
<td> Data-1a </td><td> Data-2a </td>
</tr><tr>
<td> Data-1b </td><td> Data-2b </td>
</tr>
</table>

A HTML <caption> tag can be created by using following wiki code:

|+ Caption

which generates the following HTML code:

<caption>Caption</caption>

You can also use parameters in wiki code:

|+ params|Caption

which will generate the HTML code:

<caption params>Caption</caption>

CSS box model equivalent:

display: table-caption;

The caption tag accepts the following parameters:

align = "top|bottom|left|right"

Equivalent stylesheet (CSS) parameters:

style="caption-side: top|bottom|left|right|inherit;"
Caption below the table
Data-type-1 Data-type-2
Data-1a Data-2a
Data-1b Data-2b
Caption to the right of the table
Wiki code: 
{| border="0" width="100%" 
| colspan="2" style="vertical-align: middle" |
{| border="1"
|+  align="bottom" style="caption-side: bottom" | Caption below the table
! Data-type-1 !! Data-type-2
|-
| Data-1a || Data-2a
|-
| Data-1b || Data-2b
|}
| Caption to the right of the table
|}

For a right-aligned caption below the table:

|+ align="bottom" style="caption-side: bottom; text-align: right;" | Caption at bottom

See also