Table

Una tabla organiza muchos elementos del mismo tipo en filas y columnas, para comparar y actuar. En móvil, cada fila se convierte en una tarjeta.

Playground

<div style="inline-size: 100%"><div class="feitio-table-scroll" tabindex="0" role="region" aria-label="Nombre"><table class="feitio-table"><thead><tr><th scope="col">Nombre</th><th scope="col">Cuándo</th><th scope="col">Situación</th><th scope="col" data-align="end">Ejecuciones</th><th scope="col"><span class="feitio-visually-hidden">Acciones</span></th></tr></thead><tbody><tr><td class="title">Copia semanal</td><td data-label="Cuándo">Domingo, 3 h</td><td data-label="Situación"><span class="feitio-tag" data-status="ok"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-check"></use></svg>Al día</span></td><td data-align="end" data-label="Ejecuciones">48</td><td class="actions"><a class="feitio-button" href="#playground" data-size="small">Editar<span class="feitio-visually-hidden"> Copia semanal</span></a></td></tr><tr><td class="title">Regar las plantas</td><td data-label="Cuándo">Martes, 9 h</td><td data-label="Situación"><span class="feitio-tag" data-status="warn"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-warn"></use></svg>Atrasado</span></td><td data-align="end" data-label="Ejecuciones">3</td><td class="actions"><a class="feitio-button" href="#playground" data-size="small">Editar<span class="feitio-visually-hidden"> Regar las plantas</span></a></td></tr></tbody></table></div></div>

Cuándo usarlo

• Para elementos comparados por las mismas características: horarios con cuándo y quién, servicios con estado.
• En pantallas de trabajo, casi siempre con data-density="compact".

Cuándo no usarlo

• Un elemento, varias características: SummaryList.
• Cosas por hacer, cada una con un estado: TaskList.
• Para maquetar la página: una tabla es datos, nunca posicionamiento.

Ejemplos

<div class="feitio-table-scroll" tabindex="0" role="region" aria-labelledby="agendamentos">
  <table class="feitio-table">
    <caption id="agendamentos">Agendamentos</caption>
    <thead><tr><th scope="col">Nome</th>…<th scope="col" data-align="end">Disparos</th></tr></thead>
    <tbody><tr><td class="title">Backup semanal</td>…<td data-align="end" data-label="Disparos">48</td></tr></tbody>
  </table>
</div>

<td class="title">Backup semanal</td>
<td data-label="Quando">Domingo, 3h</td>

<th scope="col" aria-sort="ascending"><a href="?ordem=prazo">Prazo…</a></th>

<form action="/tarefas/lote" method="post">
  <button type="submit" name="acao" value="concluir" class="feitio-button" data-size="small">Concluir selecionadas</button>
  …
  <td class="select"><input type="checkbox" name="ids" value="12" aria-label="Selecionar revisar o contrato"></td>
</form>

Sin filas, la tabla se convierte en un EmptyState, a la vez de las filas. Nunca un encabezado solo con nada debajo.

Anatomía

Estados

• Pasa el ratón sobre una fila: un tono ligeramente más oscuro, muy claro, para que el ojo mantenga la fila. No es selección.
• Densidad: cómodo para leer, compacto en pantallas de trabajo; el interruptor se anima.
• Caja estrecha: cada fila se convierte en una tarjeta. Caja media y tabla ancha: se desliza dentro de su propia caja; la página nunca se desliza lateralmente.

Hacer y no hacer

Escritura

• Encabezado: una o dos palabras, sin repetir la unidad en cada celda.
• Celda vacía: un guion, con texto oculto ("no fecha de entrega") para lectores de pantalla.

Accesibilidad

• <caption> con el nombre y <th scope="col"> en cada encabezado.
• La acción de cada fila dice a qué fila pertenece ("Editar copia semanal"), con texto oculto.
• El cuadro deslizable es una región nombrada y toma el foco.

Atributos