Tablas

<< Etiquetas multimedia Agrupación de etiquetas >>

Las tablas se definen en HTML con la etiqueta <table>. Una tabla está dividida en filas con la etiqueta <tr> y una fila se compone de celdas de datos, mediante la etiqueta <td>, aunque también se puede dividir en celdas de cabecera con la etiqueta <th>.

Los elementos <td> son los contenedores de los datos en la tabla y pueden contener todo tipo de elementos HTML como texto, imágenes, listas, otras tablas, etc.

<table>
     <tr>
          <th>Nombre</th>
          <th>Apellidos</th>
          <th>Correo</th>
     </tr>
     <tr>
          <td>Rosa</td>
          <td>Medina</td>
          <td>XXXX@gmail.com</td>
     </tr>
     <tr>
          <td>Carlos</td>
          <td>Bernal</td>
          <td>YYYY@gmail.com</td>
     </tr> 
</table>

Nota: Con solo el código anterior sólo conseguimos la estructura de la tabla, si queremos que nuestra tabla tenga el mismo aspecto que en la imagen tenemos que aplicar estilos CSS.

Los algunos de los atributos que pueden aparecer en la etiqueta <table> son:

summary: es parecido al atributo alt de las imágenes. Proporciona una descripción de la tabla para navegadores en modo texto, o invidentes.
border: el valor es numérico y establece el grosor del borde de la tabla (0 para quitarlo)
cellpadding: espacio que debe quedar entre las propias celdas (entre los bordes)
width: ancho de la tabla (suele usarse con CSS)
Otros atributos como align, para alinear la tabla o bgcolor para establecer el color de fondo de la tabla están desaconsejados, mejor establecerlos con CSS.

Por otro lado, los atributos que admiten los elementos <td> (aunque es mejor aplicarlos con CSS) son:

align: alinea el texto de la celda en horizontal. Puede tener los valores left, right o center. Mejor usar CSS, actualmente está obsoleto.
valign: alinea el texto de la celda en vertical. Puede tener los valores top, bottom o middle. Mejor usar CSS, actualmente está obsoleto.
rowspan: expande la celda x filas hacia abajo.
colspan: expande la celda x filas a la derecha
width: indica la anchura específica de esa columna, su valor viene dado en px ó %. Mejor usar CSS, actualmente está obsoleto.
height: altura de la celda, en px ó %. Mejor usar CSS, actualmente está obsoleto.
bgcolor: color de fondo de la celda (o de la tabla si se aplica en <table>). Mejor usar CSS, actualmente está obsoleto.

<table border="1">
     <tr>
          <td rowspan="2" valign="middle" align="right" width="50%">Lenguajes de marcas</td>
          <td>Entornos</td>
          <td>Programación</td>
          <td>FOL</td>
     </tr>
     <tr>
          <td>lunes</td>
          <td colspan="2" align="right">martes</td>
     </tr>
     <tr>
          <td colspan="4" align="center">Primera evaluación</td>
     </tr>
</table>

Como podemos observar con el atributo colspan podemos hacer que una celda ocupe el espacio equivalente a 2 o más celdas. El valor será un número con las columnas que queramos que ocupe. Ejemplo:

<table summary="Precio de venta" border="1">
     <tr>
          <td colspan="2">Ventas mayo 2021</td>
     </tr>
     <tr>
          <td>Fruta</td>
          <td>€/Kg</td>
     </tr>
</table>

También podemos hacer que una celda ocupe varias filas (en ese caso también tendremos que poner una celda menos en la fila ocupada) para ello usaremos el atributo rowspan

<table summary="Precio de venta" border="1">
     <tr>
          <td colspan="3">Ventas del 2021</td>
     </tr>
     <tr>
          <td rowspan="2">Mayo</td>
          <td>Manzanas</td>
          <td>280€</td>
     </tr>
     <tr>
          <td>Peras</td>
          <td>385€</td>
     </tr>
</table>

Además de estas etiquetas vistas para tablas, tenemos:

<caption>: Permite asignar una breve descripción a la tabla. Es una etiqueta de <table>
<thead>: Define el encabezado de una tabla
<tbody>: Define el cuerpo de una tabla
<tfoot>: Define el pie de la tabla

<table border="1">
     <caption>Ahorros del 2021</caption>
     <thead>
          <tr>
               <th>Month</th>
               <th>Savings</th>
          </tr>
     </thead>
     <tbody>
          <tr>
               <td>January</td>
               <td>$100</td>
          </tr>
          <tr>
               <td>February</td>
               <td>$80</td>
          </tr>
     </tbody>
     <tfoot>
          <tr>
               <td align="right">Sum</td>
               <td>$180</td>
          </tr>
     </tfoot>
</table>

<< Etiquetas multimedia Agrupación de etiquetas >>