w3resource

CSS Properties: How to put the caption below the table?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to put the caption below the table</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
table#xtable {
    caption-side:bottom; /* Specifies that the caption should be placed below 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 below 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 below 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 solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.