Las tablas HTML son la columna vertebral de los datos estructurados en la web. Ya no son sólo para hojas de cálculo. Puedes darles forma, colorearlos y controlar exactamente cómo respiran dentro de una ventana del navegador. El método de la vieja escuela se basa en atributos de presentación específicos. Ellos funcionan. Son directos. No necesitas marcos CSS complejos para obtener un diseño de apariencia decente.
Cambiar el color de fondo de la tabla
Comience con el panorama general. ¿Quieres que aparezca toda la cuadrícula? No necesitas una hoja de estilo separada. Simplemente coloque un atributo bgcolor en la etiqueta de apertura
.
Ejemplo:
Esto prepara el escenario. Cada célula hereda esa vibra a menos que la anules.
También puedes acercar. Colorea una sola fila o solo una celda específica. Coloque bgcolor="color" en la etiqueta
o
| .
Ejemplo:
|
Es un pequeño detalle. Pero cambia la forma en que el ojo se mueve a través de los datos.
Tamaño de la mesa
Los navegadores son vagos por defecto. Expanden filas y columnas para adaptarse al contenido. Si sus datos son cortos, la tabla se extiende hasta llenar la ventana. Si es largo, se hace largo.
A veces quieres control. Quieres dimensiones fijas.
Agregue ancho y alto a la etiqueta inicial
. Puedes utilizar píxeles o porcentajes.
Ejemplo:
Los píxeles te imponen límites estrictos. Los porcentajes dejan que la tabla respire con la ventana gráfica. El que elija dependerá de sus objetivos de diseño.
También puedes bloquear celdas individuales. Agregue width="value" a una etiqueta
o
| . Esto anula la configuración global para ese lugar específico.
Experimento. Pruebe con un valor de píxel. Entonces prueba con un porcentaje. Mira cómo se rompe o se mantiene unido en diferentes pantallas.
Relleno de celda
El espacio es diseño. Específicamente, el espacio entre el borde de una celda y el texto dentro de ella.
Esto es “relleno de celda”. Se necesita un valor de píxel.
Úselo en la etiqueta inicial
.
Ejemplo 1:
Ejemplo 2:
Cinco píxeles son justos. Quince es aireado. El contenido se siente diferente. Se ve más limpio con más relleno.
Espaciado de celdas
Luego está la brecha entre las células.
Esto es “espacio entre celdas”. También toma un valor de píxel.
Agréguelo a la etiqueta
.
Ejemplo 1:
Ejemplo 2:
Un pequeño espacio entre celdas hace que la cuadrícula se sienta densa. Uno grande hace que parezca una lista de verificación.
Encabezados de tabla
Los datos necesitan estructura. Los encabezados proporcionan eso.
Para hacer que una columna o fila se destaque como encabezado, cambie
por
| en la primera fila.
Automáticamente pone en negrita el texto. También lo centra.
Ejemplo:
| Columna 1 |
Columna 2 |
| A |
B |
| C |
| | | |
