Geek Answers Handbook

Should <tr> be inside <tbody>

Should a table row ( <tr> ) be in the table body ( <tbody> ) if the table has a table body or can it exist outside the table body?

 <table> <tr> <td colspan='2'>...</td> </tr> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> <tr> <td colspan='2'>...</td> </tr> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table>
+8
html accessibility html-validation
source share
5 answers

No, <tr> can be in <thead> , <tbody> , <tfoot> , or it should not be in any of them.

+5
source share

Unlike what Terrill Thomson said, a table with <tr> tags outside the <thead> , <tfoot> and <tbody> tags, but inside the <table> tags will be checked against the W3C Markup Validation Service .

This document has been successfully verified 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>
+6
source share

<tbody> used to indicate the body of your <table> if your table contains <thead> (table heading) or <tfoot> (table footer) elements. If your table does not contain these elements, you can not use <tbody> .

Proper use:

 <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 for tables

+1
source share

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

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

It looks like you can create something like a calendar in which you want to have variable strings <th> (for dates, for example) and <td> (for events for that date, for example). If in this case you do not have to wrap the variable lines in <thead> and <tbody> - this will lead to confusion of the devils from browsers when it comes to printing a page. If you just leave grouping items, your table will be checked. However, some screen readers may be confused by this markup and apply the very top row of headers to all cells below them. For such a complex table, you need to add extra markup to make sure screen readers understand how the table is organized. Here is your table with available 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 may need to consider organizing the data in several tables or if an alternative version can be provided that will be easier to use for users from the screen. For example, an event calendar may be further presented as a list of events.

+1
source share

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

0
source share

More articles:


All Articles