- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <tfoot> Tag
The <tfoot> tag is used to group footer content in an HTML table. HTML <tfoot> tag is used as a child element of the HTML table (<table>).
The <tfoot> tag is frequently utilised to show column totals and can be used to summarise the columns in a table. Traditionally, the <tfoot> tag would be styled with CSS to draw attention to the column totals. By default, the <thead>, <tbody>, and <tfoot> elements have no impact on how the table is organised. However, you can style these elements with CSS.
Syntax
<tfoot>...</tfoot>
Attribute
HTML tfoot tag supports Global and Event attributes of HTML. Bellow mentioned attributes are deprecated so use CSS properties rather using these attributes.
Attribute | Value | Description |
---|---|---|
align | left right center justify |
Specifies the alignment of text content(Deprecated). |
bgcolor | color | Specifies the background color of each column cell(Deprecated). |
char | character | Specifies the alignment of the content to a character of each column cell(Deprecated). |
charoff | number | Specifies the number of characters to offset the column cell content from the alignment character specified by the char attribute(Deprecated). |
valign | baseline bottom middle top |
Specifies the vertical alignment of each column cell(Deprecated). |
Examples of HTML tfoot Tag
Bellow examples will illustrate the usage of tfoot tag. Where, when and how to use tfoot tag and how to style the footer part of a table.
Creating Table Footer
Following is an example where we are going to use the <tfoot> tag in the HTML table.
<!DOCTYPE html> <html> <body> <table border="1"> <thead> <tr> <th>Students</th> <th>English Marks</th> <th>Hindi Marks</th> </tr> </thead> <tfoot> <tr> <th colspan="3">Juliet - the best Performer!</th> </tr> </tfoot> <tbody> <tr> <td>John</td> <td>28</td> <td>25</td> </tr> <tr> <td>Peterson</td> <td>25</td> <td>25</td> </tr> <tr> <td>Juliet</td> <td>29</td> <td>29</td> </tr> </tbody> </table> </body> </html>
Styling Table Footer
Consider another scenario where we are going to use the <tfoot> tag in the table and apply CSS to it.
<!DOCTYPE html> <html> <style> tfoot { background-color: #3f87a6; } </style> <body> <table border="1"> <thead> <tr> <th>Items</th> <th>Price</th> </tr> </thead> <tfoot> <tr> <th>Total</th> <th>75</th> </tr> </tfoot> <tbody> <tr> <td>5-Star</td> <td>10</td> </tr> <tr> <td>Dairy-Milk</td> <td>45</td> </tr> <tr> <td>KitKat</td> <td>20</td> </tr> </tbody> </table> </body> </html>
Align Table footer Element
Let’s consider the following example, where we are going to align the content inside the <tfoot> tag to the right side using CSS.
<!DOCTYPE html> <html> <style> table, th, td { border: 1.5px solid #DE3163; } </style> <body> <table style="width:50%"> <tr> <th>Students</th> <th>Gathered Amount</th> </tr> <tr> <td>Ram</td> <td>$200</td> </tr> <tr> <td>Suresh</td> <td>$800</td> </tr> <tr> <td>Maya</td> <td>$500</td> </tr> <tfoot style="text-align:right"> <tr> <td>Total</td> <td>$1500</td> </tr> </tfoot> </table> </body> </html>
Vertical Alignment of Table Footer Element
In the following example, we are going to use the vertical align property and make the content inside the <tfoot> tag align in the middle.
<!DOCTYPE html> <html> <style> table, th, td { border: 1.5px solid #82E0AA; } </style> <body> <table style="width:40%"> <tr> <th>ID</th> <th>Employee</th> </tr> <tr> <td>12234</td> <td>Maya</td> </tr> <tr> <td>12235</td> <td>John</td> </tr> <tr> <td>12236</td> <td>Kevin</td> </tr> <tfoot style="vertical-align:middle"> <tr style="height:100px"> <td>Total Employees</td> <td>3</td> </tr> </tfoot> </table> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
tfoot | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google