w3resource

CSS Properties: How to set initial properties for the default value of caption?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to set initial property to its default value</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
table#xtable {
    caption-side:initial; /* Sets the caption-side property to its default value, which is typically 'top' */
}
table#xtable tr:first-child { /* Targets the first row of the table */
    color: red; /* Sets the text color of the first row to red */
}
</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 set the initial property value of the caption-side CSS property to its default value.
  • 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 set the caption-side property to its initial/default value.
  • 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-initial-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.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://w3resource.com/html-css-exercise/css-properties/caption-initial-answer.php