<tbody>: The Table Body element - HTML

`Basic body structure`

This example extends and enhances the basic table from the previous example.

HTML We introduce a table head ( element) and explicitly use a element to structure the table into semantic sections. The table head contains the column headers ( elements). The element represents the body section of the table, which contains a number of rows ( elements) with the table's main data, which is the data of each student. The use of such table content groups and semantic markup is not only useful for visual presentation (via CSS styling) and contextual information for assistive technologies; moreover, the explicit use of the element helps the browser to create the intended table structure, avoiding unwanted results. html Student ID Name Major Credits 3741255 Jones, Martha Computer Science 240 3971244 Nim, Victor Russian Literature 220 4100332 Petrov, Alexandra Astrophysics 260 CSS The CSS is nearly unchanged from the previous example, except for some basic styling to highlight the table head so that the headers of the columns stand out from the data in the table body. As in the example above, the tbody type selector is used to style the body cells. css tbody { background-color: #e4f0f5; } tbody > tr > td:last-of-type { text-align: center; } thead { border-bottom: 2px solid rgb(160 160 160); background-color: #2c5e77; color: #fff; } table { border-collapse: collapse; border: 2px solid rgb(140 140 140); font-family: sans-serif; font-size: 0.8rem; letter-spacing: 1px; } th, td { border: 1px solid rgb(160 160 160); padding: 8px 10px; } Result

`Multiple bodies`

This example extends and enhances the table from the example above even more by introducing multiple body sections.

Using multiple elements allows creating row groupings within a table. Each table body can potentially have its own head row or rows; however, there may only be one element per table! Because of that, with elements can be used to create headers within each . HTML Building on the table in the previous basic example, more students are added and, instead of listing each student's major on each row, the students are grouped by major. Note that each major is enclosed within its own block, with the first row ( element) serving as the head of the block, displaying the major title within a element that uses the colspan attribute to span the header across all three columns of the table. Each remaining row within each major's represents one student. html Student ID Name Credits Computer Science 3741255 Jones, Martha 240 4077830 Pierce, Benjamin 200 5151701 Kirk, James 230 Russian Literature 3971244 Nim, Victor 220 Astrophysics 4100332 Petrov, Alexandra 260 8892377 Toyota, Hiroko 240 CSS Most of the CSS is unchanged. However, a slightly more subtle style is added for header cells contained directly within a (as opposed to those that reside in the ). This is used for the headers indicating each table section's corresponding major. css tbody > tr > th { border-top: 2px solid rgb(160 160 160); border-bottom: 1px solid rgb(140 140 140); background-color: #e4f0f5; font-weight: normal; } tbody { background-color: whitesmoke; } thead { background-color: #2c5e77; color: #fff; } table { border-collapse: collapse; border: 2px solid rgb(140 140 140); font-family: sans-serif; font-size: 0.8rem; letter-spacing: 1px; } th, td { border: 1px solid rgb(160 160 160); padding: 6px 8px; text-align: left; } tbody > tr > td:last-of-type { text-align: center; } Result

`Technical summary`

elements. element's start tag can be omitted if the first thing inside the element is a element, and if the element is not immediately preceded by a , , or element whose end tag has been omitted. (It can't be omitted if the element is empty.) A element's end tag can be omitted if the element is immediately followed by a or element, or if there is no more content in the parent element. , ,

Content categories None.

Permitted content Zero or more

Tag omission A

Permitted parents

Within the required parent

 element,
        the  element can be added after any
        ,
        and  elements.
      
, 
    
    
      Implicit ARIA role
      
        rowgroup
      
    
    
      Permitted ARIA roles
      Any
    
    
      DOM interface
      HTMLTableSectionElement
    
  
Specifications
Specification
HTML 
# the-tbody-element
Browser compatibility
See also

Learn: HTML table basics

, , , : Other table-related elements
background-color: CSS property to set the background color of each body cell

border: CSS property to control borders of body cells

text-align: CSS property to horizontally align each body cell content

vertical-align: CSS property to vertically align each body cell content

Help improve MDN
Was this page helpful to you?
Learn how to contribute.
This page was last modified on Apr 10, 2025 by MDN contributors.
View this page on GitHub • Report a problem with this content
Your blueprint for a better internet.
MDN on Bluesky
MDN on Mastodon
MDN on X (formerly Twitter)
MDN on GitHub
MDN Blog RSS Feed
MDN
About
Blog
Careers
Advertise with us
Support
Product help
Report an issue
Our communities
MDN Community
MDN Forum
MDN Chat
Developers
Web Technologies
Learn Web Development
MDN Plus
Hacks Blog
Website Privacy Notice
Cookies
Legal
Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under a Creative Commons license.

,
,