Why would we want to “section off” tables with the `<tbody>` tag?

Frequently Asked Questions HTML FAQ
1

Question

Why would we want to “section off” tables with the <tbody> tag?

Answer

The <tbody> tag together with the <thead> and <tfoot>tags (which you will learn about in the next two exercise) give our tables semantic meaning. These tags stand to improve the user experience in a number of ways:

  1. enhanced screen reading experience for the visually impaired
  2. <thead> and <tfoot> information can be shown on each page for printing
  3. with a bit of CSS, <thead> and <tfoot> information can be seen while scrolling through long tables.
45 Likes
2
and already makes the code easy to read but is it still a common practice to include a comment such as to improve easy readability?
6 Likes
3

Comments are an awesome practice as well.

The <tbody>, <thead>, and <tfoot> tags are mainly only there to help you, the developer. Using these tags, you can easily style the header or footer differently than the actual content of the table without having to create classes for them.

For example:

thead, tfoot {
  font-weight: bold;
  background-color: #005
}

The above code would give the header and the footer of all tables a dark-blue background color and bold text. This helps the user to easily distinguish the header from the content.

26 Likes
4

The developer doesn’t come into mind; the user agent is what these are aimed at.

When it knows about their existence, it can sort things out for itself, usually regardless what order we write them. The UA knows that a header comes before a body which comes before a footer. All we as developers are doing is telling the UA that these are the component parts of our table broken down into three sections.

And let’s not forget the <caption></caption> which accessiblity guidelines recommnend.

37 Likes
5

Good point. I was referring to the fact that they make it easier to style the page. Sorry I communicated that poorly.

11 Likes
6

I do it all the time; and, rarely apologize. Neither do you need to. Every moment a learning experience. Take from it what you may. Cheers!

37 Likes
7

Shouldn’t it be “two exercises”?

8

Yeah it should be “two exercises”.

9

:grinning: :grinning: :grinnin​:grinning::grin::smile:

10

Where should we put the tbody element? :confused:

1 Like
11

A TABLE element has four direct child sectioning elements:

  • caption
  • thead
  • tbody
  • tfoot

Under accessibility guidelines, CAPTION is required, and should be just inside the TABLE element, followed by the other three in that order. THEAD contains header information such as table title and column headings. TBODY contains the table rows and table data. TFOOT contains the boilerplate and small print such as appendix and other footnote details.

20 Likes
13

And let’s not forget the <caption></caption> which accessiblity guidelines recommnend.

Sorry it’s been such a long time since your response, but, when you say accessibility guidelines, where can I find them?

And a second thing, what should be put in the <caption></caption>? What is a good caption for a table?

1 Like
14

WCAG 2 Overview | Web Accessibility Initiative (WAI) | W3C

The caption is like a page title, so should describe the table in the form of a heading. You can even use <h2></h2> in the caption to show that it is a heading.

7 Likes
15

Sorry that I can’t gather all this. Can someone help with an example of how the table element can look like with all these sectioning elements applied.

16

There is no magic to writing markup.

OPENTAG - content - ENDTAG

<table>
  <caption> </caption>
  <thead>

  </thead>
  <tbody>

  </tbody>
  <tfoot>

  </tfoot>
</table>
7 Likes
17

Thanks Roy. That’s helpful.

3 Likes
18

Yeah I’m thinking of just including comments in my table code. Table code gets repetitive.

19

Keep comments to a minimum. They can clutter things up really quick and that makes HTML harder to read, not easier. The structure and content should be able to work together to mete out enough information for the reader to get the gist of things.

If there is to be any description of the table and it contents then use the <caption></caption> element just inside the <table></table>. This is required for accessibility so make the caption brief, descriptive and concise. More information may be given in the <tfoot></tfoot> if necessary.

5 Likes
20

Cheerios! Always nice to read your posts, fren. Thanks for all your support.

2 Likes
21

On top of all this, I have found it quite handy to leave <!— comments throughout the code to annotate the different rows for quick visual reference.