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 la capacidad de tus usuarios necesidades en relación con ese contenido. Si los datos se presentan, comparan, ordenan
calculada o cruzada, es probable que <table> sea la opción correcta. Si solo quieres organizar el contenido
no tabular de forma prolija
como un grupo grande de imágenes en miniatura, no se recomienda usar tablas. En su lugar, crea una lista de imágenes y
diseña la cuadrícula con CSS.
En esta sección, analizaremos todos los elementos que componen la tabla, junto con algunas funciones de accesibilidad y usabilidad. que debes tener en cuenta cuando presentes datos tabulares. Si bien Learn HTML no se trata fundamentalmente de CSS, hay todo un curso dedicado para aprender CSS, abordaremos algunas propiedades de CSS específicas de las tablas.
Elementos de la tabla, en orden
La etiqueta <table> une el contenido de la tabla, incluidos todos sus elementos.
El rol de ARIA implícito de un <table> es table. las tecnologías de asistencia 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.
En <table>, encontrarás los encabezados de la tabla (<thead>), los cuerpos de la tabla (<tbody>) y, de forma opcional, los pies de página de la tabla (<tfoot>).
Cada uno de ellos se compone de filas de tabla (<tr>). Las filas contienen el encabezado de la tabla (<th>) y las celdas de datos de la tabla (<td>) que, a su vez, contienen todos los datos.
En el DOM, antes de esto, puedes encontrar dos funciones adicionales: la leyenda de la tabla (<caption>) y los grupos de columnas (<colgroup>). Según
depende de si <colgroup> tiene o no un atributo span, puede contener elementos de columnas de tabla anidada (<col>).
Los elementos secundarios de la tabla son los siguientes, en orden:
- Elemento
<caption> - Elementos
<colgroup> - Elementos
<thead> - Elementos
<tbody> - Elementos
<tfoot>
Abordaremos los elementos <table> elementos secundarios, que son opcionales, pero recomendados, y, luego, consulte las filas, las celdas de encabezado de la tabla
y celdas de datos de tabla. Analizaremos los <colgroup> al final.
Leyenda de la tabla
Por ser un elemento semántico nativo, <caption> es el preferido
método para asignar un nombre a una tabla. <caption> proporciona un título de tabla descriptivo y asociado programáticamente. Sí
visibles y disponibles para todos los usuarios de forma predeterminada.
El elemento <caption> debe ser el primer elemento anidado en el elemento <table>. De esta forma, todos los usuarios pueden conocer
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 leyenda. El elemento <caption> no tiene atributos específicos del elemento.
La leyenda aparece fuera de la tabla. La ubicación de la leyenda se puede establecer con la propiedad caption-side de CSS, que es una
Una práctica recomendada es usar el atributo obsoleto align. Esto puede establecer los subtítulos en la parte superior e inferior. Izquierda y derecha
posicionamiento lateral, con inline-start y inline-end, aún no son totalmente compatibles. La parte superior es la presentación predeterminada del navegador.
Preferentemente, las tablas de datos deben tener encabezados y subtítulos claros y ser lo suficientemente sencillas como para que se entiendan. Ten en cuenta que
no todos los usuarios tienen las mismas capacidades cognitivas. Cuando la tabla exprese su argumento o necesite interpretación, proporciona una
breve resumen del punto principal o la función de la tabla. La ubicación de ese resumen depende de su longitud y complejidad.
Si es breve, úsalo como texto interno del subtítulo. Si es más larga, resúmelo en la leyenda y proporciona el resumen en el
párrafo que precede a la tabla, asocia ambos con el símbolo aria-describedby
. Otra opción es colocar la tabla en <figure> y el resumen en <figcaption>.
División de datos
El contenido de las tablas se compone de hasta tres secciones: cero o más encabezados de tabla (<thead>) y cuerpos de tabla (<tbody>).
y pies de página de la tabla (<tfoot>). Todas son opcionales, y se admite cero o más de ellas.
Estos elementos no ayudan ni dificultan la accesibilidad de la tabla, pero son útiles en términos de usabilidad. Proporcionan
ganchos de estilo. Por ejemplo, el contenido del encabezado puede volverse fijo,
mientras que el contenido de <tbody> se puede desplazar. Las filas que no se anidan en uno de estos tres elementos contenidos se
unida a una <tbody>. Los tres comparten el mismo rol implícito rowgroup.
Ninguno de estos tres elementos tiene atributos específicos de ellos.
Lo que tenemos hasta ahora:
<table>
<caption>MLW Students</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
Originalmente, se especificó el elemento <tfoot> para que aparezca justo después de <thead> y antes de <tbody> por motivos de accesibilidad.
por lo que puede que te encuentres con este orden de fuente no intuitivo en las bases de código heredadas.
Contenido de la tabla
Las tablas pueden dividirse en encabezados, cuerpos y pies de página, pero ninguno de estos elementos hace nada si las tablas no lo hacen.
contienen filas, celdas y contenido de una tabla. 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 usuario-agente muestran el contenido en una celda de encabezado de tabla <th> centrada y en negrita. Estos estilos predeterminados,
y todos los estilos se controlan mejor con CSS, en lugar de los atributos obsoletos que estaban disponibles en celdas individuales
filas y también el <table>.
Había atributos para agregar padding entre las celdas y dentro de ellas, para los bordes y para la alineación del texto. relleno y ritmo de celdas,
que definen el espacio entre el contenido de una celda y su borde, y entre los bordes de las celdas adyacentes, deben configurarse
con las opciones borde-contraer y border-spacing de CSS
respectivamente. Border-spacing no tendrá efecto si se configura border-collapse: collapse. Si border-collapse: separate;
es posible ocultar por completo las celdas vacías con empty-cells: hide;. Para obtener más información sobre el estilo de tablas,
Presentación de diapositivas interactiva de estilos de CSS relacionados con tablas
En los ejemplos, agregamos un borde en la tabla y cada celda individual con CSS para que algunas características sean más evidentes:
En este ejemplo, tenemos una leyenda, un encabezado de tabla y un cuerpo de tabla. El encabezado tiene una fila que contiene tres celdas <th> de encabezado,
lo que crea tres columnas. El cuerpo contiene tres filas de datos: la primera celda es una celda de encabezado para la fila, por lo que usaremos <th> en lugar de <td>.
La celda <th> tiene un 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 la tabla,
según el valor del atributo scope enumerado. El navegador se establecerá de forma predeterminada en col o row si scope no se configura explícitamente.
Como usamos lenguaje de marcado semántico, la celda 1956 tiene dos encabezados: Año y Lou Minious. Esta asociación nos dice que "1956" es el
"año" de graduación para "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 desplaza fuera de la vista. Podríamos haber establecido explícitamente
<th scope="col">Year</th> y <th scope="row">Lou Minious</th>, pero con una tabla simple como esta, los valores predeterminados enumerados funcionan.
Otros valores para scope incluyen rowgroup y colgroup, que son útiles con tablas complejas.
Combinar celdas
De forma similar a MS Excel, Google Sheets y Numbers, es posible unir múltiples celdas en una sola celda. 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.
que 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". Esto combina dos celdas adyacentes. La primera y la última celda incluyen rowspan="2". Esto combina la celda con la celda
en la fila adyacente, inmediatamente debajo de ella.
La segunda fila del encabezado de la tabla contiene dos celdas; estas son las celdas de la segunda y tercera columna de la segunda fila. No se declara ninguna celda para la primera o la última columna, ya que las celdas de la primera y la última columna de la primera fila abarcan dos filas.
Cuando una celda esté definida 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 explícitamente
el alcance de los encabezados con el atributo scope Para mayor claridad, 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 barra de herramientas, como
tus tablas crezcan en complejidad. Tablas con estructuras complejas, como tablas en las que se combinan encabezados o celdas, o con otras
más de dos niveles de encabezados de columna o fila, requieren la identificación explícita de las celdas de encabezado asociadas. En tablas tan complejas, explícitamente
asociar 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 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 de lectores de pantalla. Cognitivamente y en cuanto a la compatibilidad con el lector de pantalla, las tablas más simples, con pocas celdas o ninguna, incluso sin agregar alcance ni encabezados, son más fáciles de usar. y comprende. También son más fáciles de administrar.
Cómo aplicar estilo a las tablas
Hay dos elementos relativamente desconocidos que se mencionaron de forma breve: el grupo de columnas, <colgroup>, y el elemento
y su único elemento subordinado, el elemento de columna <col> vacío. El
El elemento <colgroup> se usa para definir grupos de columnas, o elementos <col>, dentro de una tabla.
Si se usa, la agrupación de columnas debe anidarse en el <table>, inmediatamente después de <caption> y antes de los datos de la tabla.
Si abarcan más de una columna, usa el atributo span.
Por lo general, el orden del esquema del contenido de una tabla es el siguiente, donde <table> y <caption> son los dos elementos que
qué debe 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
para un estilo limitado de la columna, incluida la configuración de un ancho para la columna con CSS.
Los diseños <col> le darán estilo a una columna, siempre y cuando no haya diseños <td> o <th> que anulen ese diseño. Por ejemplo, cuando
<colspan> se usa 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 elemento secundario de cada fila, destacará la octava columna en su totalidad o la octava columna de varias filas,
pero con algunas celdas entre la 9a y la 10a, según las celdas de fila o columna que se combinaron.
Lamentablemente, solo se admiten unas pocas propiedades, los estilos no se heredan en las celdas y la única forma de usar <col>
en las celdas de segmentación es con un selector complejo que incluye el selector relacional :has().
Si tanto <table> como <colgroup> tienen un color de fondo, el background-color de <colgroup> estará en la parte superior.
El orden del dibujo es: 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 la tabla
capas. Los elementos <td> y <th> no son descendientes de los elementos <colgroup> o <col>, y no heredan su diseño.
Para seleccionar una tabla, los selectores estructurales de CSS son ú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 del cuerpo de la tabla, lo que permitirá que se muestren los efectos de fondo establecidos en <colgroup>.
Las tablas no son responsivas de forma predeterminada. sino que se ajustan en función de su contenido de forma predeterminada. Se necesitan medidas adicionales para obtener la tabla
para que funcione de manera eficaz en diversos dispositivos. Si cambias la propiedad de visualización de CSS para los elementos de la tabla, sigue estos pasos:
incluir atributos role de ARIA. Si bien esto puede sonar redundante, la propiedad display de CSS puede afectar el árbol de accesibilidad en algunos navegadores.
Presentación de datos
Los elementos de la tabla tienen significados semánticos que las tecnologías de accesibilidad usan 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 distribuir el contenido en muchas columnas, usa el diseño de varias columnas.
Si deseas diseñar el 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 presentarse en una reunión, usa <table>.
Si quieres usar las funciones disponibles en el software para presentaciones, como Keynote o PowerPoint, probablemente necesites una lista de descripciones.
Si bien ordenar las columnas de la tabla es el ámbito de JavaScript, marcar los encabezados para que los usuarios sepan que la columna se puede ordenar es el ámbito de HTML.
Informa a tus usuarios que las columnas de la tabla se pueden ordenar con iconografía que muestra ascendente, descendente o sin ordenar. La columna que está ordenada actualmente debe
Incluye el atributo aria-sort con el valor enumerado de la dirección del ordenamiento.
El <caption> puede anunciar amablemente las actualizaciones del orden de clasificación a través de aria-live y un
que se actualiza de forma dinámica y es visible para los usuarios de lectores de pantalla. Como la columna se puede ordenar cuando haces clic en el contenido del encabezado, este debe ser <button>.
Si no presentarás 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, sí debes saber sobre los formularios HTML, por lo que abordaremos este tema a continuación.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre tablas.
¿Qué elemento se usa para marcar celdas que son encabezados?
<header><caption><th>¿Qué información probablemente sea adecuada para el diseño con una tabla?
<dl>.<ul>.