CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML (Hypertext Markup Language). CSS is used to style web pages, but it can also be used to style other types of documents, such as PDFs and eBooks. CSS has many properties that can be used to style different elements of a document. One of these properties is caption-side.
Caption-side is a CSS property that is used to specify the position of a table caption. A table caption is a title or description that is displayed above or below a table. The caption-side property can be used to specify whether the caption should be displayed above or below the table, and whether it should be aligned to the left, right, or center of the table.
The caption-side property is useful for improving the accessibility of tables. By specifying the position of the caption, users with visual impairments can more easily understand the structure of the table. The caption can also be used to provide additional information about the table, such as the source of the data or the units of measurement used.
The caption-side property is used to specify the position of a table caption. The property can take one of four values: top, bottom, left, or right. The default value is top, which displays the caption above the table. If the value is set to bottom, the caption is displayed below the table. If the value is set to left or right, the caption is displayed to the left or right of the table, respectively.
The caption-side property can also be used to specify the alignment of the caption. The property can take one of three values: left, right, or center. The default value is center, which centers the caption horizontally. If the value is set to left, the caption is aligned to the left of the table. If the value is set to right, the caption is aligned to the right of the table.
The following code examples demonstrate how to use the caption-side property in CSS:
<table>
<caption style="caption-side: top;">Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
In this example, the caption-side property is set to top, which displays the caption above the table.
<table>
<caption style="caption-side: bottom;">Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
In this example, the caption-side property is set to bottom, which displays the caption below the table.
<table>
<caption style="caption-side: left;">Table Caption</caption>
<tr>
<th>Header 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Header 2</th>
<td>Data 2</td>
</tr>
</table>
In this example, the caption-side property is set to left, which displays the caption to the left of the table.
<table>
<caption style="caption-side: right;">Table Caption</caption>
<tr>
<th>Header 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Header 2</th>
<td>Data 2</td>
</tr>
</table>
In this example, the caption-side property is set to right, which displays the caption to the right of the table.
<table>
<caption style="caption-side: top; text-align: left;">Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
In this example, the caption-side property is set to top, and the text-align property is set to left, which aligns the caption to the left of the table.
<table>
<caption style="caption-side: top; text-align: right;">Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
In this example, the caption-side property is set to top, and the text-align property is set to right, which aligns the caption to the right of the table.
<table>
<caption style="caption-side: top; text-align: center;">Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
In this example, the caption-side property is set to top, and the text-align property is set to center, which centers the caption horizontally.