td element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Table of contents

Description

The td element represents a data cell in a table. In HTML, tables consist of a set of rows, each containing a number of cells. Therefore, this element is usually found inside a row element (tr).

The attributes colspan and rowspan can be used to make cells span two or more adjacent cells in horizontal or vertical direction, respectively.

The td element, along with the th element, can only be present as child of a tr element.

In previous versions of the standard, the td element had several presentational attributes that have been removed in the HTML5 specification. Authors should drop their use in favor of style sheets.

Examples

The following example represents a table with a number of rows containing data cells (td) and header cells (th).

<table class="default">
  <tr>
    <th>Book</th>
    <th>Author</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>Dune</td>
    <td>Frank Herbert</td>
    <td>1965</td>
  </tr>
  <tr>
    <td>2001: Space Odyssey</td>
    <td>Arthur C. Clarke</td>
    <td>1968</td>
  </tr>
  <tr>
    <td>Foundation</td>
    <td>Isaac Asimov</td>
    <td>1951</td>
  </tr>
</table>
Book Author Year
Dune Frank Herbert 1965
2001: Space Odyssey Arthur C. Clarke 1968
Foundation Isaac Asimov 1951

Now, we'll make a couple of cells span the space of others in the same row. This is a very easy task, as we just need to specify how many cells to the right we'll be spanning (in the colspan attribute) and then continue declaring cells taking into account the number of cells spanned.

<table class="default">
  <tr>
    <th>Basic account</th>
    <th>Full account</th>
    <th>Premium account</th>
  </tr>
  <tr>
    <td>64 kbps</td>
    <td>96 kbps</td>
    <td>128 kbps</td>
  </tr>
  <tr>
    <td>20 connections</td>
    <td>50 connections</td>
    <td>100 connections</td>
  </tr>
  <tr>
    <td colspan="2">Support by tickets</td>
    <td>Support by tickets/phone</td>
  </tr>
  <tr>
    <td>No control panel</td>
    <td colspan="2">Broadcaster control panel</td>
  </tr>
</table>
Basic account Full account Premium account
64 kbps 96 kbps 128 kbps
20 connections 50 connections 100 connections
Support by tickets Support by tickets/phone
No control panel Broadcaster control panel

Lastly, we'll unify some cells in the same column. This time, you'll have to pay attention to the spanned cells when defining the following rows, to avoid declaring more cells than needed. This may be a little confusing at first, because of the structure of HTML tables that consist of a set of rows (and not columns) containing cells.

<table class="default">
  <tr>
    <th>Month</th>
    <th>Income</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$504.00</td>
  </tr>
  <tr>
    <td rowspan="2">February</td>
    <td>$305.50</td>
  </tr>
  <tr>
    <td>$156.50</td>
  </tr>
</table>
Month Income
January $504.00
February $305.50
$156.50

Note how in the third row of the previous example, we've declared only one cell, although the table has two columns. This is so, because the first cell in the second row has spanned the one below (the one that hasn't been declared).

When used together in a table, the attributes colspan and rowspan must be carefully declared in a way that doesn't produce overlaping cells.

Attributes

Specific attributes

colspan

The number of cells to the right this cell should span. As result, this cell will have a width equal to its original width plus the width of the cells it's spanning.

When used together in a table, the attributes colspan and rowspan must be carefully declared in a way that doesn't produce overlaping cells.

Example

<table class="default">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td colspan="2">Cell 3</td>
  </tr>
</table>
Cell 1 Cell 2
Cell 3

rowspan

The number of cells to the bottom this cell should span. If this attribute takes the value zero ("0"), this cell will span all remaining cells in the row group (thead, tbody or tfoot). As result, this cell will have a height equal to its height plus the height of the cells it's spanning.

When used together in a table, the attributes colspan and rowspan must be carefully declared in a way that doesn't produce overlaping cells.

Example

<table class="default">
  <tr>
    <td rowspan="2">Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
</table>
Cell 1 Cell 2
Cell 3

headers

A space-separated list of unique tokens, each of which matches the id attribute of a header cell (th) in the same table. The header cells pointed in this attribute are supposed to provide header information for this cell.

This attribute is rarely needed, and is only required in very complex tables. In most cases the scope attribute of header cells (th) will be enough to achieve accessible tables.

Example

<td headers="jack-allen age">28 years</td>

scope

A group of cells for which this cell provides header information. Possible values (case-insensitive) are:

  • row: all cells in the same row.
  • col: all cells in the same column.
  • rowgroup: all cells in the same row group (thead, tbody or tfoot).
  • colgroup: all cells in the same column group (colgroup).

This attribute has become obsolete for the td element. Authors can resort to heading cells (th) to provide header information.

Example

<td scope="colgroup">

axis

A list of comma-separated category names to which this cell belongs. These conceptual categories can form groups of cells that show data related under some point of view. User agents may use the information in this attribute to display and relate these categories.

This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with the scope attribute of header cells (th).

Example

<td axis="income benefit financial">

abbr

A shorter alternative to the cell's content, that may be used by browsers when appropriate. A good use for this attribute could be to replace the cell's content when the rendering space is reduced.

This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with style sheet declarations.

Example

<td abbr="Income">Income from goods and services</td>

align

The horizontal alignment of text in the cell. There are five possible values (case-insensitive):

  • left: text is aligned to the left margin. This is the default value for data cells (td).
  • center: text is centered. This is the default value for header cells (th).
  • right: text is aligned to the right margin.
  • justify: text is justified or aligned to both margins.
  • char: text is aligned to a specific character. It's used together with the char attribute.

This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with style sheet declarations.

Example

<td align="center">

char

A caracter that will act as axis for text alignment. It's meant to work together with the align attribute when it has the "char" value. In other situations it will be completely ignored.

This attribute has become obsolete in HTML5 and its use is consequently invalid. Authors are adviced to replace it with style sheet declarations.

Example

<td align="char" char="c">

charoff

An offset, from the first occurrence of the alignment caracter (specified in the char attribute) and in the direction of the text. The resulting character of this calculation will be the axis for text alignment.

For this attribute to be considered, the align attribute's value must be "char" and the char attribute must be present.

This attribute is considered obsolete by HTML5 and its use is no longer recommended. Authors should drop its use in favor of style sheets.

Example

<td align="char" char="t" charoff="7">

valign

The vertical alignment of text in the cell. There are four possible values (case-insensitive):

  • top: text is aligned to the top margin.
  • middle: text is vertically centered.
  • bottom: text is aligned to the bottom margin.
  • baseline: all the cells in a row with this alignment should have their first text line on a common baseline.

This attribute is obsolete according to the HTML5 standard and, therefore, invalid. Authors are adviced to avoid its use and replace it with style sheet declarations.

Example

<td valign="top">

width

A value indicating the width of the cell, in pixels or as a percentage relative to the horizontal available space. Browsers may adapt this value according to space availability.

This attribute has become obsolete in HTML5 because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<td width="25%">

height

A number of pixels indicating the recommended height for the cell. Browsers may adapt this value according to the cell's content.

This attribute has become obsolete in HTML5 because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<td height="110">

nowrap

A boolean value indicating if browsers should disable automatic text wrapping for the content of the cell.

This attribute has become obsolete in HTML5 because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<td nowrap>

bgcolor

A color to fill the background of the element.

The bgcolor attribute has been removed from the HTML5 standard because of its presentational nature. Its results can be perfectly achieved with style sheets.

Example

<td bgcolor="#00ccee">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.