HTML - Tablas

Estructura Básica de una Tabla

La estructura de una tabla HTML tiene varios elementos que trabajan juntos para crear una representación estructurada de datos. En el centro de cada tabla está el elemento <table>, que define la tabla en sí. Dentro del elemento <table>, encontrarás uno o más elementos <tr>, cada uno representando una fila de la tabla.

Dentro de cada elemento <tr>, puedes añadir dos tipos de celdas: celdas de encabezado de tabla y celdas de datos de tabla. Las celdas de encabezado de tabla se definen usando el elemento <th> y se usan para representar los encabezados de columnas o filas de la tabla. Estas celdas se estilizan automáticamente con texto en negrita y alineación centrada por defecto, haciéndolas visualmente distintas de las celdas de datos de la tabla.

Las celdas de datos de tabla se definen usando el elemento <td> y se usan para contener los datos reales dentro de la tabla. Cada elemento <td> representa una celda individual dentro de una fila, y puedes tener múltiples elementos <td> dentro de un solo elemento <tr> para crear múltiples columnas.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

En este ejemplo, el elemento <table> envuelve toda la estructura de la tabla. Dentro de él, hay tres elementos <tr>, cada uno representando una fila de la tabla. El primer elemento <tr> contiene dos elementos <th>, definiendo los encabezados de la tabla. Los siguientes elementos <tr> contienen elementos <td>, que contienen los datos reales para cada celda en la tabla.

Usando esta estructura básica, puedes crear tablas de varios tamaños y configuraciones para presentar tus datos de manera clara y organizada.

Bordes de tabla

En las tablas HTML, puedes agregar bordes a la tabla y sus celdas usando el atributo border. El atributo border establece el ancho del borde alrededor de la tabla y sus celdas. Por ejemplo, establecer border="1" en el elemento <table> agregará un borde de 1 píxel alrededor de la tabla y cada celda.

<table border="1">
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

Aunque el atributo border agrega bordes a una tabla, tiene un control limitado sobre el estilo del borde. Para mayor flexibilidad, puedes usar CSS para estilizar los bordes de la tabla.

Con CSS, puedes usar la propiedad border para establecer el ancho, estilo y color del borde para la tabla y sus celdas. Aquí tienes un ejemplo:

<table style="border: 2px solid #000;">
  <tr>
    <th style="border: 1px solid #000;">Encabezado 1</th>
    <th style="border: 1px solid #000;">Encabezado 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Dato 1</td>
    <td style="border: 1px solid #000;">Dato 2</td>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Dato 3</td>
    <td style="border: 1px solid #000;">Dato 4</td>
  </tr>
</table>

La propiedad border en el atributo style establece el borde para el elemento <table> como un borde negro sólido de 2 píxeles. Cada elemento <th> y <td> tiene un borde negro sólido de 1 píxel aplicado usando la propiedad border.

El uso de CSS te da más control sobre la apariencia de los bordes de la tabla, permitiéndote establecer diferentes estilos, colores y anchos de borde para diferentes partes de la tabla. También puedes dirigirte a celdas o filas específicas usando clases o IDs de CSS para un control de estilo más preciso.

Encabezados de tabla

Los encabezados de tabla dan contexto y describen los datos en cada columna o fila. Para definir una celda de encabezado en una tabla, se usa el elemento <th> en lugar del elemento <td>.

El texto dentro de los elementos <th> se muestra en negrita y centrado, lo que lo hace visualmente distinto de las celdas de datos regulares de la tabla. Este estilo ayuda a los usuarios a identificar rápidamente los encabezados y entender la estructura de la tabla.

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>Ciudad</th>
  </tr>
  <tr>
    <td>Juan</td>
    <td>25</td>
    <td>Nueva York</td>
  </tr>
  <tr>
    <td>Alicia</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

La primera fila de la tabla contiene tres elementos <th> que representan los encabezados para las columnas "Nombre", "Edad" y "Ciudad". Las filas siguientes usan elementos <td> para mostrar los datos reales.

Para establecer una asociación clara entre las celdas de encabezado y las celdas de datos correspondientes, puedes usar el atributo scope. El atributo scope especifica si una celda de encabezado está asociada con una fila o una columna.

