HTML Table Caption and Summary
From w3cyberlearnings
Contents |
HTML Table Caption and Summary
A table caption provides a short heading for that table. For more complex tables, you should use the caption with full summary. In this section, you will learn how to use caption and summary.
Example 1 TRY-IT
<!DOCTYPE html>
<html>
<head>
<title>Caption</title>
<style>
table {
border:1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Student Report</caption>
<tr>
<th>Subject</th>
<th>Score</th>
<th>Average</th>
</tr>
<tr>
<th>English</th>
<td class="cblue">98</td>
<td>82</td>
</tr>
<tr>
<th>Maths</th>
<td>84</td>
<td>78</td>
</tr>
<tr>
<th>Physics</th>
<td>95</td>
<td>88</td>
</tr>
</table>
</body>
</html>
Example 2 TRY-IT
In this example, we use the summary to provide additional detail. We also use the CSS to specify the caption to be displayed in the bottom of the table.
<!DOCTYPE html>
<html>
<head>
<title>Caption</title>
<style>
table {
border:1px solid black;
}
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table summary="This table provides information about the student
grades in the fall of 2012.">
<caption>Student Report</caption>
<tr>
<th>Subject</th>
<th>Score</th>
<th>Average</th>
</tr>
<tr>
<th>English</th>
<td class="cblue">98</td>
<td>82</td>
</tr>
<tr>
<th>Maths</th>
<td>84</td>
<td>78</td>
</tr>
<tr>
<th>Physics</th>
<td>95</td>
<td>88</td>
</tr>
</table>
</body>
</html>
Related Link
Table
- HTML - Table
- HTML - Table Border
- HTML - Table Column
- HTML - Table Row
- HTML - Table Color
- HTML - Table Cell Spacing and Padding
- HTML - Text Align
- HTML - Text Vertical Align
- HTML - Table Caption and Summary
- HTML - Table thead, tbody, tfoot
- HTML - Inner Table
- HTML - Table Vertical Line
- HTML - Table Horizontal Line
