td: The Table Data Cell element
The <td>
HTML element defines a cell of a table that contains data. It participates in the table model.
Attributes
Specific attributes
Allowed attributes
colspan="[number]"
contains a non-negative integer value that indicates how many columns the data cell spans or extends. The default value is 1.
headers="[list of header ids]"
contains a list of space-separated strings, each corresponding to the id attribute of the <th>
elements that provide headings for this table cell.
rowspan="[number]"
contains a non-negative integer value that indicates how many rows the data cell spans or extends. The default value is 1.
Global attributes
accesskey
Specifies a keyboard shortcut to activate or focus an element.
aria-*
Defines accessibility properties and states for assistive technologies.
class
Specifies one or more CSS class names for styling the element.
data-*
Stores custom data private to the page or application.
dir
Sets the text direction (left-to-right, right-to-left, or auto).
hidden
Hides the element from display and assistive technologies.
id
Defines a unique identifier for the element within the document.
inputmode
Hints which virtual keyboard type to display on mobile devices.
itemid
Provides a global identifier for microdata items.
itemprop
Defines a property name-value pair for microdata.
itemref
Associates properties with an item via element IDs for microdata.
itemscope
Creates a new microdata item container.
itemtype
Specifies the vocabulary URL for microdata items (like Schema.org).
lang
Specifies the primary language of the element’s content.
nonce
Provides a cryptographic nonce for Content Security Policy.
role
Defines the element’s semantic role for accessibility.
tabindex
Controls keyboard navigation order and focusability.
title
Provides advisory information displayed as a tooltip.
Example
<table>
<caption>Web Development Skills by Community Member</caption>
<thead>
<tr>
<th id="name">Name</th>
<th id="html">HTML</th>
<th id="css">CSS</th>
<th id="js">JavaScript</th>
<th id="backend">Backend</th>
<th id="notes">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="name">Alex</td>
<td headers="html">Expert</td>
<td headers="css">Expert</td>
<td headers="js">Intermediate</td>
<td headers="backend">Beginner</td>
<td headers="notes">Focus on static sites</td>
</tr>
<tr>
<td headers="name">Jordan</td>
<td headers="html css" colspan="2">Full-stack developer</td>
<td headers="js">Expert</td>
<td headers="backend">Expert</td>
<td headers="notes">Builds complex web apps</td>
</tr>
<tr>
<td headers="name">Sam</td>
<td headers="html">Intermediate</td>
<td headers="css">Expert</td>
<td headers="js">Beginner</td>
<td headers="backend">None</td>
<td headers="notes" rowspan="2">Designer transitioning to development</td>
</tr>
<tr>
<td headers="name">Taylor</td>
<td headers="html">Intermediate</td>
<td headers="css">Expert</td>
<td headers="js">Beginner</td>
<td headers="backend">None</td>
</tr>
</tbody>
</table>
<table>
<caption>IndieWeb Technology Adoption</caption>
<thead>
<tr>
<th id="tech">Technology</th>
<th id="easy">Easy to Implement</th>
<th id="moderate">Moderate Complexity</th>
<th id="advanced">Advanced</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="tech">Microformats</td>
<td headers="easy"></td>
<td headers="moderate moderate"></td>
<td headers="advanced"></td>
</tr>
<tr>
<td headers="tech">Webmention</td>
<td headers="easy"></td>
<td headers="moderate"></td>
<td headers="advanced"></td>
</tr>
<tr>
<td headers="tech">IndieAuth</td>
<td headers="easy"></td>
<td headers="moderate"></td>
<td headers="advanced"></td>
</tr>
</tbody>
</table>