HTML5: How to define a table caption?

Last update on February 06 2024 11:32:05 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- HTML5 document type declaration -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Declares document character encoding -->
<title>How to define a table caption</title><!-- Sets the title of the webpage -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<table border="1"><!-- Start of table element with border attribute -->
<caption>First column holds Student code and second column holds percentage of marks obtained by the student</caption><!-- Caption for the table -->
<tr><!-- Start of table row for column headers -->
<th>Student code </th><!-- Header for the first column -->
<th>% of marks </th><!-- Header for the second column -->
</tr><!-- End of table row for column headers -->
<tr><!-- Start of table row for data -->
<td>S001</td><!-- Data for the first column -->
<td>85</td><!-- Data for the second column -->
</tr><!-- End of table row for data -->
<tr><!-- Start of another table row for data -->
<td>S002</td><!-- Data for the first column -->
<td>86</td><!-- Data for the second column -->
</tr><!-- End of table row for data -->
<tr><!-- Start of another table row for data -->
<td>S003</td><!-- Data for the first column -->
<td>72</td><!-- Data for the second column -->
</tr><!-- End of table row for data -->
<tr><!-- Start of another table row for data -->
<td>S004</td><!-- Data for the first column -->
<td>89</td><!-- Data for the second column -->
</tr><!-- End of table row for data -->
</table><!-- End of table element -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

This HTML document starts with a doctype declaration indicating it's an HTML5 document.
Inside the <html> tags, the document structure begins.
The <head> section contains metadata about the document, such as character encoding and the title.
The <body> section is where the visible content of the webpage resides.
Within the body section, there's a <table> element created with the border attribute set to "1" to display borders around cells.
Inside the table, there's a <caption> element defining the caption for the table.
Following the caption, there are multiple <tr> elements representing table rows.
The first row (<tr>) contains <th> elements for column headers.
The subsequent rows contain <td> elements with data for each column.
The HTML document ends with the closing </html> tag.

Live Demo :

See the Pen caption-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page