<td>: The Table Data Cell element - HTML

`Column and row spanning`

This example extends and enhances the basic table from the previous example by adding an additional "ABC" cell.

HTML An additional data cell ( element) is introduced within the first row ( element). This creates a fourth column in the table. Using the rowspan attribute, the "ABC" cell is spanned across the first three rows of the table. The last data cells of the subsequent rows each span two columns. This is done using the colspan attribute, aligning them correctly within the table structure. Note that an additional row ( element) is added to the table to illustrate this. html A Alfa AL fah ABC B Bravo BRAH voh C Charlie CHAR lee D Delta DELL tah E Echo ECK oh CSS The :first-of-type and :last-of-type pseudo-classes are used in the CSS to select and style the added "ABC" data cell. css tr:first-of-type td:last-of-type { width: 60px; background-color: #505050; color: #fff; font-weight: bold; text-align: center; } td, th { border: 1px solid rgb(160 160 160); padding: 8px 10px; } tr:nth-of-type(odd) td { background-color: #eee; } tr th[scope="row"] { background-color: #d6ecd4; } table { border-collapse: collapse; border: 2px solid rgb(140 140 140); font-family: sans-serif; font-size: 0.8rem; letter-spacing: 1px; } Result

`Associate data cells with header cells`

For more complex relationships between data cells ( elements) and header cells ( elements), using elements with the scope attribute alone may not be sufficient for assistive technologies, especially screen readers.

HTML To improve the accessibility of the previous example and to allow screen readers, for example, to speak the headers associated with each data cell, the headers attribute can be introduced along with id attributes. Each row header cell ( element) associated with the "ABC" data cell, i.e., the letters "A", "B", and "C", is given a unique identifier with the id attribute. The "ABC" data cell ( element) then uses these id values in a space-separated list for the headers attribute. Note: It's recommended to use more descriptive and useful values for the id attribute. Each id in a document must be unique to that document. In this example, the id values are single characters to maintain focus on the concept of the headers attribute. html A Alfa AL fah ABC B Bravo BRAH voh C Charlie CHAR lee D Delta DELL tah E Echo ECK oh Result While the visual result is unchanged from the previous example table, each data cell () is now explicitly associated with its row header cell ().

`Technical summary`

element., ,

Content categories Sectioning root.

Permitted content Flow content.

Tag omission The start tag is mandatory.
The end tag may be omitted, if it is immediately followed by a or element or if there are no more data in its parent element.

Permitted parents A

Implicit ARIA role

cell if a descendant of a

 element, or gridcell
        if a descendant of an element with grid role
      
    
    
      Permitted ARIA roles
      Any
    
    
      DOM interface
      HTMLTableCellElement
    
  
Specifications
Specification
HTML 
# the-td-element
Browser compatibility
See also

Learn: HTML table basics

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

border: CSS property to control borders of data cells

height: CSS property to control the recommended data cell height

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

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

width: CSS property to control the recommended data cell width

:nth-of-type, :first-of-type, :last-of-type: CSS pseudo-classes to select the desired data cells

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.

,