HTML Table thead tbody tfoot

From w3cyberlearnings

HTML Table thead tbody tfoot

We use <thead>,<tbody>,and <tfoot> to group rows of the table. This indicates:

A group of rows are the header rows at the top. <thead>
A group of rows for the table's body. <tbody>
A group of rows for the table's foot. <tfoot>

We use these three tags when we want to define our table into header, body, and footer.

Note

Some of the current browsers will render your table into thead, tbody, and tfoot.

Example 1 TRY-IT


<!DOCTYPE html>
<html>
<head>
<title>thead, tbody, tfoot</title>
</head>
<body>
<table>
	<caption>Student Report</caption>
	<thead>
		<tr>
			<th>Subject</th>
			<th>Score</th>
			<th>Average</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>English</th>
			<td>98</td>
			<td>82</td>
		</tr>
		<tr>
			<th>Maths</th>
			<td>84</td>
			<td>78</td>
		</tr>
		<tr>
			<th>Physics</th>
			<td>95</td>
			<td>88</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td>277</td>
			<td>248</td>
		</tr>
	</tfoot>
</table>
</body>
</html>

Example 2 TRY-IT


<!DOCTYPE html>
<html>
<head>
<title>thead, tbody, tfoot</title>
<style>
	th,td {
		background-color: cadetblue;
	}
</style>
</head>
<body>
<table>
	<caption>Student Report</caption>
	<thead>
		<tr>
			<th>Subject</th>
			<th>Score</th>
			<th>Average</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>English</th>
			<td>98</td>
			<td>82</td>
		</tr>
		<tr>
			<th>Maths</th>
			<td>84</td>
			<td>78</td>
		</tr>
		<tr>
			<th>Physics</th>
			<td>95</td>
			<td>88</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td>277</td>
			<td>248</td>
		</tr>
	</tfoot>
</table>
</body>
</html>

Search

HTML Table thead tbody tfoot

Contents

HTML Table thead tbody tfoot

Note

Example 1 TRY-IT

Example 2 TRY-IT

Related Link

Navigation

Web

SQL

MISC

References

Personal tools

Namespaces

Variants

Views

Actions