Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create table footer in HTML?
The task we are going to perform in this article is how to create table footer in HTML. As we are familiar with table in HTML, let's have a quick look on it.
A table in HTML makes a lot of sense when you want to organize data that would look best in a spreadsheet. A table is a visual representation of rows and columns of data. You may organize data like photos, text, links, and more into rows and columns of cells in HTML by using tables.
Syntax
Following is the syntax for creating a table footer using the <tfoot> tag −
<table>
<thead>
<tr><th>Header</th></tr>
</thead>
<tfoot>
<tr><td>Footer content</td></tr>
</tfoot>
<tbody>
<tr><td>Body content</td></tr>
</tbody>
</table>
HTML Table Footer
In an HTML table, the <tfoot> tag specifies a group of rows that make up the table footer. It can be utilized to tally the columns in a table and is frequently used to show column totals. Traditionally, you would style the <tfoot> tag using CSS to draw attention to the column totals. The <tfoot> element is another name for this tag that is frequently used.
The <tfoot> tag must be used in conjunction with the <thead> and <tbody> tags. In HTML source code, the <tfoot> element must be placed after the <thead> but before the <tbody> elements for proper semantic structure.
For getting better understanding on how to create table footer in HTML, let's look into the following examples −
Example 1 − Basic Table with Footer
In the following example we are using the <tfoot> tag to add footer to the table −
<!DOCTYPE html>
<html>
<head>
<title>Table Footer Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: left;
}
caption {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
tfoot th {
background-color: #f0f0f0;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>FASTEST 100 IN ODI'S</caption>
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th>Balls</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">AB de Villiers - the Best Player!</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>AB de Villiers</td>
<td>South Africa</td>
<td>31</td>
</tr>
<tr>
<td>CJ Anderson</td>
<td>New Zealand</td>
<td>36</td>
</tr>
<tr>
<td>Shahid Afridi</td>
<td>Pakistan</td>
<td>37</td>
</tr>
</tbody>
</table>
</body>
</html>
The output displays the table with cricket data and a highlighted footer message −
FASTEST 100 IN ODI'S Name Country Balls AB de Villiers South Africa 31 CJ Anderson New Zealand 36 Shahid Afridi Pakistan 37 AB de Villiers - the Best Player! (highlighted footer)
Example 2 − Table Footer with Total Calculations
Considering the following example we are adding the style for <tfoot> with CSS to display totals −
<!DOCTYPE html>
<html>
<head>
<title>Monthly Savings Table</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: left;
}
thead th {
background-color: #58D68D;
color: white;
}
tbody td {
color: #A569BD;
}
tfoot td {
background-color: #2C3E50;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h1>MONTHLY SAVINGS</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>TOTAL</td>
<td>$105</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>OCTOBER</td>
<td>$25</td>
</tr>
<tr>
<td>NOVEMBER</td>
<td>$50</td>
</tr>
<tr>
<td>DECEMBER</td>
<td>$30</td>
</tr>
</tbody>
</table>
</body>
</html>
When the script gets executed, it displays a styled table with color-coded sections and a total footer −
MONTHLY SAVINGS Month Savings OCTOBER $25 (purple text) NOVEMBER $50 (purple text) DECEMBER $30 (purple text) TOTAL $105 (dark background, white text)
Example 3 − Multiple Column Footer
Let's look into another example where we are creating a table with a spanning footer −
<!DOCTYPE html>
<html>
<head>
<title>Table with Spanning Footer</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 12px;
text-align: center;
}
thead td {
background-color: #e0e0e0;
font-weight: bold;
}
tfoot td {
background-color: #f8f8f8;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the footer of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
On running the above script, it displays a table with spanning header and footer sections −
This is the head of the table (gray background, spans 4 columns) Cell 1 Cell 2 Cell 3 Cell 4 Cell 1 Cell 2 Cell 3 Cell 4 This is the footer of the table (light gray background, italic, spans 4 columns)
Key Points
Here are the important points to remember about HTML table footers −
The
<tfoot>tag is used to group footer content in an HTML table.It should be placed after
<thead>and before<tbody>in the HTML source code.The footer typically contains summary information, totals, or concluding remarks.
You can use the
colspanattribute to span footer cells across multiple columns.CSS can be applied to style the footer differently from the header and body sections.
The
<tfoot>element improves table accessibility and semantic structure.
Conclusion
The <tfoot> tag is essential for creating well-structured HTML tables with footer content. It provides semantic meaning to summary rows and totals, making tables more accessible and easier to style. Use it alongside <thead> and <tbody> to create professional, organized data tables.
2K+ Views
