files/en-us/web/html/reference/elements/thead/index.md
The <thead> HTML element encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers ({{HTMLElement("th")}} elements).
{{InteractiveExample("HTML Demo: <thead>", "tabbed-taller")}}
<table>
<caption>
Council budget (in £) 2018
</caption>
<thead>
<tr>
<th scope="col">Items</th>
<th scope="col">Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Donuts</th>
<td>3,000</td>
</tr>
<tr>
<th scope="row">Stationery</th>
<td>18,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Totals</th>
<td>21,000</td>
</tr>
</tfoot>
</table>
thead,
tfoot {
background-color: #2c5e77;
color: white;
}
tbody {
background-color: #e4f0f5;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
caption {
caption-side: bottom;
padding: 10px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
td {
text-align: center;
}
This element includes the global attributes.
The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.
align {{deprecated_inline}}
left, center, right, justify, and char. When supported, the char value aligns the textual content on the character defined in the char attribute and the offset defined by the charoff attribute. Use the {{cssxref("text-align")}} CSS property instead, as this attribute is deprecated.bgcolor {{deprecated_inline}}
#, or a color keyword. Other CSS {{cssxref("<color>")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated.char {{deprecated_inline}}
align is not set to char, this attribute is ignored.charoff {{deprecated_inline}}
char attribute.valign {{deprecated_inline}}
baseline, bottom, middle, and top. Use the {{cssxref("vertical-align")}} CSS property instead, as this attribute is deprecated.<thead> is placed after any {{HTMLElement("caption")}} and {{HTMLElement("colgroup")}} elements, but before any {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, and {{HTMLElement("tr")}} elements.<thead> element provides useful {{Glossary("semantics", "semantic")}} information and can be used when rendering for either screen or print. Specifying such table content groups also provides valuable contextual information for assistive technologies, including screen readers and search engines.See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices.
This example demonstrates a table divided into a head section with column headers and a body section with the table's main data.
The <thead> and {{HTMLElement("tbody")}} elements are used to structure the table rows into {{Glossary("semantics", "semantic")}} sections. The <thead> element represents the head section of the table, which contains a row ({{HTMLElement("tr")}}) of column headers cells ({{HTMLElement("th")}}).
<table>
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Major</th>
<th>Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td>3741255</td>
<td>Jones, Martha</td>
<td>Computer Science</td>
<td>240</td>
</tr>
<tr>
<td>3971244</td>
<td>Nim, Victor</td>
<td>Russian Literature</td>
<td>220</td>
</tr>
<tr>
<td>4100332</td>
<td>Petrov, Alexandra</td>
<td>Astrophysics</td>
<td>260</td>
</tr>
</tbody>
</table>
Some basic CSS is used to style and highlight the table head so that the headings of the columns stand out from the data in the table body.
thead {
border-bottom: 2px solid rgb(160 160 160);
text-align: center;
background-color: #2c5e77;
color: white;
}
tbody {
background-color: #e4f0f5;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
tbody > tr > td:last-of-type {
text-align: center;
}
{{EmbedLiveSample("Basic_head_structure", 650, 140)}}
This example demonstrates a table head section with two rows.
We extend the markup the table from the basic example in this example by including two table rows ({{HTMLElement("tr")}}) within the <thead> element creating a multi-row table head. We included an additional column, splitting the student names into first and last names.
<table>
<thead>
<tr>
<th rowspan="2">Student ID</th>
<th colspan="2">Student</th>
<th rowspan="2">Major</th>
<th rowspan="2">Credits</th>
</tr>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>3741255</td>
<td>Martha</td>
<td>Jones</td>
<td>Computer Science</td>
<td>240</td>
</tr>
<tr>
<td>3971244</td>
<td>Victor</td>
<td>Nim</td>
<td>Russian Literature</td>
<td>220</td>
</tr>
<tr>
<td>4100332</td>
<td>Alexandra</td>
<td>Petrov</td>
<td>Astrophysics</td>
<td>260</td>
</tr>
</tbody>
</table>
In order to associate and line up the header cells with the correct columns and rows, the colspan and rowspan attributes are used on the {{HTMLElement("th")}} elements. The values set in these attributes specify how many cells each header cell ({{HTMLElement("th")}}) spans. Due to the way these attributes are set, the two second-row header cells are lined up with the columns they head. These each span one row and one column as the default values for the colspan and rowspan attributes are both 1.
The column and row spanning demonstrated by this example are illustrated in the following figure:
The CSS is unchanged from the previous example.
thead {
border-bottom: 2px solid rgb(160 160 160);
background-color: #2c5e77;
color: white;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
tbody {
background-color: #e4f0f5;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
tbody > tr > td:last-of-type {
text-align: center;
}
{{EmbedLiveSample("Multiple_head_rows", 650, 180)}}
{{Specifications}}
{{Compat}}