Member Avatar for Dani

What exactly is the point of the <tbody> tag? Can one table consist of more than one pair of these tags?

  • 5 Contributors
  • 11 Replies
  • 235 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: tbody is a semantic container for the table’s data rows and you can have more than one tbody in a single table (they must be consecutive). Multiple tbody elements are useful for grouping related rows (for example, quarterly sections, grouped results, or "current" vs "archived" rows) and make it easy to style or target those groups from CSS/JS. This expands on ’s validation point and explains the practical reason to use more than one body section. MDN: tbody element. (developer.mozilla.org)

Practical DOM note: browsers will create an implicit tbody if you put tr elements directly under table, and the table exposes its bodies through table.tBodies — a live collection you can read or update. Example pattern (safe to reuse in modern code):

const table = document.querySelector('table');
console.log(table.tBodies.length);           // number of <tbody> sections
const newRow = document.createElement('tr');
newRow.innerHTML = '<td>new cell</td>';
table.tBodies[1].appendChild(newRow);        // append into the second tbody

Use class or id on each tbody for reliable styling/selection. (developer.mozilla.org)

About tfoot and ordering: older HTML4 guidance recommended placing tfoot before large body rows so user agents could discover the footer early (helpful for paged printing). Modern HTML (WHATWG/HTML5) treats the content model more flexibly, so most browsers handle tfoot after tbody without problems — but if predictable printed/page-break behavior on legacy engines matters, place tfoot early. [MDN: tfoot element], [HTML spec (tables)]. (developer.mozilla.org)

Quick best-practices and gotchas: tbody does not replace td — td is the cell, tbody is the row group (answering ). Always include an explicit tbody when using thead/tfoot to avoid surprises; keep multiple tbody sections consecutive; and give them classes/IDs for styling and scripting. Remember that selectors like table > tr may fail if the browser has wrapped rows in a tbody. (developer.mozilla.org)

Recommended Answers

All 11 Replies

Member Avatar for DaveSW

I think:
<thead> is all the column headings, i.e. the first row of most tables
<tbody> is the data under those headings

so technically if you need two tbodies then you must have changed column headings, which technically is another table.

Or wasn't that what you had in mind?

Member Avatar for Dani

My question is whether it is legal to do:

<table>
  <thead>
	<tr><td>Heading</td></tr>
  </thead>
  <tbody>
	<tr><td>Body 1</td></tr>
  </tbody>
  <tbody>
	<tr><td>Body 2</td></tr>
  </tbody>
</table>
Member Avatar for Dani

Oh cool! Thanks. Definitely answers my question.

Member Avatar for DaveSW

lol no problem ;)

Member Avatar for buddyb

Has this replaced <TD></TD>? If not when do you use one over the other?
Thanks,
BuddyB

Member Avatar for DaveSW

tbody is for grouping td tags.

The TBODY element defines a group of data rows in a table.

so in a data table, your column headings would be in a thead tag, the main body of the td cells in a tbody, and the footer info in a tfoot tag. Or something like that anyway.

Member Avatar for buddyb

I got it, thanks.
BB

Member Avatar for DaveSW

no problem ;)

Member Avatar for onlyvidya

hi,,,,,
cn u plz suggest me sumthing 4 ma web project??
My web project topic is Cartoons..
so wat exactly i should do??
plzz rly,,if u hv any idea regarding wid dis..

Member Avatar for MidiMagic

This is not quite right.

The purpose of tbody is to go with thead and tfoot to make a table that has a header and footer that are always visible when the table is larger than a page.

If you use tbody, you also need to use thead and tfoot, and they must be placed in the following order:

<table>
  <thead>
    <tr>
      <th>stuff 1</th><th>stuff 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>stuff 1</th><th>stuff 2</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>stuff 1</td><td>stuff 2</td>
    </tr>
  </tbody>
</table>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.