HTML provides table structure which consists of rows, columns or cells. During the creation of the table, multiple tags are used. <th> 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. <th> 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
In order to create a table header, we will use the <th> tag. Table header tags are put as the first block of the <table>. In the following example, we will create two table headers named Month and Customer .
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table header example</h1>
<table>
<tr>
<th>Month</th>
<th>Customer</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
</tr>
</table>
</body>
</html>
<th> Table Header Attributes
<th> 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.
| Attribute | Value | Description |
|---|---|---|
| abbr | text | Specifies an abbreviated version of the content in a header cell |
| align | left right center justify char | Not supported in HTML5. Aligns the content in a header cell |
| axis | category_name | Not supported in HTML5. Categorizes header cells |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Not supported in HTML5. Specifies the background color of a header cell |
| char | character | Not supported in HTML5. Aligns the content in a header cell to a character |
| charoff | number | Not supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute |
| colspan | number | Specifies the number of columns a header cell should span |
| headers | header_id | Specifies one or more header cells a cell is related to |
| height | pixels % | Not supported in HTML5. Sets the height of a header cell |
| nowrap | nowrap | Not supported in HTML5. Specifies that the content inside a header cell should not wrap |
| rowspan | number | Specifies the number of rows a header cell should span |
| scope | col colgroup row rowgroup | Specifies whether a header cell is a header for a column, row, or group of columns or rows |
| valign | top middle bottom baseline | Not supported in HTML5. Vertical aligns the content in a header cell |
| width | pixels % | Not supported in HTML5. Specifies the width of a header cell |
Set <th> Table Header Style with CSS
We can use CSS properties in order to change the style of the <th> table header. We can CSS properties for styling like background color, text size, etc. for the table header. In the following example, we will use the inline CSS style attribute in order to set the table header background yellow.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table header example</h1>
<table>
<tr>
<th style="background-color: yellow">Month</th>
<th style="background-color: yellow">Customer</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
</tr>
</table>
</body>
</html>
Alternatively we can use <style> tag to put some CSS styling to the <th> table header like below.
<style>
th {
background-color: yellow;
}
</style>Align <th> 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.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table header example</h1>
<table>
<tr>
<th align="right">Month</th>
<th align="center">Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
</tr>
</table>
</body>
</html>
Set Background Color of <th> 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.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table header example</h1>
<table>
<tr>
<th bgcolor="blue">Month</th>
<th bgcolor="yellow">Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
</tr>
</table>
</body>
</html>
Extend or Spawn <th> 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.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table header example</h1>
<table>
<tr>
<th>Month</th>
<th colspan=2>Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
<td>200000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
<td>2200000000</td>
</tr>
</table>
</body>
</html>
Set Width of <th> 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.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table header example</h1>
<table>
<tr>
<th>Month</th>
<th width=500>Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
</tr>
</table>
</body>
</html>