Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html tables: thead vs th

People also ask

Should I use th or thead?

Answer. thead is essentially a box to hold your headings for the table. It is used along with tbody and tfoot to make up the entirety of a table - header, body, footer. On the otherhand, th is a single heading element.

Do HTML tables need th?

<th> elements aren't required anywhere. They're simply one of the two cell types (the other being <td> ) that you can use in a table row. A <thead> is an optional table section that can contain one or more rows.

What is thead and th?

th = table head and thead = table head.

Is thead necessary HTML?

Those tags are not required. It is considered good form to use them if the table is used to represent data, which is what a table should be used for.


The <thead> tag is used to group the header content in an HTML table. The thead element should be used in conjunction with the tbody and tfoot elements.

More : thead

You use <thead> to encapsulate an entire row (or rows) to designate them as the Table Header. According to the spec,

"This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data."

<th>, on the other hand, is used to style a specific cell as a header cell rather than an ordinary data cell.


<th> actually is a replacement for <td> when you want to mark a cell as a header cell.

If you want to use <thead> and <th> don't forget to nest <th> inside <tr>. Otherwise the code may not be valid.
Example:

<table>
  <thead>
    <tr>
      <!-- scope="col" is optional if the th is inside a thead -->
      <th scope="col">Season</th>
      <th scope="col">Goals</th>
      <th scope="col">Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- scope="row" indicates that the th is a header for that row -->
      <th scope="row">2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th scope="row">2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

th is more specific than what may reside inside of thead. A th cell is to specify the header of the corresponding td cells. In fact you can add a headers attribute to a td cell which points to the id of a th cell (for screen readers). So th is directly related to the tds of that column.

However, thead can include any information...commonly yes it does include the th cells but it can also include anything that you might deem to be appropriate as information at the top of the table (other than a caption, because this has its own tag as well).


<thead> is special in that it can be used to repeat the header row at the top of the page in printed versions.


<thead>

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

The table head and table foot should contain information about the table's columns. The table body should contain rows of table data.

When present, each THEAD, TFOOT, and TBODY contains a row group. Each row group must contain at least one row, defined by the TR element.

<th>

Table cells may contain two types of information: header information and data. This distinction enables user agents to render header and data cells distinctly, even in the absence of style sheets. For example, visual user agents may present header cell text with a bold font. Speech synthesizers may render header information with a distinct voice inflection.

The TH element defines a cell that contains header information. User agents have two pieces of header information available: the contents of the TH element and the value of the abbr attribute. User agents must render either the contents of the cell or the value of the abbr attribute. For visual media, the latter may be appropriate when there is insufficient space to render the full contents of the cell. For non-visual media abbr may be used as an abbreviation for table headers when these are rendered along with the contents of the cells to which they apply.

Source: http://www.w3.org/TR/html4/struct/tables.html


As far as I can tell from experience, there is no difference in rendering unless you're using CSS to specify a difference in rendering. A <td> inside of a <thead> will render the same as a <th> inside of a <table> or a <tbody>.