Tablas y Listas
Tablas con variantes de estilo y list-groups para mostrar colecciones de elementos.
Tabla básica
| # | Programa | Facultad | Nivel | Estado |
|---|---|---|---|---|
| 1 | Ingeniería de Sistemas | Ingeniería | Pregrado | Activo |
| 2 | Medicina | Salud | Pregrado | Activo |
| 3 | Maestría en Computación | Ingeniería | Posgrado | En revisión |
| 4 | Doctorado en Química | Ciencias | Doctorado | Suspendido |
HTML — Tabla básica accesible
<div class="table-wrap">
<table>
<caption class="sr-only">
Descripción de la tabla para lectores de pantalla
</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Programa</th>
<th scope="col">Nivel</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ingeniería de Sistemas</td>
<td>Pregrado</td>
</tr>
</tbody>
</table>
</div>
Variantes de tabla
Striped (rayas alternas)
| Nombre | Cargo | Dependencia |
|---|---|---|
| Ana García | Directora | Rectoría |
| Carlos López | Coordinador | Bienestar |
| María Torres | Profesora | Ingeniería |
| Juan Pérez | Administrativo | Registro |
Hover
| Sede | Ciudad | Estudiantes |
|---|---|---|
| Principal | Cali | 25.000 |
| Palmira | Palmira | 2.800 |
| Buga | Buga | 1.200 |
Tabla oscura
| Criterio | Nivel | Estado |
|---|---|---|
| Contraste de texto | AA | ✓ Cumple |
| Alt text en imágenes | A | ✓ Cumple |
| Foco visible | AA | ⚠ Revisar |
Filas con color semántico
| Estado | Descripción | Acción |
|---|---|---|
| Aprobado | Solicitud procesada exitosamente | |
| Rechazado | Documentos incompletos | |
| Pendiente | En espera de aprobación | |
| En proceso | Siendo evaluado por el comité |
HTML — Variantes de tabla
<!-- Striped -->
<table class="table-striped">...</table>
<!-- Hover -->
<table class="table-hover">...</table>
<!-- Oscura -->
<table class="table-dark">...</table>
<!-- Compacta -->
<table class="table-sm">...</table>
<!-- Filas con color semántico -->
<tr class="row-success">...</tr>
<tr class="row-danger">...</tr>
<tr class="row-warning">...</tr>
<tr class="row-primary">...</tr>
List Groups
Elemento activo
Segundo elemento
Tercer elemento 3
Desactivado
Marca
Primary
Success
Danger
Warning
Info
HTML — List groups
<div class="list-group">
<div class="list-group-item active">
Elemento activo
</div>
<div class="list-group-item">
Con badge
<span class="badge badge-marca">3</span>
</div>
<div class="list-group-item disabled">
Desactivado
</div>
</div>
<!-- Variantes de color -->
<div class="list-group-item list-group-item-success">...</div>
<div class="list-group-item list-group-item-danger">...</div>