Why not use <thead> to include row headings?

  1. Why not use <thead> to include row headings? Do the table headings only have column headings?
  2. “The table headings are contained inside of this element. Note that the table’s head still requires a row in order to contain the table headings.”
    What is the relationship between the table’s head and the table headings? Can the table’s head contain the table headings without creating a row? Is the table’s head a table title?

Table Head

Hello! <thead> is a tag which demonstrates to the browser that the rows inside it are special-they’re not just table rows, they’re the table heading. It means when you have a table spanning multiple pages, the table head (and <tfoot>), will always render at the top and bottom of the page. You can also use the to style (with CSS) and lend functionality (with JS), to the header of the table, and the footer of the table.

No, the table head contains each column heading.

Since <th> tags can only (really) exist inside a <tr> tag, no.

The <thead> contains the <tr> and the <th> tags, and can be used to make sure these tags are always at the top of the table. You can also use <thead> for styling/functionality.

The way it looks in the HTML:

<table>
  <thead>
   <tr>
    <th>H1</th>
   </tr>
  </thead>
<!--Other table rows/info here-->
</table>

Here is some more reading on the sunject.

I hope this helps!

2 Likes

Thanks for your reply. :blush: I heard that “THEAD contains header information such as table title and column headings”. What is the table title? could you please give me an example?

I notice this statement that “Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page” from the resource you gave.

Here are my questions: Does this mean only the table body is scrollable? Are the table header and table footer pinned at the top and bottom of each page?

AND I try to input hundreds of table data in order to make the table spanning multiple pages, but the result shown in my browser is not displayed as a multi-page table, and table heading only appears once. Why is that? Is the result you mentioned below can be only seen when printing the table?

BTW, I wanna my question is shown on the course content(the community Forums). For example, can I make it my topic shown in the circled area?


And why I can’t post a new topic at the HTML FAQ forum?

@mtf Hi, could you please answer questions? :blush:

FAQ topics are not open to all users. For that we have Get Help which is the best place to ask your question. As far as having your topics show up in the lesson page links, they have to apply to the lesson, and be helpful to other users. We vet questions and those that we believe are helpful get added to those links.

1 Like

Could you please answer these questions as well? :smile:

No, it means we can make the table body scroll but have the header fixed. That’s a CSS thing, nothing to do with tables.

There are some questions not answered :smile:

And “printing” mentioned above is really confusing to me. Is it mean that we can’t see this result in the browser?

There is no such physical element, but the THEAD would contain information such as a title for the table. The TABLE element that serves as a descriptive title is the CAPTION. That should be the first element of a table and does not get a row.

<table>
  <caption>Descriptive title of a table object</caption>

  ...
</table>

It is possible to send a table to a line printer. It follows that paper has a fixed length. When the printer knows it is printing a table (it has drivers for this) it reserves the top and bottom of the page for header and footer. You would need to create a long table, open it in a browser page and in the file menu select Print (or by whatever means). Be sure your table has both THEAD and TFOOT, in addition to TBODY.

That is to say, the THEAD can only contain the table heading(column headings). Sometimes, the combination of these column headings can be interpreted as a table title. Is my understanding right?

And I tried it, it works.In the browser, the results are not multiple pages, and thead only appears once. Once the print preview is used, thead will be fixed at the top of each page automatically.

2 Likes

In a sense. The THEAD is where all the important information relating to the table, proper would be found. There should be no data in the header. Accessibility guidelines stipulate that a table MUST have a caption. How we use the header is up to us, so long as it does not contain data.

1 Like