Datos

Tablas y Listas

Tablas con variantes de estilo y list-groups para mostrar colecciones de elementos.

Tabla básica

Listado de programas académicos
#	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

Inicio › Oferta académica › Investigación › Bienestar ›

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>