Breaking

Sunday, May 12, 2019

HTML td Tag

Example

A simple HTML table, with two table cells:
<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>
Try it Yourself »
More "Try it Yourself" examples below.

Definition and Usage

The <td> tag defines a standard cell in an HTML table.
An HTML table has two kinds of cells:
  • Header cells - contains header information (created with the <th> element)
  • Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.

Browser Support

Element
<td>YesYesYesYesYes

Tips and Notes

Tip: Use the colspan and rowspan attribute to let the content span over multiple columns or rows!


Differences Between HTML 4.01 and HTML5

All layout attributes are removed in HTML5.

Attributes

AttributeValueDescription
abbrtextNot supported in HTML5.
Specifies an abbreviated version of the content in a cell
alignleft
right
center
justify
char
Not supported in HTML5.
Aligns the content in a cell
axiscategory_nameNot supported in HTML5.
Categorizes cells
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Not supported in HTML5.
Specifies the background color of a cell
charcharacterNot supported in HTML5.
Aligns the content in a cell to a character
charoffnumber Not supported in HTML5.
Sets the number of characters the content will be aligned from the character specified by the char attribute
colspannumberSpecifies the number of columns a cell should span
headersheader_idSpecifies one or more header cells a cell is related to
heightpixels
%
Not supported in HTML5.
Sets the height of a cell
nowrapnowrapNot supported in HTML5.
Specifies that the content inside a cell should not wrap
rowspannumberSets the number of rows a cell should span
scopecol
colgroup
row
rowgroup
Not supported in HTML5.
Defines a way to associate header cells and data cells in a table
valigntop
middle
bottom
baseline
Not supported in HTML5.
Vertical aligns the content in a cell
widthpixels
%
Not supported in HTML5.
Specifies the width of a cell

Global Attributes

The <td> tag also supports the Global Attributes in HTML.

Event Attributes

The <td> tag also supports the Event Attributes in HTML.

Try it Yourself - Examples

Table headers
How to create table headers.
Table with a caption
An HTML table with a caption.
Tags inside a table
How to display elements inside other elements.
Cells that span more than one row/column
How to define table cells that span more than one row or one column.

Related Pages

HTML tutorial: HTML Tables
HTML DOM reference: TableData Object
CSS Tutorial: Styling Tables

Default CSS Settings

Most browsers will display the <td> element with the following default values:
td {
  display: table-cell;
  vertical-align: inherit;
}

No comments:

Post a Comment