Etiqueta <tbody> HTML

definición y uso

<tbody> etiqueta se utiliza para agrupar el contenido del cuerpo de la tabla HTML.

<tbody> elemento con <thead> y <tfoot> elementos combinados para especificar cada parte de la tabla (cuerpo, cabecera, pie de página).

los navegadores pueden usar estos elementos para que las cabeceras y pies de página se muestren independientemente mientras se desplaza el contenido de la tabla. Además, al imprimir tablas grandes que se extienden a múltiples páginas, estos elementos permiten que las cabeceras y pies de página se impriman en la parte superior e inferior de cada página.

nota:<tbody> el elemento debe contener uno o más etiqueta <tr>.

<tbody> la etiqueta debe utilizarse en el contexto siguiente: como <table> los elementos hijos, en cualquier <caption>、<colgroup> y <thead> después del elemento.

consejo:Por defecto, los elementos <thead>, <tbody> y <tfoot> no afectan el diseño de la tabla. Sin embargo, puedes usar CSS para configurar los estilos de estos elementos (ver ejemplos a continuación)!

instancia

ejemplo 1

tabla HTML que contiene <thead>, <tbody> y <tfoot> elementos:

<table>
  <thead>
    <tr>
      <th>Mes</th>
      <th>Ahorros</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Junio</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Pruebe usted mismo

ejemplo 2

Configurar estilos de <thead>, <tbody> y <tfoot> usando CSS:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Mes</th>
      <th>Ahorros</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Junio</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Pruebe usted mismo

ejemplo 3

cómo alinear <tbody> el contenido (usando CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Mes</th>
      <th>Ahorros</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>Junio</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Pruebe usted mismo

ejemplo 4

cómo alinear verticalmente <tbody> el contenido (usando CSS):

<table style="width:50%;">
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Junio</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>Febrero</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Pruebe usted mismo

Atributos globales

<tbody> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<tbody> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los valores predeterminados siguientes <tbody> Elemento:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte