The <thead> tag groups header rows in a table. It goes inside <table>. Contains one or more <tr> with <th> cells (or <td>). Use thead for semantic structure; browsers and screen readers use it.

<thead>

Step 2

Example: <table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Alice</td><td>95</td></tr></tbody></table>. Use thead for header rows, tbody for body rows. Use <th> with scope in thead for accessibility.

<thead>
  <tr><th scope="col">Name</th><th scope="col">Score</th></tr>
</thead>

Step 3

Order: caption, thead, tbody, tfoot. One thead per table. Use scope on <th> inside thead to associate headers with columns. Add <caption> for table title.

<table>
  <caption>Scores</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Step 4

In the browser, thead rows render at the top. Use thead for all header rows. Screen readers announce thead as the header section. Always pair with tbody (and optionally tfoot).

<table><thead><tr><th>Name</th></tr></thead><tbody><tr><td>Alice</td></tr></tbody></table>

Step 5

Which element groups the header rows of a table?

<thead>

Step 6

Correct! <thead> groups header rows. <tbody> groups body rows. Use thead with <th> and scope for accessible tables.

<thead><tr><th>Name</th></tr></thead>

Step 7

You now know <thead>. Complete the challenges below to master table header sections!

thead.html

1 / 7

📋

Tutor:The <thead> tag groups header rows in a table. It goes inside <table>. Contains one or more <tr> with <th> cells (or <td>). Use thead for semantic structure; browsers and screen readers use it.

⭐ 0 EXP

Thead Mastery

Table header section: thead, tbody, th.

Concept 1: The Thead Tag

The <thead> tag groups header rows in a table. It goes inside <table>. Contains one or more <tr> with <th> cells. Use thead for semantic structure.

System Check

Which element groups the header rows of a table?

Community Holo-Net

Table Structure Patterns

Using thead, tbody, th? Share your patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <thead> Tag

Pascual Vila

Frontend Instructor.

The <thead> tag groups header rows in a table. It goes inside <table>. Contains one or more <tr> with <th> cells (or <td>). Use thead for semantic structure; browsers and screen readers use it to identify the header section.

Structure

Order: <caption>, <thead>, <tbody>, <tfoot>. One thead per table. Use <th> with scope="col" or scope="row" inside thead for accessibility.

Best practices

Always use thead when the table has header rows. Pair with tbody (and optionally tfoot). Add <caption> for table title. Use scope on <th> for screen readers.

Thead Tag Glossary

<thead>: Table header section. Groups header rows. Contains <tr> with <th> (or <td>). One thead per table.
thead / tbody / tfoot: thead = header rows, tbody = body rows, tfoot = footer rows. Semantic structure for tables. Improves accessibility.
Order: Caption, thead, tbody, tfoot. Use <th> with scope inside thead for column/row headers.

📖 INDEX