w3resource

CSS Properties: How to specify the placement of a table caption?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to specify the placement of a table caption</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
caption {
caption-side: top; /* Specifies that the caption should be placed above the table */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<table border="2"><!-- Starts a table with a border width of 2 pixels -->
<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 specify the placement of a table caption using CSS.
  • The HTML structure includes a table with a border width of 2 pixels.
  • A CSS style block is used to style the table caption, specifying that it 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 table is styled with a border width of 2 pixels for visual separation.
  • The caption "w3resource Tutorial" is added to provide context or a title for the table.

Live Demo:

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


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.