Tablas

Las tablas HTML se usan para mostrar datos tabulares con filas y columnas. La decisión de usar un <table> debe basarse en el contenido que presentas y en las necesidades de tus usuarios en relación con ese contenido. Si se presentan, comparan, ordenan, calculan o hacen referencias cruzadas a los datos, es probable que <table> sea la opción correcta. Si solo deseas diseñar contenido no tabular de forma ordenada, como un gran grupo de imágenes en miniatura, las tablas no son adecuadas. En su lugar, crea una lista de imágenes y aplica diseño a la cuadrícula con CSS.

En esta sección, analizaremos todos los elementos que conforman la tabla, junto con algunas funciones de accesibilidad y usabilidad que debes tener en cuenta cuando presentes datos tabulares. Si bien el curso Aprender HTML no se enfoca principalmente en CSS, y hay un curso completo dedicado a aprender CSS, hablaremos de algunas propiedades CSS específicas de las tablas.

Elementos de la tabla, en orden

La etiqueta <table> une el contenido de la tabla, incluidos todos los elementos. El rol ARIA implícito de un <table> es table. Las tecnologías de accesibilidad saben que este elemento es una estructura de tabla que contiene datos organizados en filas y columnas. Si la tabla mantiene un estado de selección, tiene navegación bidimensional o permite que el usuario reorganice el orden de las celdas, establece role="grid". Si las filas de grid se pueden expandir y contraer, usa role="treegrid" en su lugar.

Dentro de <table>, encontrarás los encabezados de la tabla (<thead>), los cuerpos de la tabla (<tbody>) y, de manera opcional, los pies de página de la tabla (<tfoot>). Cada uno de ellos se compone de filas de la tabla (<tr>). Las filas contienen celdas de encabezado de la tabla (<th>) y datos de la tabla (<td>) que, a su vez, contienen todos los datos. En el DOM, antes de todo esto, es posible que encuentres dos funciones adicionales: el título de la tabla (<caption>) y los grupos de columnas (<colgroup>). Según si <colgroup> tiene o no un atributo span, puede contener elementos de columna de tabla anidada (<col>).

Los elementos secundarios de la tabla son, en orden:

1. Elemento <caption>
2. Elementos <colgroup>
3. Elementos <thead>
4. Elementos <tbody>
5. Elementos <tfoot>

Abordaremos los elementos secundarios de <table>, que son opcionales, pero recomendados, y, luego, analizaremos las filas, las celdas de encabezado de la tabla y las celdas de datos de la tabla. La <colgroup> se abordará al final.

Leyenda de la tabla

Como elemento semántico nativo, <caption> es el método preferido para asignar un nombre a una tabla. El <caption> proporciona un título de tabla descriptivo asociado de forma programática. Es visible y está disponible para todos los usuarios de forma predeterminada.

El elemento <caption> debe ser el primer elemento anidado en el elemento <table>. Si lo incluyes, todos los usuarios conocerán el propósito de la tabla de inmediato sin tener que leer el texto que la rodea. Como alternativa, puedes usar aria-label o aria-labelledby en <table> para proporcionar un nombre accesible como el subtítulo. El elemento <caption> no tiene atributos específicos del elemento.

La leyenda aparece fuera de la tabla. La ubicación del subtítulo se puede establecer con la propiedad CSS caption-side, que es una práctica más recomendada que usar el atributo align obsoleto. Esto puede establecer la leyenda en la parte superior e inferior. El posicionamiento de los lados izquierdo y derecho, con inline-start y inline-end, aún no se admite por completo. La parte superior es la presentación predeterminada del navegador.

De preferencia, las tablas de datos deben tener encabezados y una leyenda claros, y ser lo suficientemente simples como para que se expliquen por sí mismas. Ten en cuenta que no todos los usuarios tienen las mismas habilidades cognitivas. Cuando la tabla “haga una afirmación” o necesite interpretación, proporciona un breve resumen de su punto principal o función. La ubicación de ese resumen depende de su longitud y complejidad. Si es breve, úsalo como texto interno de la leyenda. Si es más largo, haz un resumen en la leyenda y proporciona el resumen en el párrafo que precede a la tabla, y asocia ambos con el atributo aria-describedby. Otra opción es colocar la tabla en un <figure> y el resumen en el <figcaption>.

División de datos

El contenido de las tablas se compone de hasta tres secciones: cero o más encabezados de tabla (<thead>), cuerpos de tabla (<tbody>) y pie de página (<tfoot>). Todos son opcionales, y se admite cero o más de cada uno.

