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

Last update on February 14 2024 12:56:02 (UTC/GMT +8 hours)

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


Yes	Yes	Yes	Yes	Yes

Go to Exercise page