¿Cuál es el propósito del tbody de HTML?

Question

¿Cuáles son las razones principales por las que alguien usaría el código HTML tbody en una tabla? ¿Es solo para propósitos de formateo?

Yo uso head y body en general; No he usado thead y tbody.

Answer 1

Para dar significado semántico a su mesa:

<table> 
    <thead> 
    <tr> 
     <th>Person</th> 
     <th>Amount</th> 
     <th>Date</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Person1</td> 
     <td>$5.99</td> 
     <td>02/03/09</td> 
    </tr> 
    <tr> 
     <td>Person2</td> 
     <td>$12.99</td> 
     <td>08/15/09</td> 
    </tr> 
    </tbody> 
</table> 

According to the specification:

Las filas de tabla se pueden agrupar en una cabeza de mesa, el pie de mesa, y una o más secciones del cuerpo de la mesa, utilizando el Elementos THEAD, TFOOT y TBODY, respectivamente. Esta división permite a los agentes de usuario admitir el desplazamiento de cuerpos de tabla independientemente de la cabeza y el pie de la tabla. Cuando se imprimen tablas largas, la información de cabecera y pie de tabla puede repetirse en cada página que contenga datos de tabla.

El encabezado de tabla y el pie de tabla deben contener información sobre las columnas de la tabla. El cuerpo de la tabla debe contener filas de datos de tabla.

Cuando está presente, cada THEAD, TFOOT y TBODY contienen un grupo de filas. Cada grupo de filas debe contener al menos una fila, definida por el elemento TR.

Además de la importante importancia semántica de esto (piense en los lectores de pantalla), puede fácilmente personalizar sus encabezados además de sus filas de datos. Otro ejemplo relevante es el de los complementos de jQuery, como el complemento Tablesorter, que luego puede determinar fácilmente cómo es su estructura de datos.

Answer 2

Para separar las partes del encabezado (thead), del cuerpo (tbody) y del pie de página (tfoot) de una tabla HTML. Esto es increíblemente útil. Un uso típico es colocar los encabezados de columna en su elemento thead y los datos en tbody. El elemento tfoot es menos común pero a veces útil.

Por cierto, incluso si no especifica tbody, está creado implícitamente para usted de todos modos.

Puede usarlo con propósitos de estilo demasiado ejemplo:

table thead tr { background-color: yellow; } 
table tbody tr { background-color: #C9C9C9; } 

También es útil en Javascript y jQuery para tener tablas con filas seleccionables (tal como un ejemplo). En general, solo está interesado en seleccionar o resaltar filas en el tbody, no en la fila de encabezado en la parte superior.

Answer 3

Puede usarse para el estilo, sí, y también es útil para los selectores de jQuery para ayudar a distinguir qué elementos desea seleccionar. Después de todo, puede tener etiquetas tr en thead o tbody.

Answer 4

Un gran uso que he encontrado para tbody es permitir que las filas sean desplazables manteniendo el encabezado y el pie de página de la columna visibles. Esto solo funciona en navegadores que realmente soportan css. Lo siento, no Internet Explorer!

<tbody style="height: 150px; overflow-y: scroll"> 

Answer 5

¿Qué pasa si el encabezado de la tabla es la primera columna en cada fila? En ese caso, no hay forma de especificar el encabezado de la tabla.Realmente romperá el HTML ya que el analizador asumirá que todo es parte del cuerpo de la tabla.

Y por qué exactamente es necesaria esa etiqueta ya que la th especifica los campos del encabezado - el navegador puede averiguar qué parte de la tabla es el encabezado de estos campos.

¿Cuál es el punto de thead y tbody? Funcionan en algunos casos y rompen el HTML en otros casos. Duplican la funcionalidad de th. Complican el código y pueden causar problemas: antes de saber sobre tbody, asumí que los tr-s son hijos de la mesa.

Answer 6

El thead, tbody, y tfoot elementos en HTML se utilizan para filas de la tabla de grupo en secciones lógicas en base a su contenido. Hay dos razones principales que querría hacer esto:

1. Para permitir que el cuerpo se desplaza de forma independiente de la cabecera y/o pie de página
2. Para que sea más fácil de aplicar diferentes reglas de estilo a las diferentes secciones de la mesa.

<table> 
 
    <thead> 
 
    <tr> 
 
    <th>Month</th> 
 
    <th>Savings</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <td>Sum</td> 
 
     <td>$180</td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
    <td>January</td> 
 
    <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table>