Etiqueta tbody

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>

ejemplo de etiqueta tr

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>

ejemplo de tbody

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.

vamos al inicio

¿Quieres aprender mas?, entonces también te puede interesar



Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *