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:

	Ventas coches
	1 trimestre		2 trimestre		3 trimestre
	Nacionales	Importados	Nacionales	Importados	Nacionales	Importados
Año 2014	341	561	234	129	340	261
Año 2015	341	561	234	129	340	261
Año 2016	341	561	234	129	340	261
Año 2017	741	263	721	841	590	251
Total	1082	824	955	970	930	512