<table>
  <tr>
    <th scope="col">Nombre</th>
    <th scope="col">Edad</th>
    <th scope="col">Ciudad</th>
  </tr>
  <tr>
    <td>Juan</td>
    <td>25</td>
    <td>Nueva York</td>
  </tr>
  <tr>
    <td>Alicia</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

El atributo scope se establece como col para cada elemento <th>, indicando que cada celda de encabezado está asociada con una columna. Esto ayuda a los lectores de pantalla y otras tecnologías de asistencia a entender la relación entre los encabezados y las celdas de datos.

También puedes usar el atributo scope con el valor row para celdas de encabezado que están asociadas con una fila específica, como en el caso de una tabla con encabezados de fila.

Al usar elementos <th> y el atributo scope de manera apropiada, puedes crear tablas bien estructuradas y accesibles que sean fáciles de entender tanto para usuarios visuales como para aquellos que usan tecnologías de asistencia.

Título de la tabla

El elemento <caption> en HTML define un título o encabezado para una tabla. Proporciona una breve descripción o resumen del contenido de la tabla, ayudando a los usuarios a entender el propósito o contexto de los datos presentados en ella.

Por defecto, el título aparece encima de la tabla, centrado horizontalmente. El texto dentro del elemento <caption> se muestra como texto sin formato sin ningún estilo adicional.

<table>
  <caption>Información de empleados</caption>
  <tr>
    <th>Nombre</th>
    <th>Departamento</th>
    <th>Salario</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Marketing</td>
    <td>$50,000</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Ventas</td>
    <td>$60,000</td>
  </tr>
</table>

El elemento <caption> se coloca inmediatamente después de la etiqueta de apertura <table> y contiene el texto "Información de empleados". Este título proporciona un encabezado claro para la tabla, indicando que contiene información sobre los empleados.

Aunque el estilo predeterminado del elemento <caption> es suficiente en la mayoría de los casos, puedes usar CSS para estilizar y posicionar aún más el título según tus necesidades.

table caption {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}

En este código CSS, la propiedad font-size establece el tamaño del texto del título a 1.2 veces el tamaño predeterminado. La propiedad font-weight hace que el texto sea negrita para que destaque. La propiedad margin-bottom añade un espacio entre el título y la tabla. Finalmente, la propiedad text-align alinea el título a la izquierda en lugar de la alineación central predeterminada.

También puedes usar CSS para posicionar el título debajo de la tabla o aplicar otros estilos como colores, colores de fondo y relleno para que coincida con tus preferencias de diseño.

El uso del elemento <caption> y su estilización con CSS te permite proporcionar un título claro y descriptivo para tus tablas, haciéndolas más accesibles y fáciles de usar.

Relleno y espaciado de celdas en tablas

En las tablas HTML, puedes controlar el espaciado dentro y entre las celdas usando los atributos cellpadding y cellspacing. Estos atributos te permiten ajustar el espaciado visual de tu tabla para hacerla más legible.

El atributo cellpadding establece la cantidad de espacio entre el contenido de la celda y los bordes de la celda. Define el relleno interno dentro de cada celda. Por defecto, el contenido de la celda se muestra cerca de los bordes de la celda, pero puedes aumentar el relleno para agregar algo de espacio.

<table cellpadding="10">
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

El atributo cellpadding se establece en 10, lo que agrega 10 píxeles de relleno dentro de cada celda. Esto crea un espacio visible entre el contenido de la celda y los bordes de la celda, haciendo que el contenido sea más legible.

El atributo cellspacing establece la cantidad de espacio entre las celdas de la tabla. Define el espaciado o separación entre celdas adyacentes en la tabla. Por defecto, no hay espaciado entre celdas, pero puedes usar cellspacing para agregar algo de separación.

<table cellspacing="5">
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

El atributo cellspacing se establece en 5, lo que agrega un espacio de 5 píxeles entre las celdas. Esto crea una separación visual entre las celdas, facilitando la distinción entre una celda y otra.

Aunque los atributos cellpadding y cellspacing proporcionan una forma rápida de controlar el relleno y el espaciado de las celdas, tienen algunas limitaciones. Para un mayor control y flexibilidad, puedes usar propiedades CSS como padding y border-spacing.

Con CSS, puedes apuntar a celdas específicas, filas o toda la tabla para aplicar estilos de relleno y espaciado.

