Categorías: código HTML

Etiqueta tbody

La etiqueta tbody incluye a un conjunto de fila <tr>, esto representa a una sección del cuerpo de la tabla <table>. Esta etiqueta puede ser de Gran utilidad para especificar la información contenida dentro de ello y saber qué parte del contenido de la tabla es, en comparación con aquellas que son parte del encabezado <thead> y el pie <tfoot>, es la parte más importante dentro de la etiqueta <table>.
Podríamos poner varios cuerpos en una sola tabla <table>, al declarar la etiqueta <tbody> es como una forma de aislar temáticamente las filas de contenido con las demás filas.

Importante: De la etiqueta tbody en HTML5 han sido eliminados algunos de sus atributos de versiones previas del estándar, las personas que aún usan este atributo deberían de dejar de usar.

Ejemplos:

En este presente ejemplo tenemos a una tabla, nuestra tabla en este caso tiene un solo cuerpo <tbody> es la que contiene a todas nuestras información en celdas. Asimismo, tenemos una sección de encabezado <thead> y una sección de pie de la tabla.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tabla</title>
</head>
<style type="text/css">
    table,tr,th ,td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    table {
        color: green;
    }
    th{
        text-align: center;
    }
    td{
        text-align: center;
    }
</style>
<body>
    <table style="width: 100%; background-color: white">
      <thead style="background-color: black;">
       <tr>
           <th>ID</th>
           <th>nombre</th>
           <th>cantidad</th>
       </tr>
       </thead>
       <tbody>
        <tr>
            <td>1</td>
            <td>pedro</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>rosa</td>
            <td>3</td>
        </tr>
        </tbody>
        <tfoot></tfoot>
        <tfoot style="background-color: black">
            <tr>
           <th>ID</th>
           <th>nombre</th>
           <th>cantidad</th>
       </tr>
        </tfoot>
    </table>
</body>
</html>

Adentrándonos más al tema en este ejemplo crearemos una tabla con filas organizado temáticamente, en dos cuerpos <tbody>, cada cuerpo para dos usuarios, para diferenciarlas hemos puesto con diferentes colores.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Tabla</title>
</head>
<style type="text/css">
    table,
    tr,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    table {
        color: green;
    }

    th {
        text-align: center;
    }

    td {
        text-align: center;
    }
</style>

<body>
    <table style="width: 100%; background-color: white">
        <thead style="background-color: black;">
            <tr>
                <th>ID</th>
                <th>nombre</th>
                <th>cantidad</th>
            </tr>
        </thead>
        <tbody style="background-color: aqua ">
            <tr>
                <td>1</td>
                <td>pedro</td>
                <td>8</td>
            </tr>
            <tr>
                <td>1</td>
                <td>pedro</td>
                <td>9</td>
            </tr>
        </tbody>
         <tbody  style="background-color: greenyellow">
            <tr>
                <td>2</td>
                <td>juan</td>
                <td>5</td>
            </tr>
            <tr>
                <td>2</td>
                <td>juan</td>
                <td>3</td>
            </tr>
        </tbody>
        <tfoot style="background-color: black">
            <tr>
                <th>ID</th>
                <th>nombre</th>
                <th>cantidad</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Para no complicarnos a la hora de darlos estilos a cada cuerpo <tbody>, usted podría ponerle una id o class, depende como quiera conveniente, me recordar que una id es identificador único, y una clase es lo contrario de una id.

Nota: Antes de poner tu información o dato en una tabla, debes de estructurar y clasificar, para no tener complicaciones o incoherencias a la hora de ponerla en una tabla, para mayor información sobre cómo estructurar una tabla básica o también usted desearía combinar celdas horizontalmente o verticalmente diríjase a este link (click). Si tienes alguna duda, no se preocupe usted, aquí le resolvemos sus dudas, sólo Ayúdanos con escribirlo en los comentarios y si te parece interesante el tema compártelo con los amigos.