The <tfoot> tag is used to define a group footer rows in an HTML table.
The <tfoot> element is used in conjunction with the <tbody> and <thead> tags in the table tag to specify each part of a table (header, body, footer).The <tfoot> tag have one or more and tags inside.It is an HTML5 tag.It has also opening and closing tags.
Optional Attributes :- align|valign|char|charoff
These attributes are not supported in HTML5,but in od versions of HTML theseare valid.
align=left| center|right|justify|char ---- (horizontal alignment of cells in group)
char=Character---- (alignment character for cells)
charoff=Length ----(alignment character offset)
valign= top|middle|bottom|baseline---- (vertical alignment of cells in group)
You can understand use of <tfoot> tag by a simple example:-
Conclusion:--
Optional Attributes :- align|valign|char|charoff
These attributes are not supported in HTML5,but in od versions of HTML theseare valid.
align=left| center|right|justify|char ---- (horizontal alignment of cells in group)
char=Character---- (alignment character for cells)
charoff=Length ----(alignment character offset)
valign= top|middle|bottom|baseline---- (vertical alignment of cells in group)
You can understand use of <tfoot> tag by a simple example:-
e.g.1
<!DOCTYPE html>
<html>
<head>
<title>use of tfoot tag</title>
</head>
<body>
<table border="1" width="100%">
<thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead>
<tfoot> <tr> <td>Footer(tfoot)</td> </tfoot>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr>
</tbody>
</table>
</body> </html>
Result:-
If you want to merge header or footer then use colspan attribute.Just like we use in above example in footer.
e.g.2
<!DOCTYPE html>
<html>
<head>
<title>use of tfoot tag</title>
</head>
<body>
<table border = "1">
<thead>
<TR> <td>Name</td><td>Month</td><td>Salary</td></tr> </thead>
<tfoot> <TR> <td colspan="2">Total Earnings </td><td>27000/-Rs. </td></tr> </tfoot>
<tbody> <tr> <td>Ramesh</td> <td>january</td> <td>12000/-Rs.</td> </tr>
<tr> <td>Anil</td> <td>January</td> <td>15000/-Rs.</td> </tr>
</tbody>
</table> </body>
</html>
Result:-
<!DOCTYPE html>
<html>
<head>
<title>use of tfoot tag</title>
</head>
<body>
<table border="1" width="100%">
<thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead>
<tfoot> <tr> <td>Footer(tfoot)</td> </tfoot>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr>
</tbody>
</table>
</body> </html>
Result:-
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Footer (tfoot) | ||
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
If you want to merge header or footer then use colspan attribute.Just like we use in above example in footer.
e.g.2
<!DOCTYPE html>
<html>
<head>
<title>use of tfoot tag</title>
</head>
<body>
<table border = "1">
<thead>
<TR> <td>Name</td><td>Month</td><td>Salary</td></tr> </thead>
<tfoot> <TR> <td colspan="2">Total Earnings </td><td>27000/-Rs. </td></tr> </tfoot>
<tbody> <tr> <td>Ramesh</td> <td>january</td> <td>12000/-Rs.</td> </tr>
<tr> <td>Anil</td> <td>January</td> <td>15000/-Rs.</td> </tr>
</tbody>
</table> </body>
</html>
Result:-
| Name | Month | Salary |
| Total Earnings | 27000/-Rs. | |
| Ramesh | january | 12000/-Rs. |
| Anil | January | 15000/-Rs. |
Conclusion:--
So the <tfoot> tag is used to define a group footer rows in an HTML table and used in conjunction with the <tbody> and <thead> tags in the table tag to specify each part of a table.
0 comments:
Post a Comment