Couldn’t we use a <tr> tag rather than the <tfoot> tag for the footer instead?
Answer
Yes we could use a <tr> tag and omit the <tfoot> tag altogether. While browsers might not complain, it’s important to realize that including the semantic <tfoot> tag improves the accessibility and the user experience of our page.
When our tables have footer information, it is best practice to nest that information within the semantic <tfoot> tag.
We could but as I understand it we shouldn’t. As @wiki-bot has emphasised, the best-practice of nesting the info within the semantic tag where necessary.
The tricky thing is when you just start learning HTML, semantic markup does not seem very important, which is why its important that experienced programmers empathize to new learners that semantic markup is very important.
Experienced programmers have the experience of building projects, from which they learned how important semantic markup is.
we can see the permitted content: Zero or more <tr> elements.
sure, browser are very error resistance, but you should still follow the right way for a variety of reasons (for other developers working on your code, helping tools for people with poor vision, SEO and more)
I have a question. How using a <tfoot> makes a better user experience than using a <tr>? It doesn’t makes sense as this is only seen by the developer. The user is just going to see the data. They are just numbers for him and the font renders in the same way, I guess.
While browsers might not complain, it’s important to realize that including the semantic <tfoot> tag improves the accessibility and the user experience of our page.
User experience is hardly improved by using semantic table sectioning elements, that’s the job of the content and interactive behaviors. We use the markup to improve the readability of the table by developers and to contribute to a better document outline.
Additionally, using will cause the section to “stand apart” from the other rows, so it will grant your eyes quicker access to finding the footer of your section, should you decide to make any changes to that specific section. If we only use for all of our rows, including the header and the footer, it forces us to scan each row more diligently to find the desired space for edits.
Using <tfoot> makes it easier to edit style (color, border,etc) through CSS (yet to be taught) by isolating the footer and allowing for the editting of table elements without having these changes applied to the footer.