# Table (datos tabulares)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-table.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Datos

Presenta relaciones entre filas y columnas dentro de un contenedor desplazable y legible.

v2.0

▦
## Estructura semántica
Conserva table, thead, tbody, th y td.

↔
## Overflow seguro
El wrapper habilita desplazamiento horizontal cuando es necesario.

≋
## Variante striped
Alterna fondos para facilitar el seguimiento de filas.

i
## Datos, no layout
Utiliza Table sólo cuando la relación entre filas y columnas aporte significado. Para distribuir contenido usa Grid.

Código + resultado

## Ejemplo aplicado de Table
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

HTML

```html
<div class="q-table-wrap rounded-12">
  <table class="q-table q-table--striped">
    <thead>
      <tr>
        <th>
          Proyecto
        </th>
        <th>
          Responsable
        </th>
        <th>
          Estado
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          Documentación V2
        </td>
        <td>
          Equipo Quickly
        </td>
        <td>
          <span class="q-badge rounded-p q-badge--success">
            Activo
          </span>
        </td>
      </tr>
      <tr>
        <td>
          Componentes
        </td>
        <td>
          Core V2
        </td>
        <td>
          <span class="q-badge rounded-p q-badge--warning">
            Nuevo
          </span>
        </td>
      </tr>
      <tr>
        <td>
          Accesibilidad
        </td>
        <td>
          Sistema
        </td>
        <td>
          <span class="q-badge rounded-p">
            Revisión
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
```

Resultado aplicado   Table · filas alternadas

Componente real

| Proyecto | Responsable | Estado |
| --- | --- | --- |
| Documentación V2 | Equipo Quickly | Activo |
| Componentes | Core V2 | Nuevo |
| Accesibilidad | Sistema | Revisión |

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

## Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

| Clase o atributo | Función | Uso recomendado |
| --- | --- | --- |
| .q-table-wrap | Contenedor | Controla borde y desplazamiento horizontal. |
| .q-table | Tabla | Estilo base de datos tabulares. |
| .q-table--striped | Filas alternadas | Mejora la lectura horizontal. |
| .q-badge | Etiqueta auxiliar | Presenta el estado de una fila. |
| .q-badge--success | Estado positivo | Identifica registros activos. |
| .q-badge--warning | Estado pendiente | Identifica registros que requieren atención. |
| th / td | Celdas nativas | Conservan la semántica tabular. |
| .bc-{token} | Color de acento | Personaliza el texto de las cabeceras. |
| .rounded-12 | Radio del contenedor | Redondea la superficie que recorta la tabla. |
| .rounded-p | Estado redondeado | Da forma de píldora a los badges. |

Recomendaciones

## Buenas prácticas de Table

01
### Encabezados claros
Describe cada columna con th.

02
### Orden de lectura
Mantén una secuencia lógica de izquierda a derecha.

03
### Pocas acciones
Evita llenar cada fila con controles secundarios.

04
### Móvil verificable
Comprueba overflow y no escondas columnas esenciales.