Contenedores

Tablas

Las tablas presentan datos organizados en filas y columnas, como listados de facturas, dominios o usuarios.

Uso

<vadavo-table> envuelve un elemento table nativo — la tabla conserva su semántica y su accesibilidad nativas, con thead para la fila de encabezados y tbody para los datos.

Los encabezados se muestran en mayúsculas, las filas del cuerpo se separan con una línea sutil y se resaltan al pasar el cursor. La tabla ocupa todo el ancho de su contenedor, y si no cabe se desplaza en horizontal dentro de su propia caja en vez de ensanchar la página.

Para columnas numéricas (importes, cantidades), la clase amount en las celdas correspondientes (th y td) las alinea a la derecha.

Ejemplo

Listado de facturas que combina la tabla con el componente Badge en la columna de estado.

Factura	Concepto	Estado	Importe
F-2026-081	Hosting SSD · Plan Avanzado	Pagada	14,90 €
F-2026-080	Dominio midominio.com	Pendiente	12,10 €
F-2026-079	Certificado SSL	Vencida	49,00 €

<vadavo-table>
    <table>
        <thead>
            <tr>
                <th>Factura</th>
                <th>Concepto</th>
                <th>Estado</th>
                <th class="amount">Importe</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>F-2026-081</td>
                <td>Hosting SSD · Plan Avanzado</td>
                <td><span class="badge success">Pagada</span></td>
                <td class="amount">14,90 €</td>
            </tr>
            <tr>
                <td>F-2026-080</td>
                <td>Dominio midominio.com</td>
                <td><span class="badge warning">Pendiente</span></td>
                <td class="amount">12,10 €</td>
            </tr>
            <tr>
                <td>F-2026-079</td>
                <td>Certificado SSL</td>
                <td><span class="badge error">Vencida</span></td>
                <td class="amount">49,00 €</td>
            </tr>
        </tbody>
    </table>
</vadavo-table>