HTML <th> tag
The <th> tag is used to create a table heading. A table heading is a special type of table cell. Table headings are bolded and centered by default, while regular table cells (created with the <td> tag) are left aligned and have a normal font-weight by default.
Attributes
| Attribute | Description | Possible values |
|---|---|---|
| abbr | Sets an abbreviated version of the content in a table heading (can be used by screen readers) | abbrContent |
| align | Aligns the contents of a heading | left, center, right, justify, char |
| axis | Sets a cateory for a table heading | theCategory |
| bgcolor | Deprecated. Sets a table headings background color | colorName, rgbValue, hexValue |
| char | Specifies a character to align the content in the heading to | theChar |
| charoff | Specifies the number of characters the content in a heading will be aligned from the character set with the char attribute | numCharacters |
| colspan | Sets how many columns a heading will span | numColumns |
| headers | Specifies (by name) which heading cells provide information for the current heading cell | namesOfCells |
| height | Deprecated. Sets the height of a table heading | numericValue, % of sorrounding element |
| nowrap | Deprecated. Sets the content inside a table heading to not wrap onto the next line when it reaches the cell wall | nowrap |
| rowspan | Sets how many rows a heading will span | numRows |
| scope | Specifies the scope of a table heading (if it's a heading for a column, row, group of columns or rows) | col, colgroup, row, rowgroup |
| valign | Vertically aligns the contents of a heading | top, middle, bottom, baseline |
| width | Deprecated. Sets the width of a table heading | 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 | Prices (ours & competitors) | |
|---|---|---|
| Lamp | 12.00 | 18.00 |
| Watch | 20.00 | 25.00 |
| Notebook | 3.00 | 5.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!)