Estos elementos no ayudan ni dificultan la accesibilidad de la tabla, pero son útiles en términos de usabilidad. Proporcionan ganchos de diseño. Por ejemplo, el contenido del encabezado se puede fijar, mientras que el contenido de <tbody> se puede desplazar. Las filas que no están anidadas en uno de estos tres elementos de contención se unen de forma implícita en un <tbody>. Los tres comparten el mismo rol implícito rowgroup. Ninguno de estos tres elementos tiene atributos específicos.

Esto es lo que tenemos hasta ahora:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

Originalmente, el elemento <tfoot> se especificaba para que apareciera justo después de <thead> y antes de <tbody> por motivos de accesibilidad, por lo que es posible que te encuentres con este orden de fuente no intuitivo en bases de código heredadas.

Contenido de la tabla

Las tablas se pueden dividir en encabezados, cuerpos y pies de página, pero ninguno de estos elementos hace nada si las tablas no contienen filas, celdas ni contenido. Cada fila de la tabla, <tr>, contiene una o más celdas. Si una celda es una celda de encabezado, usa <th>. De lo contrario, usa <td>.

Por lo general, las hojas de estilo del usuario-agente muestran el contenido de una celda de encabezado de tabla <th> centrado y en negrita. Estos estilos predeterminados, así como todos los demás, se controlan mejor con CSS en lugar de los atributos obsoletos que solían estar disponibles en celdas, filas y hasta <table> individuales.

Había atributos para agregar padding entre celdas y dentro de ellas, para bordes y para alineación de texto. Cellpadding y cellspacing, que definen el espacio entre el contenido de una celda y su borde, y entre los bordes de celdas adyacentes, se deben establecer con las propiedades border-collapse y border-spacing de CSS, respectivamente. Border-spacing no tendrá efecto si se establece border-collapse: collapse. Si se establece border-collapse: separate;, es posible ocultar las celdas vacías por completo con empty-cells: hide;. Para obtener más información sobre cómo aplicar diseño a tablas, consulta esta presentación interactiva de diapositivas sobre estilos de CSS relacionados con tablas.

En los ejemplos, agregamos un borde a la tabla y a cada celda individual con CSS para que algunas características sean más evidentes:

En este ejemplo, tenemos un título, un encabezado de tabla y un cuerpo de tabla. El encabezado tiene una fila que contiene tres celdas <th> de encabezado, por lo que se crean tres columnas. El cuerpo contiene tres filas de datos: la primera celda es una celda de encabezado para la fila, por lo que usamos <th> en lugar de <td>.

La celda <th> tiene significado semántico, con roles de ARIA implícitos de columnheader o rowheader. Define la celda como el encabezado de la columna o fila de celdas de tabla, según el valor del atributo scope enumerado. El navegador usará col o row de forma predeterminada si no se establece scope de forma explícita. Debido a que usamos el lenguaje de marcado semántico, la celda 1956 tiene dos encabezados: Año y Lou Minious. Esta asociación nos indica que “1956” es el “año” de graduación de “Lou Minious”. En este ejemplo, como podemos ver toda la tabla, la asociación es visualmente evidente. El uso de <th> proporciona la asociación incluso cuando la columna o fila del encabezado se salió de la vista. Podríamos haber configurado <th scope="col">Year</th> y <th scope="row">Lou Minious</th> de forma explícita, pero con una tabla simple como esta, funcionan los valores predeterminados enumerados. Otros valores para scope incluyen rowgroup y colgroup, que son útiles con tablas complejas.

Combinar celdas

Al igual que en MS Excel, Hojas de cálculo de Google y Numbers, es posible unir varias celdas en una sola. Esto se hace con HTML. El atributo colspan se usa para combinar dos o más celdas adyacentes en una sola fila. El atributo rowspan se usa para combinar celdas en filas y se coloca en la celda de la fila superior.

En este ejemplo, el encabezado de la tabla contiene dos filas. La primera fila de encabezado contiene tres celdas que abarcan cuatro columnas: la celda del medio tiene colspan="2". Esta función combina dos celdas adyacentes. Las primeras y últimas celdas incluyen rowspan="2". Esto combina la celda con la celda de la fila adyacente, inmediatamente debajo de ella.

La segunda fila del encabezado de la tabla contiene dos celdas: las de la segunda y tercera columna de la segunda fila. No se declara ninguna celda para la primera o la última columna, ya que la celda de la primera y la última columna de la primera fila abarca dos filas.

En los casos en que una celda se define por varias celdas de encabezado con asociaciones que no se pueden establecer solo con los atributos scope, incluye el atributo headers con una lista separada por espacios de los encabezados asociados. Como este ejemplo es una tabla más compleja, definimos de forma explícita el alcance de los encabezados con el atributo scope. Para que sea aún más claro, agregamos el atributo headers a cada celda.

