Unidad 6. Tablas (V)

6.5. Etiquetas avanzadas para tablas: <tbody> <thead> y <tfoot>

Una vez hemos visto las etiquetas más usuales para tablas vamos a ver otras etiquetas que se utilizan cuando tenemos tablas complejas a las que queremos dar formatos más elaborados. Las etiquetas <tbody>, <thead> y <tfoot>.

Normalmente estas tres etiquetas se utilizan juntas para diferenciar el cuerpo de la tabla, la cabecera y el pie.

Cada una de estas tres etiquetas puede contener una o varias filas de la tabla y se colocan además de las etiquetas <tr> correspondientes no en su lugar, por ejemplo, el siguiente código muestra una fila dentro de una etiqueta <tfoot>:

<tfoot>
  <tr>
    <td>Total</td>
    <td>1082</td>
    <td>824</td>
    <td>955</td>
    <td>970</td>
    <td>930</td>
    <td>512</td>
 </tr>
</tfoot>

Estas etiquetas no tienen ningún formato definido por defecto, por lo cual, debemos crearlo nosotros con hojas de estilo.

Puede haber una o varias etiquetas tbody en una tabla, pero sólo una thead y una tfoot. Si una tabla tiene thead o tfoot, debe tener al menos un tbody.

En el siguiente ejemplo hemos creado esta tabla:

<table>
<thead>
  <tr>
    <td rowspan="3"></td>
    <td colspan="6"> Ventas coches </td>
  </tr>
  <tr>
    <td colspan="2">1 trimestre</td>
    <td colspan="2">2 trimestre</td>
    <td colspan="2">3 trimestre</td>
  </tr>
  <tr>
    <td>Nacionales</td>
    <td>Importados</td>
    <td>Nacionales</td>
    <td>Importados</td>
    <td>Nacionales</td>
    <td>Importados</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Año 2014</td>
    <td >341</td>
    <td>561</td>
    <td>234</td>
    <td>129</td>
    <td>340</td>
    <td>261</td>
  </tr>
  <tr>
    <td>Año 2015</td>
    <td >341</td>
    <td>561</td>
    <td>234</td>
    <td>129</td>
    <td>340</td>
    <td>261</td>
  </tr>
  <tr>
    <td>Año 2016</td>
    <td >341</td>
    <td>561</td>
    <td>234</td>
    <td>129</td>
    <td>340</td>
    <td>261</td>
  </tr>
  <tr>
    <td>Año 2017</td>
    <td>741</td>
    <td>263</td>
    <td>721</td>
    <td>841</td>
    <td>590</td>
    <td>251</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>Total</td>
    <td>1082</td>
    <td>824</td>
    <td>955</td>
    <td>970</td>
    <td>930</td>
    <td>512</td>
  </tr>
</tfoot>
</table>

Y le hemos asignado los siguientes formatos mediante esta hoja de estilo:

table  {

    padding: 20px;

    border: 1px solid black;

    border-collapse: collapse;

    text-align: center;

    margin-left: 20px

    }

     td {

    border: 1px solid black;

    border-collapse: collapse;

    text-align: center;

    padding: 3px;

    }

 thead {

    font-weight: bold;

    }

     tbody tr {

    background-color: #fadddd;

    }

  tfoot {

    background-color:#f4fdcb;

    }

Y el resultado es el siguiente:

 Cursos Informática Gratuitos