If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.) |
The <td> Tag in HTML 5
The <td>
table detail data cell tag is used to divide a table row into individual cells. The th elements, which are for table column headings, and td elements for other cells in the same table column will come from other table rows. In addition, the <td> tag is also one of the sectioning root tags, which means that the sections and headings inside the td element are not included in the outline of any higher level sections.
Multiple Column Heading | ||
---|---|---|
First Column Heading | Second Column Heading | |
→This is an example of an HTML table footer.← | ||
Row 1 | →Row 1 Column 1← | →Row 1 Column 2← |
Row 2 | →Row 2 Column 1← | →Row 2 Column 2← |
This is an actual working demo of the table data cell example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)
The <td> tag is similar to the <th> tag in that both can be used within a tr element. One important difference, however, is that while the <td> tag is one of the sectioning root tags, which starts a new section outline for the content of the td element, the <th> tag is not and therefore contributes to the same section outline as its ancestors.
See the tutorial on Creating HTML Tables for full details on how to create an HTML table using the HTML table tags together.
<td> Tag Syntax
<body> ... flow content expected ... <table> <thead> <tr> <th>...</th> ... </tr> </thead> <tbody> <tr> <td>...</td> ... </tr> </tbody> <tfoot> <tr> <td>...</td> ... </tr> </tfoot> </table> </body>
Rules for coding the HTML td
element
Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.
- Inside a tr element code one or more td elements, one for each cell in the table row.
- Begin the element for each table cell with a starting <td> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the
xmlns
attribute on the <html> tag. - Include any attributes of the <td> tag as appropriate.The
colspan
attribute androwspan
attribute allow merging cells from multiple columns and/or rows. - End the td element with a matching
</td>
closing tag. (To ensure tags match up properly, it helps to code the starting and ending tags first, then fill in between them.) - Between the
<td>
starting tag and the</td>
ending tag include the inner HTML flow content for the content of the table cell. - Code separate td elements for any additional table cells in the same table row before the </tr> tag for the end of the row.
<td> Tag Attributes
Attributes of the <td> tag
global attributes | In addition to the personal attributes of the <td> tag below, any of the common HTML attributes can also be coded. |
colspan | merges the cells from the specified number of columns into a single cell |
rowspan | merges the cells from the specified number of rows into a single cell |
headers | a list of references to the id attribute of <th> headings applicable to the cell, separated by spaces if more than one |
<td> Tag Examples
Examples of the td
tag in HTML 5
Here is the HTML code for the table demo above:
<table> <caption>Table Caption</caption> <colgroup> <col style="width: 20%"/> <col style="width: 80%"/> </colgroup> <thead> <tr> <th rowspan="2"></th> <th colspan="2">Multiple Column Heading</th> </tr> <tr style="vertical-align: bottom"> <th>First Column Heading</th> <th>Second Column Heading</th> </tr> </thead> <tfoot> <tr><td colspan="2">This is an example of an HTML table footer.</td></tr> </tfoot> <tbody> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> </tr> </tbody> </table>
Changes in HTML 5 - <td> Tag
What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML
The following attributes should not be coded on the <td> tag because they either have been deprecated or were never officially supported:
bgcolor
height
nowrap
width
The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the td element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.