Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create table footer in HTML?
The task we are going to perform in this article is how to crete table footer in HTML. As we are familiar with table in HTML, let’s have 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 organise data like photos, text, links, and more into rows and columns of cells in HTML by using tables.
HTML table footer
In an HTML table, the <tfoot> tag specifies a group of rows that make up the table footer. It can be utilised to tally the columns in a table and is frequently used to show column totals. Traditionally, you would design 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.
For getting better understanding on how to create table footer in HTML. Let’s look into the following examples
Example 1
In the following example we are using the <tfoot> tag to add footer to the table.
<!DOCTYPE html>
<html>
<body>
<table width="400" border="1">
<caption>
FASTEST 100 IN ODI'S
<hr>
</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>
On running the above script, the output window pops up, displaying the table created with the data used in the above script, along with a footer text added to the table on the webpage.
Example 2
Considering the following example we are adding the style for <tfoot> with CSS.
<!DOCTYPE html>
<html>
<head>
<style>
thead {color: #58D68D;}
tbody {color:#A569BD ;}
tfoot {color:#2C3E50 ;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>MONTHLY SAVINGS</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>OCTOMBER</td>
<td>$25</td>
</tr>
<tr>
<td>NOVEMBER</td>
<td>$50</td>
</tr>
<tr>
<td>DECEMBER</td>
<td>$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>$105</td>
</tr>
</tfoot>
</table>
</body>
</html>
When the script gets executed, it will generate an output displaying a table drawn based on the script data along with a footer added to the webpage.
Example 3
Let’s look into the another example where we are creating a table with footer.
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style = "width:100%">
<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>
</tbody>
<tbody>
<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 will generate an output consisting of a table drawn by using the data given in the script along with a footer on the webpage.
2K+ Views
