Add table footer to a table in HTML and CSS
Description
The following code shows how to add table footer to a table.
Example
<!--from w ww.j av a 2 s .c o m-->
<html>
<head>
<style>
thead th, tfoot th {
ext-align:left;
background:grey;
color:white;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column Heading</th>
<th>Column Heading</th>
<th>Column Heading</th>
<th>Column Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer Heading</th>
<th>Footer Heading</th>
<th>Footer Heading</th>
<th>Footer Heading</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Row Heading:</th><td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<th>Row Heading:</th><td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<th>Row Heading:</th><td>A</td><td>B</td><td>C</td>
</tr>
</tbody>
</table>
</body>
</html>
The code above generates the following result.
HTML CSS Tutorial Table Structure
Add table caption to a table in HTML and CS...
Add table cell(table data) to a table in HT...
Add vertical header or row header to a tabl...
Column groups with col element in HTML and ...
Create a Table with Longer Cell Content in ...
Create a nested table in HTML and CSS
Create a table with columns and rows in HTM...
Float table around text in HTML and CSS
Group column using colgroup in HTML and CSS
Span Cell to two rows in HTML and CSS
Span a table cell to Multiple Columns in HT...
Add table caption to a table in HTML and CS...
Add table cell(table data) to a table in HT...
Add table footer to a table in HTML and CSS
Add table header to a table in HTML and CSSAdd vertical header or row header to a tabl...
Column groups with col element in HTML and ...
Create a Table with Longer Cell Content in ...
Create a nested table in HTML and CSS
Create a table with columns and rows in HTM...
Float table around text in HTML and CSS
Group column using colgroup in HTML and CSS
Span Cell to two rows in HTML and CSS
Span a table cell to Multiple Columns in HT...