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:
Live Demo:
See the Pen caption-side-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4