Does a <tr> have to be inside a <tbody>

末鹿安然 提交于 2019-12-01 03:49:50

No, the <tr> can be in the <thead>, <tbody>, <tfoot> or it doesn't have to be in any of them.

Contrary to what Terrill Thomson said, a table with <tr> tags outside of the <thead>, <tfoot> and <tbody> tags but inside the <table> tags will validated against the W3C Markup Validation Service.

This document was successfully checked as HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
  </head>
  <body>
    <table>
      <thead>
        <th colspan="2">head1</th>
        <th>head2</th>
      </thead>
      <tfoot>
        <th colspan="2">foot1</th>
        <th>foot2</th>
      </tfoot>

      <tr><td colspan="3">this row is outside of thead and tfoot</td></tr>

      <tbody>
        <tr>
          <td>1-1</td>
          <td>1-2</td>
          <td>1-3</td>
        </tr>
        <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>3-3</td>
        </tr>
        <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
        </tr>
      </tbody>
  </body>
</html>

<tbody> is used to mark body of your <table>, if your table contains <thead> (table header) or <tfoot> (table footer) elements. If your table doesn't contain those elements, you're free to not use <tbody>.

Correct usage would be:

<table>
<thead><tr><th>Item          </th><th>Cost </th></tr></thead>
<tbody><tr><td>Stack Overflow</td><td>Free </td></tr>
       <tr><td>Something cool</td><td>$1.00</td></tr></tbody>
</table>

HTML4 specification to tables

If you have a <tr> outside of a <tbody>, the page will not validate: http://validator.w3.org

As others have noted, <tbody> is optional unless you're using <thead> or <tfoot>. The main reason to use the latter two elements is so the header and footer are repeated on each page if a long table is printed.

It sounds like you might be creating something like a calendar, where you're wanting to have alternating rows of <th> (e.g., for dates) and <td> (e.g., for events on that date). If that's the case, you shouldn't wrap the alternating rows in <thead> and <tbody> - doing so would confuse the heck out of browsers when it came to printing the page. If you just leave the grouping elements out, your table will validate. However, some screen readers might be confused by that markup and apply the top-most row of headers to all cells beneath them. For a complex table such as this, you'll need to add additional markup to assure that screen readers understand how the table is organized. Here's your table with accessible markup:

<table summary="A brief description of how the table is organized, for screen reader users">
  <tr>
    <th colspan='2' id="header1">...</th>
  </tr>
  <tr>
    <td headers="header1">...</td>
    <td headers="header1">...</td>
  </tr>
  <tr>
    <th colspan='2' id="header2">...</th>
  </tr>
  <tr>
    <td headers="header2">...</td>
    <td headers="header2">...</td>
  </tr>
</table> 

Alternatively, you might want to consider whether the data can be organized in multiple tables, or if an alternative version can be provided that would be easier to use for screen reader users. For example, an events calendar could additionally be presented as a list of events.

<tbody> is optional, so the answer is 'yes <tr> can be outside " - see http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 .

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!