| Estudiante | Nota |
|---|---|
| Ana Gómez | 4.6 |
| Luis Pérez | 3.8 |
| Sara Ruiz | 4.2 |
| Juan Mora | 3.1 |
Tipo 01
Básica
Solo datos, sin selección.
Componentes Tablas de datos
Tablas de datos
Las tablas organizan información en filas y columnas para comparar, ordenar y seleccionar datos.
| Estudiante | Asignatura | Nota | Asistencia % | |
|---|---|---|---|---|
| Ana Gómez | Programación III | 4.6 | 92 | |
| Luis Pérez | Bases de Datos I | 3.8 | 85 | |
| Sara Ruiz | Fundamentos Web | 4.2 | 100 | |
| Juan Mora | Programación III | 3.1 | 70 |
Filas por página: 10 1–4 de 4
Uso
Úsalas para conjuntos de datos con varias columnas comparables: notas, inventario, pedidos.
- Comparar valores entre filas
- Ordenar o filtrar registros
- Datos sin columnas comparables: usa una lista
- Diseñar la página: las tablas no son para maquetar
Principios
1
Alineadas
Texto a la izquierda, números a la derecha.
2
Ordenables
Los encabezados permiten ordenar.
3
Densidad justa
Filas cómodas de leer y fáciles de seleccionar.
Tipos
| Estudiante | Nota | |
|---|---|---|
| Ana Gómez | 4.6 | |
| Luis Pérez | 3.8 | |
| Sara Ruiz | 4.2 | |
| Juan Mora | 3.1 |
Tipo 02
Con selección
Una columna de casillas para elegir filas.
Anatomía
| Estudiante | Nota | |
|---|---|---|
| Ana Gómez | 4.6 | |
| Luis Pérez | 3.8 | |
| Sara Ruiz | 4.2 | |
| Juan Mora | 3.1 |
- Fila de encabezados
- Celda de encabezado ordenable
- Fila de datos
- Casilla de selección
Comportamiento
| Estudiante | Asignatura | Nota | Asistencia % | |
|---|---|---|---|---|
| Ana Gómez | Programación III | 4.6 | 92 | |
| Luis Pérez | Bases de Datos I | 3.8 | 85 | |
| Sara Ruiz | Fundamentos Web | 4.2 | 100 | |
| Juan Mora | Programación III | 3.1 | 70 |
Filas por página: 10 1–4 de 4
- Tocar un encabezado ordena la columna; tocar de nuevo invierte el orden.
- Marcar filas resalta la fila y muestra acciones sobre la selección.
- La casilla del encabezado selecciona todas las filas visibles.
Medidas
| Medida | Valor de referencia |
|---|---|
| Fila de datos | 52 dp de alto |
| Fila de encabezado | 56 dp |
| Margen de celda | 16 dp a los lados |
| Texto | 14 sp; encabezado en peso medio |
| Separadores | 1 dp |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Encabezados reales
Usa
Orden anunciado
aria-sort="ascending" en la columna ordenada.
Título
Usa