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

Enero-2019 (V 2.0)
Pág. 6.5
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.