HTML <td> tag
The <td> tag is used to create a table cell. The content in table cells is left aligned and has a normal font-weight by default.
You can also create table cells using the <th> tag - a special kind of table cell used for headings where the content is bolded and centered by default.
Attributes
| Attribute | Description | Possible values |
|---|---|---|
| abbr | Sets an abbreviated version of the content in a table cell (can be used by screen readers) | abbrContent |
| align | Aligns the content in a table cell | left, center, right, justify, char |
| axis | Sets a cateory for a table cell | theCategory |
| bgcolor | Deprecated. Sets a table cells background color | colorName, rgbValue, hexValue |
| char | Specifies a character to align the content in the table cell to | theChar |
| charoff | Specifies the number of characters the content in a cell will be aligned from the character set with the char attribute | numCharacters |
| colspan | Sets how many columns a table cell will span | numColumns |
| headers | Specifies (by name) which heading cells provide information for the current table cell | namesOfCells |
| height | Deprecated. Sets the height of a table cell | numericValue, % of sorrounding element |
| nowrap | Deprecated. Sets the content inside a table cell to not wrap onto the next line when it reaches the cell wall | nowrap |
| rowspan | Sets how many rows a table cell will span | numRows |
| scope | Specifies to what extent a table cell provides information to other table cells (for a column, row, group of columns or rows) | col, colgroup, row, rowgroup |
| valign | Vertically aligns the contents of a table cell | top, middle, bottom, baseline |
| width | Deprecated. Sets the width of a table cell | numericValue, % of sorrounding element |
Standard attributes
class, dir, id, lang, style, title, xml:lang
For more information on standard attributes, check out our HTML standard attributes reference page.
Event attributes
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
For more information on event attributes, check out our HTML event attributes reference page.
Example
| Item | Price |
|---|---|
| Lamp | 12.00 |
| Watch | 20.00 |
| Notebook | 3.00 |
Tips & notes
Use the colspan and rowspan attributes for extra table flexibility to let table cells span more than one column or row as needed.
Use tables when you want to display data in a tabular fashion (like a spreadsheet). For example, if you have a list of students names and you want to display their scores on 5 different tests. You can use the student names together with the subject the test was for as headings in the table, and the grades as regular tables cells.
Don't use tables to layout the contents of a webpage! This was the old technique of laying out webpages until better techniques using CSS were put into practice. Using tables for page layout will result in slower loading, less search engine friendly, less flexible pages that will be confusing to edit (think of all the nested tables), and will sometimes require workarounds to make things look right (those familiar with page layout using tables are probably thinking of spacer gifs right now!)