Tablas

El título de una tabla, que los lectores de pantalla leen junto con ella. Debe ser su primer elemento hijo.

<table>
  <caption>Packages and their layer</caption>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Con estilos de elements/tables.css, sin clase: el color secundario, encima de la tabla.

Una columna, o varias si se usa span, dentro de colgroup. Sirve para definir el ancho, el fondo o el borde de una columna entera.

<table>
  <colgroup><col><col style="background: var(--luz-brand-subtle)"></colgroup>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

LUZ no añade estilos al col: en las columnas solo se aplican el ancho, el fondo, el borde y la visibilidad, y los valores adecuados dependen de cada tabla.

Agrupa las columnas de una tabla para que puedas ajustar su tamaño o color a la vez. Va después de caption y antes de las filas.

<table>
  <colgroup><col><col style="background: var(--luz-brand-subtle)"></colgroup>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

LUZ no añade estilos al colgroup: en las columnas solo se aplican el ancho, el fondo, el borde y la visibilidad, y los valores adecuados dependen de cada tabla.

Datos en filas y columnas que se comparan, nunca para maquetar una página. Una tabla sin clase basta; añade .luz-table y envuélvela en .luz-table-wrap para que se desplace y se apile.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Con estilos de elements/tables.css, sin clase, al ancho completo de su contenedor. Añade .luz-table y envuélvela en .luz-table-wrap para que una tabla ancha se desplace; por debajo de 480px de ancho, la tabla se convierte en tarjetas con data-label en cada celda, y la fila de encabezados sigue disponible para los lectores de pantalla.

Contiene las filas principales de una tabla, entre las filas de encabezado y las del pie.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Sin regla propia: sus filas y celdas toman el aspecto de la tabla, de elements/tables.css.

Una celda de datos de una fila de la tabla.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Con estilos de elements/tables.css, sin clase: un divisor bajo cada fila, y la fila bajo el puntero toma una superficie.

Filas al final de una tabla que resumen las columnas, por ejemplo con los totales.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>2</td></tr>
  </tfoot>
</table>

Sin regla propia: sus filas y celdas toman el aspecto de la tabla, de elements/tables.css.

Una celda que etiqueta una fila o columna. Define scope="col" o scope="row" para que los lectores de pantalla sepan qué celdas etiqueta.

<table>
  <thead>
    <tr><th scope="col">Package</th><th scope="col">Layer</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">tokens</th><td>1</td></tr>
    <tr><th scope="row">core</th><td>2</td></tr>
  </tbody>
</table>

Con estilos de elements/tables.css, sin clase: una superficie fuerte y texto pequeño, con una línea debajo en colores forzados.

Las filas iniciales de una tabla que contienen los encabezados de columna.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Sin regla propia: sus filas y celdas toman el aspecto de la tabla, de elements/tables.css.

Una fila de tabla que contiene celdas td y th.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Con estilos de elements/tables.css, sin clase: la fila bajo el puntero toma una superficie, y la última fila no lleva divisor.