Componentes de Bootstrap

Tablas

Datos en filas y columnas que se comparan, se recorren y se ordenan.

Una tabla es para datos con varios atributos por fila y que se comparan. Para una lista de una cosa por línea, usa un grupo de lista.

Cuándo usarlo

Úsalo

Una fila de encabezado con nombres de columna cortos; números alineados a la derecha.
Resaltar la fila bajo el puntero (table-hover) cuando las filas son accionables.
Envolver las tablas anchas en table-responsive para que la página nunca se desplace de lado.
Mantener las acciones de una fila en el mismo sitio y siempre visibles.

No

Usar una tabla para maquetar.
Colorear filas sin un texto que diga por qué.
Ocultar columnas necesarias para entender la fila.

Anatomía

Una table con una leyenda (caption), un encabezado (thead, th scope="col") y un cuerpo (tbody) cuya primera celda puede ser el encabezado de fila (th scope="row"). Filas y celdas pueden llevar un color contextual.

Variantes y estados

Una tabla de datos

Assignments
Assignment	Due	Status	Grade
Essay: climate	12 Nov	Graded	8.5
Lab report 2	19 Nov	Submitted	—
Quiz: equations	26 Nov	Not started	—
Final project	10 Dec	Not started	—

Barra de herramientas, selección, acciones y paginador

Cómo construye Didactika una tabla con la que la gente trabaja: una barra de herramientas encima (búsqueda, filtros y la acción principal), una barra que aparece al seleccionar filas, una columna de casillas, cabeceras ordenables, las acciones de una fila al final y siempre visibles, y el paginador de una lista debajo. Todo vive en una tarjeta.

Barra de herramientas, selección y acciones

	Category		Status
Algebra I	Mathematics	128	Open
Physics II	Sciences	94	Open
Chemistry lab	Sciences	71	Draft
World history	Humanities	156	Closed

Compacta, con personas y progreso

Compacta

Participant	Role	Last access	Progress
ALAda Lovelace	Teacher	2 minutes ago	100%
GHGrace Hopper	Student	Yesterday	72%
ATAlan Turing	Student	3 days ago	38%

Cabeceras ordenables

Una cabecera ordenable es un botón dentro del th. Solo una columna está ordenada a la vez y el aria-sort de su th (ascending, descending o none) dice cuál: hay una sola flecha: en la columna ordenada es sólida, del color primario, y apunta hacia arriba (ascendente) o hacia abajo (descendente); en las demás es tenue y apunta hacia abajo hasta que el puntero o el teclado llegan a ellos.

Cabeceras ordenables

Courses, sorted by students from most to fewest

Algebra I	Ana Ruiz	128	74%
Physics II	Luis Gil	94	58%
Chemistry lab	Eva Marín	71	91%
World history	Marta Soto	52	66%

Estilos de fila

Estilos de fila

Striped	Participants
Algebra I	128
Physics II	94
Chemistry	71

Bordered, small	Participants
Algebra I	128
Physics II	94

Row colours	Meaning
table-success	Completed
table-warning	Needs attention
table-danger	Failed
table-active	Selected

Combinaciones

Combinación	Para qué usarla
Tabla × barra de herramientas	Búsqueda y filtros a la izquierda, la acción principal a la derecha; la barra va dentro de la misma tarjeta que la tabla.
Tabla × selección	Una columna de casillas; al seleccionar filas una barra muestra cuántas y las acciones que se les aplican.
Tabla × acciones de fila	Botones de icono al final de la fila (editar, ocultar, eliminar), siempre visibles, nunca ocultos hasta pasar el ratón.
Tabla × paginador	El paginador de una lista en el pie: filas por página, rango y flechas.
Tabla × estado	Un badge suave con un punto para el estado de cada fila.
Compacta × personas	Poco relleno, un avatar con un nombre, un rol en un badge y una barra de progreso fina.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
Ancho completo, una cabecera pequeña en mayúsculas y líneas discretas	La cabecera es una etiqueta, no un título; el ojo va a los datos.
Las acciones de una fila están siempre visibles	Esconderlas hasta pasar el ratón las hace invisibles en pantallas táctiles y para quien usa el teclado, y mueve el diseño.
La fila seleccionada va teñida	Se ve a qué se aplicará una acción antes de pulsarla.
La barra de herramientas, la tabla y el paginador son una tarjeta	Son un solo objeto; el usuario ve una sola cosa con la que trabajar.
Las cabeceras ordenables son botones con un icono	Anuncian el orden y se alcanzan con el teclado.

Clases

Clase	Qué hace
`table`	Base
`table-striped`, `table-hover`, `table-bordered`	Rayas, resalte al pasar y bordes
`table-sm`	Compacta
`table-active`, `table-success`…	Color de una fila o celda
`table-responsive`	Se desplaza dentro de su caja en pantallas pequeñas
`align-middle`	Alineación vertical
`table-toolbar`, `table-toolbar-start`, `table-toolbar-end`	La barra sobre una tabla (Didactika)
`table-toolbar-selection`	La barra que aparece al seleccionar filas (Didactika)
`table-select`	La columna estrecha de la casilla (Didactika)
`table-actions`	La celda con las acciones de una fila (Didactika)
`table-sort`	Una cabecera ordenable (Didactika)
`table-foot`	El pie de una tabla, para el paginador (Didactika)

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.

Accesibilidad

Usa th con scope y una caption (puede estar visualmente oculta).
No uses una tabla para maquetar.
Una fila coloreada también lo dice con texto.
Las columnas ordenables anuncian el orden (aria-sort).