Bordes de tabla HTML

Una tabla desnuda se lee; los bordes hacen la cuadrícula obvia de un vistazo. La lección anterior fijó la estructura con table, tr, th y td. Esta sesión añade el aspecto: en HTML moderno dibuja bordes con CSS, no solo con el antiguo atributo presentacional border en <table>. La estructura queda en HTML; líneas, espaciado y color pertenecen a reglas de estilo. Piensa en los bordes como gafas para la cuadrícula: ayudan a los ojos a seguir las celdas sin cambiar el significado de los datos.

Por qué CSS en lugar del atributo antiguo

Los navegadores aceptaban <table border="1"> como truco didáctico rápido. Ese atributo está obsoleto para páginas modernas serias y casi no controla color, grosor ni qué lados aparecen. CSS permite fijar ancho, estilo y color por separado, compartir una regla entre muchas celdas y combinar bordes con padding y border-collapse. Aprender bordes con CSS también coincide con cómo estilizarás encabezados, listas y layout después, así que las páginas de práctica se alinean con proyectos reales.

Respuesta directa

Estiliza table, th y td con la propiedad CSS border. Usa border-collapse: collapse en la tabla para que los bordes adyacentes se fusionen en una sola línea limpia de cuadrícula en lugar de un borde doble grueso. Pon reglas en un atributo style para demos minúsculas o — mejor para reutilizar — en un bloque <style> o hoja de estilos con una clase. Mantén el marcado tr/th/td semántico; solo la apariencia pasa a CSS. Si un tutorial sigue empezando solo con border="1", trátalo como nota de museo y traduce la idea a CSS.

Bordes CSS frente a marcado obsoleto

Bordes en celdas (práctica inline)

Los estilos inline valen mientras experimentas en una tabla pequeña. Primero collapse; luego da a cada celda de encabezado y de datos un borde sólido fino y un poco de padding.

Leer la muestra inline

• border-collapse: collapse en table fusiona bordes vecinos en una cuadrícula
• Cada th/td pone border: 1px solid #333 para una línea oscura simple
• padding: 6px evita que el texto toque el borde
• Los estilos inline se repiten en cada celda: útiles para aprender, ruidosos en tablas grandes
• La estructura HTML no cambió respecto a la lección de tablas; solo se añadió presentación

Aspecto compartido con un bloque style

Cuando varias celdas deben coincidir, una regla de clase gana a copiar la misma cadena inline en todas partes. Un bloque pequeño <style> en el head del documento es un puente claro hacia hojas externas.

Leer la muestra de estilo compartido

• table.grid limita las reglas para que no toda tabla de la página deba verse igual
• Una regla estiliza tanto th como td dentro de .grid
• Cambiar padding o color en un sitio actualiza toda la cuadrícula
• Sigues escribiendo filas normales tr/th/td — CSS nunca sustituye esos elementos
• Cursos CSS posteriores profundizan selectores; aquí el objetivo es una receta de borde limpia y repetible

Collapse, espaciado y legibilidad

Sin border-collapse: collapse, muchos navegadores muestran bordes separados que parecen líneas dobles o una cuadrícula elevada. Collapse es la elección habitual de principiantes para tablas de datos porque se lee como una superficie coherente tipo hoja de cálculo. El padding dentro de las celdas importa tanto como la línea misma: padding cero pega el texto al borde y cansa al escanear. Empieza con 6px–8px y ajusta a ojo en tu página de práctica. El color es opcional: un gris neutro o carbón oscuro basta para aprender; colores chillones distraen de los números que comparas.

La estructura se queda; el aspecto se mueve

No borres encabezados th porque exista CSS. No pongas relaciones tabulares solo en cajas de color sin marcado real de tabla. Los bordes son decoración y claridad sobre el esqueleto de la sesión de tablas. Si los datos no son tabulares, vuelve a las listas: líneas más bonitas no arreglan la elección de elemento equivocada. Igualmente, no revivas tablas de layout anidadas solo porque los bordes de pronto se vean bien; las regiones de página siguen perteneciendo a la estructura y al layout CSS posterior.

Practica en tu editor

1. Reutiliza (o recrea) una tabla de práctica pequeña de la sesión de tablas con celdas reales th/td.
2. Añade bordes con CSS: primero estilos inline en cada celda para ver cada propiedad.
3. Activa y desactiva border-collapse para comparar líneas dobles frente a una cuadrícula de una sola línea.
4. Añade padding para que el texto se siente cómodo dentro de cada celda; prueba 4px y luego 8px.
5. Refactoriza a una class más un bloque corto <style> como la segunda muestra.
6. Confirma que los encabezados siguen siendo th y las celdas de datos td tras el estilo.
7. Opcional: estiliza solo .grid th con un borde o fondo un poco más fuerte para enfatizar etiquetas — sin cambiar el significado HTML.

Errores fáciles

• Depender solo de atributos presentacionales obsoletos como border="1" en sitios serios
• Dejar bordes sin collapse y preguntarse por qué las líneas se ven gruesas o dobles
• Padding cero de modo que el texto toque el borde
• Estilizar con CSS pero quitar etiquetas semánticas th
• Aplicar un td { border: ... } global que restiliza tablas no relacionadas por accidente
• Tratar el CSS de bordes como motivo para volver a construir el layout de página con tablas anidadas

Resumen

• Prefiere CSS border en th y td (y collapse en table)
• border-collapse: collapse limpia la cuadrícula a líneas simples
• El padding mejora la legibilidad dentro de las celdas
• La estructura se queda en HTML; el aspecto en CSS
• Evita depender del atributo border obsoleto en trabajo nuevo
• Refactoriza bordes inline repetidos a una clase cuando la tabla crece