CSS Properties: How to put the caption above the table?
Solution:
HTML Code:
<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to put the caption above the table</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
table#xtable {
caption-side:top; /* Specifies that the caption should be placed above the table */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<table id="xtable" border="2"><!-- Starts a table with a border width of 2 pixels and assigns it an id of "xtable" -->
<caption>w3resource Tutorial</caption><!-- Adds a caption to the table -->
<tr><!-- Starts a table row -->
<th>Frontend</th><!-- Defines a table header cell for the "Frontend" column -->
<th>Backend</th><!-- Defines a table header cell for the "Backend" column -->
<th>Database</th><!-- Defines a table header cell for the "Database" column -->
</tr><!-- Ends the table row -->
<tr><!-- Starts a new table row -->
<td>HTML</td><!-- Defines a table data cell with HTML content -->
<td>PHP</td><!-- Defines a table data cell with PHP content -->
<td>SQL</td><!-- Defines a table data cell with SQL content -->
</tr><!-- Ends the table row -->
<tr><!-- Starts a new table row -->
<td>CSS</td><!-- Defines a table data cell with CSS content -->
<td>Python</td><!-- Defines a table data cell with Python content -->
<td>MySQL</td><!-- Defines a table data cell with MySQL content -->
</tr><!-- Ends the table row -->
<tr><!-- Starts a new table row -->
<td>Javascript</td><!-- Defines a table data cell with Javascript content -->
<td>Java</td><!-- Defines a table data cell with Java content -->
<td>PostgreSQL</td><!-- Defines a table data cell with PostgreSQL content -->
</tr><!-- Ends the table row -->
<tr><!-- Starts a new table row -->
<td>HTML5</td><!-- Defines a table data cell with HTML5 content -->
<td>Node.js</td><!-- Defines a table data cell with Node.js content -->
<td>SQlite</td><!-- Defines a table data cell with SQlite content -->
</tr><!-- Ends the table row -->
<tr><!-- Starts a new table row -->
<td>Schema.org</td><!-- Defines a table data cell with Schema.org content -->
<td>Ruby</td><!-- Defines a table data cell with Ruby content -->
<td>NoSQL</td><!-- Defines a table data cell with NoSQL content -->
</tr><!-- Ends the table row -->
<tr><!-- Starts a new table row -->
<td>PHP.js</td><!-- Defines a table data cell with PHP.js content -->
<td>C Programing</td><!-- Defines a table data cell with C Programing content -->
<td>MongoDB</td><!-- Defines a table data cell with MongoDB content -->
</tr><!-- Ends the table row -->
<tr><!-- Starts a new table row -->
<td>Twitter Bootstrap</td><!-- Defines a table data cell with Twitter Bootstrap content -->
<td>-</td><!-- Defines a table data cell with - content -->
<td>Oracle</td><!-- Defines a table data cell with Oracle content -->
</tr><!-- Ends the table row -->
</table><!-- Ends the table -->
</body>
</html>
Explanation:
- This HTML document demonstrates how to put the caption above the table using CSS.
- The HTML structure includes a table with a border width of 2 pixels and an id of "xtable".
- A CSS style block is used to style the table with the id "xtable" and specify that the caption should be placed above the table.
- The table itself contains rows and columns detailing frontend, backend, and database technologies.
- Each row contains data cells representing different technologies such as HTML, PHP, SQL, etc.
- The caption "w3resource Tutorial" is added to provide context or a title for the table.
Live Demo :
See the Pen caption-top-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
 |
 |
 |
 |
 |
| Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.