<style>
  table {
    border-collapse: separate;
    border-spacing: 5px;
  }
  td, th {
    padding: 10px;
  }
</style>

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

La propiedad border-collapse se establece en separate para permitir el uso de border-spacing. La propiedad border-spacing se usa luego para establecer un espaciado de 5 píxeles entre las celdas. La propiedad padding se aplica tanto a los elementos <td> como <th> para agregar 10 píxeles de relleno dentro de cada celda.

El uso de CSS te da más control sobre la apariencia de tu tabla, permitiéndote establecer diferentes valores de relleno y espaciado para diferentes partes de la tabla, e incluso aplicar diferentes estilos basados en clases o IDs específicos.

Al usar los atributos cellpadding y cellspacing o propiedades CSS como padding y border-spacing, puedes ajustar el espaciado dentro y entre las celdas de la tabla para crear tablas visualmente atractivas y legibles.

Colspan y Rowspan

En las tablas HTML, puedes usar los atributos colspan y rowspan para crear diseños de tabla complejos mediante la fusión de celdas a través de columnas o filas. Estos atributos te permiten crear celdas que abarcan varias columnas o filas.

El atributo colspan se usa para hacer que una celda abarque varias columnas. Se aplica a un elemento <th> o <td> y especifica el número de columnas que la celda debe abarcar. Establecer colspan="2" en una celda hará que abarque dos columnas, fusionando las dos celdas en una.

<table>
  <tr>
    <th colspan="2">Encabezado Fusionado</th>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td colspan="2">Celda Fusionada</td>
  </tr>
</table>

El atributo rowspan se usa para hacer que una celda abarque varias filas. Se aplica a un elemento <th> o <td> y especifica el número de filas que la celda debe abarcar. Establecer rowspan="3" en una celda hará que abarque tres filas, fusionando las celdas verticalmente.

<table>
  <tr>
    <th rowspan="2">Encabezado Fusionado</th>
    <td>Celda 1</td>
  </tr>
  <tr>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
    <td>Celda 4</td>
  </tr>
</table>

Al usar colspan y rowspan juntos, puedes crear diseños de tabla complejos con celdas fusionadas que abarcan tanto columnas como filas.

<table>
  <tr>
    <th colspan="2" rowspan="2">Encabezado Fusionado</th>
    <th>Encabezado 1</th>
  </tr>
  <tr>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
  </tr>
</table>

El uso de los atributos colspan y rowspan te permite crear tablas con celdas fusionadas, lo que te permite presentar datos de manera organizada y atractiva. Estos atributos son útiles cuando tienes datos que necesitan ser agrupados o cuando quieres enfatizar celdas o encabezados en tu tabla.

Estilización de tablas con CSS

CSS ofrece opciones de estilización para cambiar el aspecto de las tablas HTML. Con CSS, puedes modificar varias partes de tus tablas, como los colores de fondo, colores de texto, fuentes, bordes y más, para que se ajusten al diseño de tu sitio web y mejoren la legibilidad.

Una técnica de estilización es aplicar colores de fondo a la tabla, filas o celdas. Puedes usar la propiedad background-color para establecer un color sólido o un degradado como fondo.

<style>
  table {
    background-color: #f2f2f2;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #e6e6e6;
  }
</style>

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

En este ejemplo, la propiedad background-color se aplica al elemento <table> para establecer un fondo gris claro para la tabla. Los elementos <th> tienen un color de fondo verde y un color de texto blanco para que los encabezados destaquen. El selector tr:nth-child(even) se dirige a cada fila par y aplica un color de fondo diferente para crear un efecto de rayas de cebra, mejorando la legibilidad.

También puedes cambiar los estilos de texto dentro de las celdas de la tabla. Usa propiedades como color, font-family, font-size y text-align para cambiar el color del texto, la fuente, el tamaño y la alineación.

