Tabla HTML reutilizable
Ejemplo reutilizableSin librerías. En móvil cada fila se presenta como una tarjeta.
| Nombre | Área | Estado | Fecha | Importe |
|---|---|---|---|---|
| Lucía Campos | Diseño | Activo | 24 Oct, 2026 | $2,400 |
| Diego Ruiz | Desarrollo | Activo | 23 Oct, 2026 | $4,200 |
| Elena Cruz | Operaciones | Pendiente | 22 Oct, 2026 | $1,850 |
Ver y copiar HTML
<!-- INICIO: Tabla HTML reutilizable -->
<section id="tabla-estatica" class="panel demo-card" data-component="tabla-estatica">
<div class="panel-heading"><h2>Tabla HTML reutilizable</h2></div>
<div class="table-scroll">
<table id="static-table">
<caption class="sr-only">
Directorio de ejemplo
</caption>
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Área</th>
<th scope="col">Estado</th>
<th scope="col">Fecha</th>
<th scope="col">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Nombre">Lucía Campos</td>
<td data-label="Área">Diseño</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">24 Oct, 2026</td>
<td data-label="Importe">$2,400</td>
</tr>
<tr>
<td data-label="Nombre">Diego Ruiz</td>
<td data-label="Área">Desarrollo</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">23 Oct, 2026</td>
<td data-label="Importe">$4,200</td>
</tr>
<tr>
<td data-label="Nombre">Elena Cruz</td>
<td data-label="Área">Operaciones</td>
<td data-label="Estado">Pendiente</td>
<td data-label="Fecha">22 Oct, 2026</td>
<td data-label="Importe">$1,850</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- FIN: Tabla HTML reutilizable -->
Tabla con búsqueda, orden y paginación
Ejemplo reutilizablesimple-datatables mejora esta tabla escrita en HTML. Busca un nombre, ordena una columna o cambia de página.
| Nombre | Área | Estado | Fecha | Importe |
|---|---|---|---|---|
| Lucía Campos | Diseño | Activo | 24 Oct, 2026 | $2,400 |
| Diego Ruiz | Desarrollo | Activo | 23 Oct, 2026 | $4,200 |
| Elena Cruz | Operaciones | Pendiente | 22 Oct, 2026 | $1,850 |
| Mateo León | Diseño | Activo | 21 Oct, 2026 | $2,150 |
| Ana Torres | Marketing | Activo | 20 Oct, 2026 | $3,200 |
| Nicolás Vega | Desarrollo | Pendiente | 19 Oct, 2026 | $3,850 |
| Sofía Reyes | Operaciones | Activo | 18 Oct, 2026 | $2,600 |
| Emilio Soto | Marketing | Activo | 17 Oct, 2026 | $2,100 |
| Valeria Mora | Diseño | Pendiente | 16 Oct, 2026 | $3,400 |
| Daniel Ríos | Desarrollo | Activo | 15 Oct, 2026 | $4,600 |
| Paula Gil | Marketing | Activo | 14 Oct, 2026 | $2,700 |
| Andrés Díaz | Operaciones | Pendiente | 13 Oct, 2026 | $1,900 |
Ver y copiar HTML
<!-- INICIO: Tabla con búsqueda, orden y paginación -->
<section id="tabla-interactiva" class="panel demo-card" data-component="tabla-interactiva">
<div class="panel-heading"><h2>Tabla con búsqueda, orden y paginación</h2></div>
<div class="table-scroll">
<table id="library-table">
<caption class="sr-only">
Directorio de ejemplo
</caption>
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Área</th>
<th scope="col">Estado</th>
<th scope="col">Fecha</th>
<th scope="col">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Nombre">Lucía Campos</td>
<td data-label="Área">Diseño</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">24 Oct, 2026</td>
<td data-label="Importe">$2,400</td>
</tr>
<tr>
<td data-label="Nombre">Diego Ruiz</td>
<td data-label="Área">Desarrollo</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">23 Oct, 2026</td>
<td data-label="Importe">$4,200</td>
</tr>
<tr>
<td data-label="Nombre">Elena Cruz</td>
<td data-label="Área">Operaciones</td>
<td data-label="Estado">Pendiente</td>
<td data-label="Fecha">22 Oct, 2026</td>
<td data-label="Importe">$1,850</td>
</tr>
<tr>
<td data-label="Nombre">Mateo León</td>
<td data-label="Área">Diseño</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">21 Oct, 2026</td>
<td data-label="Importe">$2,150</td>
</tr>
<tr>
<td data-label="Nombre">Ana Torres</td>
<td data-label="Área">Marketing</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">20 Oct, 2026</td>
<td data-label="Importe">$3,200</td>
</tr>
<tr>
<td data-label="Nombre">Nicolás Vega</td>
<td data-label="Área">Desarrollo</td>
<td data-label="Estado">Pendiente</td>
<td data-label="Fecha">19 Oct, 2026</td>
<td data-label="Importe">$3,850</td>
</tr>
<tr>
<td data-label="Nombre">Sofía Reyes</td>
<td data-label="Área">Operaciones</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">18 Oct, 2026</td>
<td data-label="Importe">$2,600</td>
</tr>
<tr>
<td data-label="Nombre">Emilio Soto</td>
<td data-label="Área">Marketing</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">17 Oct, 2026</td>
<td data-label="Importe">$2,100</td>
</tr>
<tr>
<td data-label="Nombre">Valeria Mora</td>
<td data-label="Área">Diseño</td>
<td data-label="Estado">Pendiente</td>
<td data-label="Fecha">16 Oct, 2026</td>
<td data-label="Importe">$3,400</td>
</tr>
<tr>
<td data-label="Nombre">Daniel Ríos</td>
<td data-label="Área">Desarrollo</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">15 Oct, 2026</td>
<td data-label="Importe">$4,600</td>
</tr>
<tr>
<td data-label="Nombre">Paula Gil</td>
<td data-label="Área">Marketing</td>
<td data-label="Estado">Activo</td>
<td data-label="Fecha">14 Oct, 2026</td>
<td data-label="Importe">$2,700</td>
</tr>
<tr>
<td data-label="Nombre">Andrés Díaz</td>
<td data-label="Área">Operaciones</td>
<td data-label="Estado">Pendiente</td>
<td data-label="Fecha">13 Oct, 2026</td>
<td data-label="Importe">$1,900</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- FIN: Tabla con búsqueda, orden y paginación -->