RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/basic/tbody-answer.php below:

Website Navigation

HTML5: How to group the body content in a table?

HTML5: How to group the body content in a table?Last update on February 14 2024 12:55:30 (UTC/GMT +8 hours)

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to group the body content in a table</title><!-- Title of the HTML page -->
<style><!-- Start of CSS style block -->
tbody {color:blue;} /* Style rule to set text color of tbody element to blue */
table, th, td { /* Style rule to set border for table, th, and td elements */
    border: 1px solid black; /* Border property with 1px solid black */
}
</style><!-- End of CSS style block -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<table border="1"><!-- Table element with border attribute set to "1" -->
<tr><!-- Table row element -->
<th>Student code </th><!-- Table header cell for student code column -->
<th>% of marks </th><!-- Table header cell for percentage of marks column -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>S001</td><!-- Table data cell with student code "S001" -->
<td>85</td><!-- Table data cell with marks percentage "85" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>S002</td><!-- Table data cell with student code "S002" -->
<td>86</td><!-- Table data cell with marks percentage "86" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>S003</td><!-- Table data cell with student code "S003" -->
<td>72</td><!-- Table data cell with marks percentage "72" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>S004</td><!-- Table data cell with student code "S004" -->
<td>89</td><!-- Table data cell with marks percentage "89" -->
</tr><!-- End of table row -->
</table><!-- End of table -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a table displaying student codes and their corresponding percentages of marks.
The <style> tag within the <head> section contains CSS styles to customize the appearance of the table.
The tbody {color:blue;} rule sets the text color of the <tbody> element (the body content of the table) to blue.
The table, th, td {border: 1px solid black;} rule sets a border of 1 pixel solid black for the table, table header cells (<th>), and table data cells (<td>).
These styles enhance the visual presentation of the table by adding a border and changing the text color of the body content to blue.

Live Demo:

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

See the solution in the browser

Supported browser

Go to Exercise page

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