Componentes · Datos

Table (datos tabulares)

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.

Código + resultado

Ejemplo aplicado de Table

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

<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>

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

Encabezados claros

Describe cada columna con th.

Orden de lectura

Mantén una secuencia lógica de izquierda a derecha.

Pocas acciones

Evita llenar cada fila con controles secundarios.

Móvil verificable

Comprueba overflow y no escondas columnas esenciales.