<style>
  table {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  td {
    color: #333;
    text-align: center;
  }
  th {
    font-weight: bold;
    text-transform: uppercase;
  }
</style>

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

En este ejemplo, las propiedades font-family y font-size se aplican al elemento <table> para establecer una fuente y un tamaño para la tabla. Los elementos <td> tienen un color de texto gris oscuro y están alineados al centro usando la propiedad text-align. Los elementos <th> se estilizan con peso de fuente en negrita y texto en mayúsculas usando las propiedades font-weight y text-transform.

Para aplicar estilos a partes de la tabla, puedes usar clases o IDs de CSS. Al asignar una clase o ID a una tabla, fila o celda, puedes dirigirte a ellas con selectores CSS y aplicar estilos.

<style>
  .resaltar {
    background-color: yellow;
    font-weight: bold;
  }
  .texto-derecha {
    text-align: right;
  }
</style>

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td class="resaltar">Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td class="texto-derecha">Dato 4</td>
  </tr>
</table>

En este ejemplo, la clase .resaltar se aplica a una celda, dándole un color de fondo amarillo y un peso de fuente en negrita. La clase .texto-derecha se usa para alinear el texto a la derecha dentro de una celda.

Al usar el poder de CSS, puedes crear tablas atractivas y bien estructuradas que mejoren el aspecto de tus datos. Prueba diferentes estilos, colores y diseños para encontrar el mejor diseño que se adapte a tus necesidades y coincida con el aspecto de tu sitio web.

Consideraciones de accesibilidad

Al crear tablas en HTML, es importante tener en cuenta la accesibilidad. Esto hace que tus tablas sean comprendidas y navegadas por todos los usuarios, incluidos aquellos que utilizan tecnologías de asistencia como lectores de pantalla.

Una práctica clave de accesibilidad es usar el elemento <th> para las celdas de encabezado en lugar del elemento <td>. El elemento <th> proporciona un significado semántico, indicando que la celda contiene información de encabezado. Los lectores de pantalla y otras tecnologías de asistencia pueden usar esta información para ayudar a los usuarios a comprender la estructura y el contexto de la tabla.

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>Ciudad</th>
  </tr>
  <tr>
    <td>Juan</td>
    <td>25</td>
    <td>Nueva York</td>
  </tr>
  <tr>
    <td>Alicia</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

Para mejorar aún más la accesibilidad, debes asociar las celdas de encabezado con sus correspondientes celdas de datos. Esto se puede hacer usando los atributos scope o headers.

El atributo scope especifica si una celda de encabezado está asociada con una fila o una columna. Se puede establecer como "row" para encabezados de fila o "col" para encabezados de columna.

<table>
  <tr>
    <th scope="col">Nombre</th>
    <th scope="col">Edad</th>
    <th scope="col">Ciudad</th>
  </tr>
  <tr>
    <td>Juan</td>
    <td>25</td>
    <td>Nueva York</td>
  </tr>
  <tr>
    <td>Alicia</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

Alternativamente, puedes usar el atributo headers en las celdas de datos para asociarlas explícitamente con una o más celdas de encabezado. El valor del atributo headers debe ser el id de la celda de encabezado correspondiente.

<table>
  <tr>
    <th id="nombre">Nombre</th>
    <th id="edad">Edad</th>
    <th id="ciudad">Ciudad</th>
  </tr>
  <tr>
    <td headers="nombre">Juan</td>
    <td headers="edad">25</td>
    <td headers="ciudad">Nueva York</td>
  </tr>
  <tr>
    <td headers="nombre">Alicia</td>
    <td headers="edad">30</td>
    <td headers="ciudad">Londres</td>
  </tr>
</table>

Otra consideración de accesibilidad es proporcionar un título descriptivo para la tabla usando el elemento <caption>. El título debe resumir el propósito o contenido de la tabla, ayudando a los usuarios a comprender su contexto.

<table>
  <caption>Información de empleados</caption>
  <tr>
    <th>Nombre</th>
    <th>Departamento</th>
    <th>Salario</th>
  </tr>
  <tr>
    <td>Juan Pérez</td>
    <td>Marketing</td>
    <td>50.000€</td>
  </tr>
  <tr>
    <td>Ana García</td>
    <td>Ventas</td>
    <td>60.000€</td>
  </tr>
</table>

Por último, es importante evitar el uso de tablas para fines de diseño. Las tablas deben usarse para datos tabulares, no para organizar el contenido en una página. Para el diseño, usa técnicas de CSS como flexbox o grid en su lugar. Esto ayuda a mantener una clara separación entre contenido y presentación, haciendo que tus páginas web sean más accesibles y fáciles de mantener.