- HTML Tag
- Syntax
- Example of the HTML tag:
- Result
- Example of the HTML tag with the colspan attribute:
- Attributes
- How to style tag?
- Common properties to alter the visual weight/emphasis/size of text in tag:
- Coloring text in tag:
- Text layout styles for tag:
- Other properties worth looking at for tag:
- HTML Table Headers
- HTML Table Headers
- Example
- Vertical Table Headers
- Example
- Align Table Headers
- Example
- Header for Multiple Columns
- Example
- Table Caption
- Example
- HTML Exercises
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- HTML th Table Header Tag Tutorial with Examples
- Header Cell vs Standard Cell
- Create A Table with Table Headers
- Table Header Attributes
- Align Table Header Content
- Set Background Color of Table Header
- Extend or Spawn Table Header To Multiple Columns
- Set Width of Table Header
HTML Tag
The tag can contain text, image, form, links or any other HTML element, that can be used in the body of the HTML document. The size of the table is automatically adjusted based on the size of its content.
Note that all the rows in the table have an equal number of cells, which is equivalent to the number of cells in the longest row. If there are fewer cells in a row, then the browser will automatically fill the row, placing empty cells at the end of it.
If you need to emphasize that there is no data in other cells, then create cells without content where necessary.
The cells added by browser have no borders, and if they go after each other, they will be shown as one integrated cell.
Syntax
The
) tags.
Example of the HTML tag:
html> html> head> title>Title of the document title> style> table < width: 80%; margin: 30px auto; border-collapse: collapse; > tr:first-child < background-color: #1c87c9; color: #fff; > th, td < padding: 10px; border: 1px solid #666; > style> head> body> table> tr> th>Month th> th>Date th> tr> tr> td>June td> td>18.07.2018 td> tr> table> body> html>Result
The colspan attribute is generally used with the tag to let the content span over multiple columns. Let’s see this in action.
Example of the HTML tag with the colspan attribute:
html> html> head> title>Title of the document title> style> table < width: 80%; margin: 30px auto; border-collapse: collapse; > tr < background-color: #1c87c9; color: #ffffff; > th, td < padding: 10px; border: 1px solid #666; > style> head> body> table> tr> th colspan="2">Month and Date th> tr> tr> td>Jun td> td>18.07.2014 td> tr> table> body> html>In this example, the value of the colspan attribute is «2». It means that a header cell should span two columns.
Attributes
| Attribute | Value | Description | |
|---|---|---|---|
| abbr | text | Defines an abbreviated version of the content in a header cell, or an alternative text. Some user-agents, such as speech readers, may present this description before the content itself. Not supported in HTML 5. | |
| align | left right center | Aligns the content in a header cell. Not supported in HTML 5. | |
| axis | category_name | Categorizes cells having similar content. Not supported in HTML 5. | |
| background | background | Sets the background in a cell. Not supported in HTML 5. | |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Defines the background color of a cell. Not supported in HTML 5. | |
| bordercolor | bordercolor | Sets the color of a border. Not supported in HTML 5. | |
| char | character | Aligns the content in a header cell to a character. It is used only if the attribute is align=»char» . Not supported in HTML 5. | |
| charoff | number | Sets the number of characters the content will be aligned from the character specified by the char attribute. Is used only if attribute align=»char» . Not supported in HTML 5. | |
| colspan | number | Defines the number of columns a cell should span. The value of the attribute should be a positive integer. Default value is 1. | |
| headers | header_id | Specifies a space-separated list of header cells which contains information about this cell. The value needs to correspond to the id of the header cell (set by using the id attribute). | |
| height | % pixels | Sets the height of a cell. Not supported in HTML 5. | |
| nowrap | nowrap | Specifies that the content inside a cell should not wrap. Not supported in HTML 5. | |
| rowspan | number | Specifies the number of rows a cell should span. The value of the attribute should be a positive integer. The default value is 1. It is not recommended to use values higher than 65534, as they will be clipped down to 65534. | |
| scope | col colgroup row rowgroup auto | Defines the cells that the header element (defined in | ) relates to. Not supported in HTML 5. |
| sorted | reversed number reversed number number reversed | Defines the sort direction of a column. Not supported in HTML 5. | |
| valign | top middle bottom baseline | Specifies vertical alignment of the content inside a cell. Not supported in HTML 5. | |
| width | % pixels | Sets the width of a cell. Not supported in HTML 5. |
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for tag:
- CSS text-shadow property adds shadow to text.
- CSS text-align-last property sets the alignment of the last line of the text.
- CSS line-height property specifies the height of a line.
- CSS letter-spacing property defines the spaces between letters/characters in a text.
- CSS word-spacing property sets the spacing between words.
HTML Table Headers
HTML tables can have headers for each column or row, or for many columns/rows.
| EMIL | TOBIAS | LINUS |
|---|
| 8:00 |
|---|
| 9:00 |
| 10:00 |
| 11:00 |
| 12:00 |
| 13:00 |
| MON | TUE | WED | THU | FRI |
|---|---|---|---|---|
| 8:00 | ||||
| 9:00 | ||||
| 10:00 | ||||
| 11:00 | ||||
| 12:00 |
| DECEMBER |
|---|
HTML Table Headers
Table headers are defined with th elements. Each th element represents a table cell.
Example
Vertical Table Headers
To use the first column as table headers, define the first cell in each row as a element:
Example
Align Table Headers
By default, table headers are bold and centered:
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
To left-align the table headers, use the CSS text-align property:
Example
Header for Multiple Columns
You can have a header that spans over two or more columns.
| Name | Age | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
To do this, use the colspan attribute on the element:
Example
You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.
Table Caption
You can add a caption that serves as a heading for the entire table.
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
To add a caption to a table, use the tag:
Example
HTML Exercises
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
HTML th Table Header Tag Tutorial with Examples
HTML provides table structure which consists of rows, columns or cells. During the creation of the table, multiple tags are used. is a tag used to create a table header. A table header is a label that is put to the first row in order to explain the row or column data. tag is an essential HTML tag that is supported by all major browsers like Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge, etc.
Header Cell vs Standard Cell
Tables are used to provide tabular data in a readable and elegant way. The table consists of multiple cells that are mostly used to store given data which is number, text even image. But in order to show these data and provide information about the cells, rows, and columns table header cell is used.
Create A Table with Table Headers
table, th, td The table header example
Month Customer January 1000 February 1200
Table Header Attributes
table header provides some attributes which are listed below. But with the HTML5 most of these attributes became absolute. But they can be used currently without a problem for most of the browsers but feature use is inconsistent.
Alternatively we can use tag to put some CSS styling to the table header like below.
Align Table Header Content
Table header contents can be aligned in different directions. align attribute is used to align the table header content and left , center , right , justify and char can be used as an alignment direction. But keep in mind that align attribute it obsolete with HTML5.
table, th, td The table header example
Month Customer January 100000000 February 1200000000
Set Background Color of Table Header
The background color of the table header can be set by using attribute bgcolor . We can also use CSS properties to set the background color which is explained above. The attribute bgcolor value can be name of the color or the hexadecimal presentation of the RGB code.
table, th, td The table header example
Month Customer January 100000000 February 1200000000
Extend or Spawn Table Header To Multiple Columns
We can span or extend a single table header into multiple columns by using attribute colspan . We will provide the number of the columns we want to span. In the following example, we will span 2 columns where both will be put under the Customer table header.
table, th, td The table header example
Month Customer January 100000000 200000000 February 1200000000 2200000000
Set Width of Table Header
By default, the table header width will be set according to other cells in the same row. But you can set the table header explicitly width by using attribute width . In the following example, we will set the table header width to 500px.
table, th, td The table header example
Month Customer January 100000000 February 1200000000