Cómo poner un borde a una tabla
Las tablas no tienen bordes por defecto. Añádelos con CSS: un border en cada celda dibuja la cuadrícula, y border-collapse: collapse en la tabla une cada pareja de bordes vecinos en una sola línea.
La forma abreviada border acepta un ancho, un estilo y un color, en cualquier orden: 1px solid #6b7280. Ponla en th, td, no solo en table: un borde en la tabla solo dibuja el marco exterior.
border-collapse: separate vs collapse
border-collapse decide si las celdas comparten bordes.
| Valor | Resultado |
|---|---|
separate (por defecto) | Cada celda tiene su propio borde, con un hueco entre celdas definido por border-spacing |
collapse | Las celdas vecinas comparten un borde; border-spacing se ignora |
En la tabla separada se ven las dos capas: el marco azul de la tabla y una caja ámbar aparte alrededor de cada celda, con border-spacing entre ellas. Cambia 6px por 0 y las celdas se tocan, pero las líneas siguen dobles. Solo collapse las une.
Cuando dos bordes colapsados se encuentran y son distintos, gana el más ancho. Con el mismo ancho decide el estilo (double gana a solid, que gana a dashed y dotted), y en caso de empate el borde de la celda gana al de la fila, que gana al de la tabla. Por eso el borde exterior de la tabla colapsada es ámbar y no azul: las celdas y la tabla tienen ahí bordes sólidos de 2px, y ganan las celdas.
Solo líneas horizontales, o solo líneas interiores
La mayoría de las tablas modernas no dibujan todas las líneas. Dos patrones habituales:
La segunda tabla quita el borde del lado exterior de cada celda del borde. border-inline-start y border-inline-end significan el inicio y el final de la fila, así que el mismo CSS sigue siendo correcto en los idiomas de derecha a izquierda, donde la primera celda está al otro lado.
Esquinas redondeadas en una tabla
border-radius no hace nada en una tabla con border-collapse: collapse. Las tablas redondeadas usan el modelo separado sin espaciado, y dibujan cada línea una sola vez dando a las celdas solo un borde inferior y un borde final:
Las dos celdas de las esquinas de la cabecera reciben su propio radio para que el fondo gris siga la curva. Sin él, sus esquinas cuadradas asoman por fuera del borde redondeado. El radio es de 9px, los 10px de la tabla menos su borde de 1px, así que las dos curvas coinciden.
Color y grosor del borde por partes
Los bordes pueden cambiar según la parte de la tabla. Los selectores sobre thead, tfoot y filas concretas ponen una línea más gruesa bajo la cabecera o encima de los totales:
Las líneas de 3px ganan a las grises de 1px donde se encuentran, siguiendo las reglas de colapso de arriba. Para el resto de la estructura de la tabla (thead, tfoot, th), consulta tablas en HTML.
El atributo border
Los tutoriales antiguos usan atributos en la etiqueta <table>:
<table border="1" cellspacing="0" cellpadding="6">
Los navegadores todavía respetan border="1": dibuja un borde en la tabla y en cada celda, en el modelo separado, lo que da el aspecto de líneas dobles. Los tres atributos están obsoletos en HTML5. Los equivalentes en CSS son border en las celdas, border-spacing (o border-collapse: collapse) en la tabla y padding en las celdas.
Errores comunes
- Borde solo en
table. Obtienes un marco sin líneas dentro. Añade el borde ath, td. - Olvidar
border-collapse: collapse, y luego ver líneas dobles. border-radiusconborder-collapse: collapse. El radio se ignora.border-spacingconborder-collapse: collapse. El espaciado solo funciona en el modelo separado.- Bordes en
<tr>en el modelo separado. Las filas no dibujan bordes salvo que la tabla esté colapsada; da estilo a las celdas. - Usar
border="1"en código nuevo. Sigue funcionando, pero no permite fijar un color y está obsoleto.
Preguntas frecuentes
¿Cómo pongo un borde a una tabla en HTML?
Usa CSS en la tabla y en sus celdas: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. El borde de las celdas dibuja la cuadrícula, y border-collapse: collapse une los bordes vecinos en líneas simples.
¿Por qué mi tabla tiene bordes dobles?
Por defecto cada celda dibuja su propio borde con un hueco entre celdas (border-collapse: separate), así que las celdas vecinas muestran dos líneas. Pon border-collapse: collapse en el <table> para unirlas en una.
¿El atributo border de la tabla sigue siendo válido?
<table border="1"> todavía dibuja bordes en todos los navegadores, pero está obsoleto en HTML5 y no te deja controlar el color ni el estilo. Usa en su lugar la propiedad CSS border.
¿Cómo redondeo las esquinas de una tabla?
border-radius no tiene efecto en una tabla con border-collapse: collapse. Usa border-collapse: separate con border-spacing: 0, pon el radio en la tabla y da a las celdas de las esquinas un radio a juego (border-start-start-radius y similares) para que sus fondos no asomen por las esquinas.
¿Cómo quito el borde de una tabla?
Las tablas no tienen borde salvo que algo lo añada. Quita el atributo border de la etiqueta <table>, o pon border: none en table, th, td para anular una hoja de estilos que los añada.
