Etiquetas HTML para Tablas: Guía Completa con Ejemplos

Tablas en HTML

Las tablas se utilizan con frecuencia en las páginas web, a menudo porque son la herramienta más efectiva para organizar elementos y asegurar su correcta disposición. Para definir una tabla en HTML, se utilizan las siguientes etiquetas:

Etiquetas básicas

• <table> y </table>: Estas etiquetas encierran la tabla completa.
• <tr> y </tr>: Estas etiquetas definen una fila dentro de la tabla. Se utiliza <th> y </th> para filas de encabezado.
• <td> y </td>: Estas etiquetas definen una celda dentro de una fila.

La construcción de una tabla implica declarar una fila y luego las celdas que la componen, seguido de la siguiente fila y sus celdas, y así sucesivamente. No es obligatorio que todas las filas tengan el mismo número de celdas.

Atributos de la etiqueta <table>

Todos los atributos son opcionales:

• border="4": Define el grosor del borde de la tabla en píxeles. En este caso, 4 píxeles. Si no se especifica, la tabla no tendrá borde.
• width="5" o width="50%": Establece el ancho de la tabla. Puede definirse en píxeles (5 píxeles) o como un porcentaje del ancho disponible (50%).
• cellspacing="2": Define el espacio entre las celdas en píxeles. El valor predeterminado es 2.
• cellpadding="5": Define el espacio entre el contenido de las celdas y su borde en píxeles. El valor predeterminado es 1.
• align="left", align="right", align="center": Alinea la tabla a la izquierda, derecha o al centro, respectivamente.

Atributos de las etiquetas de fila y celda

Las etiquetas de fila (<tr>) y celda (<td> y <th>) admiten los siguientes atributos:

• width="30": Define el ancho de la fila o celda. También puede especificarse en porcentaje.
• align="left", align="right", align="center": Alinea el contenido a la izquierda, derecha o al centro, respectivamente.
• valign="top", valign="middle", valign="bottom": Alinea el contenido verticalmente arriba, en medio o abajo, respectivamente.
• bgcolor="#AACCEE": Define el color de fondo de la celda o fila.
• colspan="3": Especifica el número de columnas que ocupa la celda.
• rowspan="2": Especifica el número de filas que ocupa la celda.

Ejemplo de tabla

Observa el siguiente ejemplo que utiliza la etiqueta <th> en lugar de <tr> para el título. El contenido de <th> se resalta en negrita, por lo que se utiliza comúnmente para encabezados.

<table border="3" cellspacing="5" width="200">
  <th colspan="2" bgcolor="#6D8FFF">Este es el título</th>
  <tr align="center">
    <td>Esta es la celda de la 1ª fila y de la 1ª columna</td>
    <td>Esta es de la 1ª fila y de la 2ª columna</td>
  </tr>
  <tr bgcolor="#6D8FFF">
    <td>Esto está con un fondo azul</td>
    <td align="right" valign="bottom">Y esto también</td>
  </tr>
</table>