You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Description: 'Groups the footer content in a table.'
3
+
Description: 'Defines a footer section for a table.'
4
4
Subjects:
5
-
- 'Web Development'
6
5
- 'Web Design'
6
+
- 'Web Development'
7
7
Tags:
8
-
- 'Tables'
8
+
- 'Data'
9
9
- 'Elements'
10
-
- 'Web Development'
10
+
- 'Tables'
11
+
- 'Tags'
11
12
CatalogContent:
12
13
- 'learn-html'
13
14
- 'paths/front-end-engineer-career-path'
14
-
- 'paths/full-stack-engineer-career-path'
15
15
---
16
16
17
-
Groups the footer content in a table.
17
+
The HTML **`<tfoot>`**[element](https://www.codecademy.com/resources/docs/html/elements) is used to define a footer section for a table. It typically contains summary information, totals, or notes related to the data presented in the table body.
18
18
19
-
## Syntax
19
+
## HTML `<tfoot>`Syntax
20
20
21
-
```html
22
-
<tfoot>
23
-
<!-- Takes in footer content -->
24
-
</tfoot>
21
+
```pseudo
22
+
<table>
23
+
<thead>
24
+
<!-- Header rows -->
25
+
</thead>
26
+
<tbody>
27
+
<!-- Main data rows -->
28
+
</tbody>
29
+
<tfoot>
30
+
<!-- Footer rows -->
31
+
</tfoot>
32
+
</table>
25
33
```
26
34
27
-
**Note:** The `<tfoot>` element is usually used along with `<tbody>` and `<thead>`. which provides useful semantic information.
35
+
> **Note:** The HTML `<tfoot>` element is usually used along with [`<tbody>`](https://www.codecademy.com/resources/docs/html/tables/tbody) and [`<thead>`](https://www.codecademy.com/resources/docs/html/tables/thead), which provides useful semantic information.
28
36
29
-
## Example 1
37
+
## Example 1: Simple Footer Using HTML `<tfoot>`
30
38
31
-
Grouping the footer content in an HTML table.
39
+
This example uses HTML `<tfoot>` to define a simple footer for a table:
32
40
33
41
```html
34
-
<table>
42
+
<tableborder="1">
35
43
<thead>
36
44
<tr>
37
45
<th>Items</th>
@@ -48,7 +56,6 @@ Grouping the footer content in an HTML table.
48
56
<td>10,000</td>
49
57
</tr>
50
58
</tbody>
51
-
<!-- All footer content will be inside the <tfoot> element -->
52
59
<tfoot>
53
60
<tr>
54
61
<td>Total</td>
@@ -58,8 +65,94 @@ Grouping the footer content in an HTML table.
58
65
</table>
59
66
```
60
67
61
-
| Items | Cost |
62
-
| ----------------------------- | ------- |
63
-
| Model 3 | $50,000 |
64
-
| 1 giant rubber debugging duck | $10,000 |
65
-
| Total | $60,000 |
68
+
Here is the output:
69
+
70
+
71
+
72
+
## Example 2: Adding Notes in Footer
73
+
74
+
This example uses HTML `<tfoot>` to create a footer for a table that contains a note about the table's data:
75
+
76
+
```html
77
+
<tableborder="1">
78
+
<thead>
79
+
<tr>
80
+
<th>Month</th>
81
+
<th>Sales</th>
82
+
</tr>
83
+
</thead>
84
+
<tbody>
85
+
<tr>
86
+
<td>January</td>
87
+
<td>$500</td>
88
+
</tr>
89
+
<tr>
90
+
<td>February</td>
91
+
<td>$450</td>
92
+
</tr>
93
+
</tbody>
94
+
<tfoot>
95
+
<tr>
96
+
<tdcolspan="2">* Data is provisional and may change.</td>
97
+
</tr>
98
+
</tfoot>
99
+
</table>
100
+
```
101
+
102
+
Here is the output:
103
+
104
+
105
+
106
+
## Example 3: Complex Table with Multiple Columns
107
+
108
+
This example uses HTML `<tfoot>` to create a footer for a table that summarizes the marks in it with a total score:
109
+
110
+
```html
111
+
<tableborder="1">
112
+
<thead>
113
+
<tr>
114
+
<th>Subject</th>
115
+
<th>Marks</th>
116
+
<th>Grade</th>
117
+
</tr>
118
+
</thead>
119
+
<tbody>
120
+
<tr>
121
+
<td>Math</td>
122
+
<td>90</td>
123
+
<td>A</td>
124
+
</tr>
125
+
<tr>
126
+
<td>Science</td>
127
+
<td>85</td>
128
+
<td>B</td>
129
+
</tr>
130
+
</tbody>
131
+
<tfoot>
132
+
<tr>
133
+
<td>Total</td>
134
+
<td>175</td>
135
+
<td>-</td>
136
+
</tr>
137
+
</tfoot>
138
+
</table>
139
+
```
140
+
141
+
Here is the output:
142
+
143
+
144
+
145
+
## Frequently Asked Questions
146
+
147
+
### 1. What is `<tfoot>` in HTML?
148
+
149
+
The HTML `<tfoot>` element defines a footer section for a table. It is mainly used to display summary information, totals, or notes that apply to the table data.
150
+
151
+
### 2. What are the `<thead>` and `<tfoot>` tags used for in HTML?
152
+
153
+
-`<thead>`: Defines the header section of a table, usually containing column titles.
154
+
-`<tfoot>`: Defines the footer section, often used for summaries or totals.
155
+
156
+
### 3. Is `<tfoot>` required in every HTML table?
157
+
158
+
No, it's optional to use `<tfoot>` in an HTML table. You only need it if you want to display footer information such as totals or notes.
0 commit comments