2011-05-03 34 views
8

funciona una fila de la tabla (<tr>) tiene que ser en un cuerpo de la tabla (<tbody>), si la tabla tiene un cuerpo de la tabla, o puede existir fuera del cuerpo de la tabla?funciona un <tr> tienen que estar dentro de un <tbody>

<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> 
+1

Ha intentado el código anterior? http://jsfiddle.net/wQpfb/ – Dutchie432

+0

el código anterior funciona, me pregunto si es válido según w3 – superUntitled

+1

http: //validator.w3.org/ – Dutchie432

Respuesta

5

No, el <tr> puede estar en el <thead>, <tbody>, <tfoot> o que no tiene que estar en cualquiera de ellos.

+6

Si bien * puede * ser cualquiera de los elementos 'thead',' tbody' o 'tfoot' si el' tr' se encuentra directamente dentro de una 'tabla' el navegador * agregará * un' tbody' para contener el 'tr's. Por lo tanto, algo así es * does *. –

+0

¿Se mostrará el '' agregado en el html representado, o se hará algo dinámicamente sin alterar el código? –

+0

En Chromium (Ubuntu 11.04) se agrega dinámicamente un elemento 'tbody' (visible en Web Inspector, pero no en el origen del marco). Demostración [en JS Fiddle] (http://jsfiddle.net/davidThomas/UMMVS/). –

1

<tbody> se utiliza para marcar el cuerpo de su <table>, si la tabla contiene <thead> (cabecera de la tabla). . o <tfoot> (tabla de pie de página) elementos Si la tabla no contiene esos elementos, que son libres de no utilizar <tbody>

uso correcto sería:.

<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

1

Si usted tiene un exterior de un <tr><tbody>, la página no se validará: http://validator.w3.org

Como otros han señalado, <tbody> es opcional a menos que estés usando <thead> o <tfoot>. La razón principal para usar estos dos últimos elementos es que el encabezado y el pie de página se repitan en cada página si se imprime una tabla larga.

Parece que está creando algo así como un calendario, donde quiere tener filas alternas de <th> (p. Ej., Para fechas) y <td> (p. Ej., Para eventos de esa fecha). Si ese es el caso, no debe envolver las filas alternas en <thead> y <tbody> - al hacerlo, podría confundir a los buscadores cuando se trata de imprimir la página. Si solo deja los elementos de agrupación, su tabla validará. Sin embargo, algunos lectores de pantalla pueden ser confundidos por ese marcado y aplicar la fila más alta de encabezados a todas las celdas debajo de ellos. Para una tabla compleja como esta, necesitará agregar marcas adicionales para asegurarse de que los lectores de pantalla comprendan cómo está organizada la tabla. Aquí está su mesa con el formato accesible:

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

Alternativamente, es posible que desee considerar si los datos se pueden organizar en varias tablas, o si una versión alternativa puede estar previsto que serían más fáciles de usar para los usuarios de lectores de pantalla. Por ejemplo, un calendario de eventos también se podría presentar como una lista de eventos.

6

Al contrario de lo que dijo Terrill Thomson, una mesa con <tr> etiquetas fuera de las etiquetas <thead>, <tfoot> y <tbody> pero dentro de las etiquetas <table> será validado en contra de la W3C Markup Validation Service.

Este documento fue comprobado con éxito como HTML 4.01 de Transición:

<!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> 
Cuestiones relacionadas