This element includes theglobal attributes.

colspan

Contains a non-negative integer value that indicates how many columns the data cell spans or extends. The default value is1. User agents dismiss values higher than 1000 as incorrect, setting to the default value (1).

headers

Contains a list of space-separated strings, each corresponding to theid attribute of the<th> elements that provide headings for this table cell.

rowspan

Contains a non-negative integer value that indicates for how many rows the data cell spans or extends. The default value is1; if its value is set to0, it extends until the end of the table grouping section (<thead>,<tbody>,<tfoot>, even if implicitly defined), that the cell belongs to. Values higher than65534 are clipped to65534.

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

abbrDeprecated

Contains a short abbreviated description of the data cell's content. Some user-agents, such as speech readers, may present this description before the content itself. Put the abbreviated content inside the cell and place the (longer) description in thetitle attribute, as this attribute is deprecated. Or, preferably, include the content within the data cell, and use CSS tovisually clip overflowing text.

alignDeprecated

Specifies the horizontal alignment of the data cell. The possibleenumerated values areleft,center,right,justify, andchar. When supported, thechar value aligns the textual content on the character defined in thechar attribute and the offset defined by thecharoff attribute. Use thetext-align CSS property instead, as this attribute is deprecated.

axisDeprecated

Contains a list of space-separated strings, each corresponding to theid attribute of a group of cells that the data cell applies to.

bgcolorDeprecated

Defines the background color of the data cell. The value is an HTML color; either a6-digit hexadecimal RGB code, prefixed by a#, or acolor keyword. Other CSS<color> values are not supported. Use thebackground-color CSS property instead, as this attribute is deprecated.

charDeprecated

Does nothing. It was originally intended to specify the alignment of the content to a character of the data cell. Typical values for this include a period (.) when attempting to align numbers or monetary values. Ifalign is not set tochar, this attribute is ignored.

charoffDeprecated

Does nothing. It was originally intended to specify the number of characters to offset the data cell content from the alignment character specified by thechar attribute.

heightDeprecated

Defines a recommended data cell height. Use theheight CSS property instead, as this attribute is deprecated.

scopeDeprecated

Defines the cells that the header (defined in the<th>) element relates to. The possibleenumerated values arerow,col,rowgroup, andcolgroup. Only use this attribute with the<th> element to define the row or column for which it is a header, as this attribute is deprecated for the<td> element.

valignDeprecated

Specifies the vertical alignment of the data cell. The possibleenumerated values arebaseline,bottom,middle, andtop. Use thevertical-align CSS property instead, as this attribute is deprecated.

widthDeprecated

Defines a recommended data cell width. Use thewidth CSS property instead, as this attribute is deprecated.

• The<td> may only be used within a<tr> element.

• When using thecolspan androwspan attributes to span data cells across multiple columns and rows, cells without these attributes defined (with a default value of1) are automatically fitted into free available spaces in the table structure that span 1x1 cells, as illustrated in the following figure:

  

  Note:These attributes must not be used to overlap cells.

See<table> for a complete table example introducing common standards and best practices.

This example uses<td> elements along with other table-related elements to introduce a basic table with data about the phonetic alphabet.

HTML

Some table rows (<tr> elements) contain both header cells (<th> elements) and data cell<td> elements. The<th> element that is the first child of each row forms the first column of the table, with each<th> providing the row header for the data cells within that row. Each corresponding<td> element contains data aligned with its respective column header and row header cell.

<table>  <tr>    <th scope="row">A</th>    <td>Alfa</td>    <td>AL fah</td>  </tr>  <tr>    <th scope="row">B</th>    <td>Bravo</td>    <td>BRAH voh</td>  </tr>  <tr>    <th scope="row">C</th>    <td>Charlie</td>    <td>CHAR lee</td>  </tr>  <tr>    <th scope="row">D</th>    <td>Delta</td>    <td>DELL tah</td>  </tr></table>

CSS

Some basic CSS is used to style the table and its cells. CSSattribute selectors and the:nth-of-type pseudo-class are used to alternate the appearance of the cells to make the information in the table easier to understand and identify.

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

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

HTML

An additional data cell (<td> element) is introduced within the first row (<tr> element). This creates a fourth column in the table.

Using therowspan 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 thecolspan attribute, aligning them correctly within the table structure. Note that an additional row (<tr> element) is added to the table to illustrate this.

<table>  <tr>    <th scope="row">A</th>    <td>Alfa</td>    <td>AL fah</td>    <td rowspan="3">ABC</td>  </tr>  <tr>    <th scope="row">B</th>    <td>Bravo</td>    <td>BRAH voh</td>  </tr>  <tr>    <th scope="row">C</th>    <td>Charlie</td>    <td>CHAR lee</td>  </tr>  <tr>    <th scope="row">D</th>    <td>Delta</td>    <td colspan="2">DELL tah</td>  </tr>  <tr>    <th scope="row">E</th>    <td>Echo</td>    <td colspan="2">ECK oh</td>  </tr></table>

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.

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

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

HTML

To improve theaccessibility of theprevious example and to allow screen readers, for example, to speak the headers associated with each data cell, theheaders attribute can be introduced along withid attributes. Each row header cell (<th> element) associated with the "ABC" data cell, i.e., the letters "A", "B", and "C", is given a unique identifier with theid attribute. The "ABC" data cell (<td> element) then uses theseid values in a space-separated list for theheaders attribute.

<table>  <tr>    <th scope="row">A</th>    <td>Alfa</td>    <td>AL fah</td>    <td headers="a b c" rowspan="3">ABC</td>  </tr>  <tr>    <th scope="row">B</th>    <td>Bravo</td>    <td>BRAH voh</td>  </tr>  <tr>    <th scope="row">C</th>    <td>Charlie</td>    <td>CHAR lee</td>  </tr>  <tr>    <th scope="row">D</th>    <td>Delta</td>    <td colspan="2">DELL tah</td>  </tr>  <tr>    <th scope="row">E</th>    <td>Echo</td>    <td colspan="2">ECK oh</td>  </tr></table>

Result

While thevisual result is unchanged from theprevious example table, each data cell (<td>) is now explicitly associated with its row header cell (<th>).

• Learn: HTML table basics
• <caption>,<col>,<colgroup>,<table>,<tbody>,<tfoot>,<th>,<thead>,<tr>: 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