To use , you need to use it with

Frequently Asked Questions and Precautions

Home Web Front-end HTML Tutorial How do I add a table header using the element?

How do I add a table header using the element?

Karen Carpenter

Jun 23, 2025 am 12:48 AM

---

Using

is a standard practice for adding table headers in HTML because it improves semantic clarity, facilitates styling and script control, and supports fixed headers when printing. Specific steps include: 1. Use to wrap the header rows inside <table>; 2. Use <th> to define the header cell instead of <td>; 3. Use <tbody> to include data rows immediately afterwards; 4. Use CSS to control the header style, such as setting background color and font bold. Notes include: Make sure is located in <table>, a table usually uses only one , and modern browsers support this tag.

Using the <thead> element is a standard and recommended practice when adding a table header in HTML. It not only helps with clear structure, it also helps with accessibility and style control. Here are some practical steps and suggestions to help you use <code><thead> correctly to add table headers.<hr> <h3> What is <code><thead> ? Why use it?<p> <code><thead> is part of an HTML table that is specifically used to wrap the title row (usually the first row) of the table. Its main functions are:<ul> <li> Separate the table header from other content to improve semantic clarity</li> <li> Convenient to use CSS or JavaScript to operate the table header separately</li> <li> You can fix the display header when printing long tables (combined with CSS)</li> </ul> <p> If you just write a few <code><tr> and <code><td> , although it can also display tables, it lacks structured semantics and is not conducive to maintenance and expansion.<hr> <h3 id="How-to-add-a-header-using-code-thead-correctly-p-To-use-code-thead-you-need-to-use-it-with-code-table-code-tr-code-th-and-other-tags-The-basic-structure-is-as-follows-PRE-BLOCK-p-Key-points-p-ul-li-code-thead-code-should-only-contain-the-header-part-usually-one-or-more-code-tr-code-rows-li-li-The-header-cell-should-be-used-code-th-code-instead-of-code-td-code-so-that-the-browser-will-bold-and-center-it-by-default-li-li-code-thead-code-is-usually-followed-by-code-tbody-code-which-is-used-to-wrap-data-lines-li-ul-hr-h-Frequently-Asked-Questions-and-Precautions"> How to add a header using <code><thead> correctly?<p> To use <code><thead> , you need to use it with <code><table> , <code><tr> , <code><th> and other tags. The basic structure is as follows:<pre class='brush:php;toolbar:false;'> &lt;table&gt; &lt;head&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Age&lt;/th&gt; &lt;th&gt;City&lt;/th&gt; &lt;/tr&gt; &lt;/head&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Zhang San&lt;/td&gt; &lt;td&gt;28&lt;/td&gt; &lt;td&gt;Beijing&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Li Si&lt;/td&gt; &lt;td&gt;32&lt;/td&gt; &lt;td&gt;Shanghai&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</pre><p> Key points:</p><ul><li> <code><thead> should only contain the header part, usually one or more <tr> rows

The header cell should be used <th> instead of <td> , so that the browser will bold and center it by default.

<thead> is usually followed by <tbody> , which is used to wrap data lines

---

Frequently Asked Questions and Precautions

• Don't misplace <thead> : it must be placed inside <table> tag and cannot be used alone.
• Avoid multiple <thead> : A table usually only requires one header area.
• Compatibility is no problem : modern browsers support <thead> , including the older version of IE (IE9).
• Style control tips : You can set the table header styles through the CSS selector table thead tr th , such as background color, font size, etc.

For example:

 thead th {
  background-color: #f2f2f2;
  font-weight: bold;
}

This can make the watch header more eye-catching and enhance the user experience.

---

Basically that's it. Just remember the purpose and structure of <thead> and add a little simple HTML tag combination to add standard headers to your table.