Es posible que los atributos headers no fueran necesarios en un caso de uso tan simple, pero es importante tenerlos en tu caja de herramientas a medida que tus tablas aumentan de complejidad. Las tablas con estructuras complejas, como las que tienen encabezados o celdas combinados o con más de dos niveles de encabezados de filas o columnas, requieren la identificación explícita de las celdas de encabezado asociadas. En estas tablas complejas, asocia de forma explícita cada celda de datos con cada celda de encabezado correspondiente con una lista de valores id separados por espacios de todos los encabezados asociados como el valor del atributo headers.

El atributo headers se encuentra con mayor frecuencia en los elementos <td>, pero también es válido en <th>.

Dicho esto, las estructuras de tablas complejas pueden ser difíciles de entender para todos los usuarios, no solo para los usuarios de lectores de pantalla. Desde el punto de vista cognitivo y en términos de compatibilidad con lectores de pantalla, las tablas más simples, con pocas celdas o sin ellas, incluso sin agregar alcance ni encabezados, se comprenden con mayor facilidad. Además, son más fáciles de administrar.

Cómo aplicarles estilos a las tablas

Hay dos elementos relativamente poco conocidos que se mencionaron brevemente: el grupo de columnas, el elemento <colgroup> y su único descendiente, el elemento de columna <col> vacío. El elemento <colgroup> se usa para definir grupos de columnas, o elementos <col>, dentro de una tabla.

Si se usa, el agrupamiento de columnas debe anidarse en <table>, inmediatamente después de <caption> y antes de cualquier dato de la tabla. Si abarcan más de una columna, usa el atributo span.

El orden del esquema de contenido de una tabla suele ser el siguiente, en el que <table> y <caption> son los dos elementos que se deben incluir:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

Ni <colgroup> ni <col> tienen un significado semántico en términos de ayudar a que la tabla sea más accesible, pero permiten un diseño de columna limitado, incluido el establecimiento de un ancho para la columna con CSS.

Los estilos <col> aplicarán un diseño a una columna, siempre y cuando no haya estilos <td> ni <th> que anulen ese diseño. Por ejemplo, cuando se usa <colspan> para combinar celdas en algunas filas de una tabla, pero no en todas, no puedes estar seguro de que un selector como tr > *:nth-child(8), que selecciona el 8º elemento secundario de cada fila, destacará la 8ª columna por completo o destacará la 8ª columna de varias filas, pero con algunas celdas de la 9ª y 10ª columna, según las celdas de fila o columna que se hayan combinado.

Lamentablemente, solo se admiten algunas propiedades, los estilos no se heredan en las celdas y la única forma de usar el elemento <col> en la segmentación de celdas es con un selector complejo que incluye el selector relacional :has().

Si <table> y <colgroup> tienen un color de fondo, el background-color de <colgroup> estará en la parte superior. El orden de dibujo es el siguiente: tabla, grupos de columnas, columnas, grupos de filas, filas, con las celdas en último lugar y en la parte superior, como se muestra en el esquema de capas de tablas. Los elementos <td> y <th> no son descendientes de los elementos <colgroup> ni <col>, y no heredan su diseño.

Para crear una tabla con franjas, los selectores estructurales de CSS son muy útiles. Por ejemplo, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} agregará un negro translúcido a cada fila impar en el cuerpo de la tabla, lo que permitirá que se muestren los efectos de fondo que se establezcan en <colgroup>.

Las tablas no son responsivas de forma predeterminada. En cambio, su tamaño se ajusta según el contenido de forma predeterminada. Se necesitan medidas adicionales para que el diseño de la tabla funcione de manera eficaz en una variedad de dispositivos. Si cambias la propiedad de visualización de CSS para los elementos de tabla, incluye los atributos ARIA role. Si bien puede sonar redundante, la propiedad display de CSS puede afectar el árbol de accesibilidad en algunos navegadores.

Presentación de datos

Los elementos de tabla tienen significados semánticos que usan las tecnologías de accesibilidad para permitir la navegación por las filas y columnas sin “perderse”. No se debe usar el elemento <table> para la presentación. Si necesitas un encabezado sobre una lista, usa un encabezado y una lista. Si deseas diseñar contenido en muchas columnas, usa el diseño de varias columnas. Si deseas diseñar contenido en una cuadrícula, usa la cuadrícula de CSS. Usa solo una tabla para los datos. Piénsalo de esta manera: si tus datos requieren una hoja de cálculo para presentarlos en una reunión, usa <table>. Si deseas usar las funciones disponibles en software de presentaciones como Keynote o PowerPoint, es probable que necesites una lista de descripción.

Si no presentas datos tabulares, no uses un <table>. Si usas una tabla para la presentación, establece role="none".

Muchos desarrolladores usan tablas para diseñar formularios, pero no es necesario. Sin embargo, debes conocer los formularios HTML, por lo que hablaremos de ellos a continuación.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre las tablas.