Da estilo a los bordes de tablas HTML con CSS: border-collapse, border-spacing, líneas por celda, filas cebra y esquinas redondeadas. Editor en vivo con CSS para copiar.
Para que una tabla muestre líneas, pon un borde en las celdas th y td y añade border-collapse: collapse a la tabla para que las celdas vecinas compartan una sola línea en lugar de dibujar dos. Para dejar huecos entre celdas usa border-collapse: separate con border-spacing. Las esquinas redondeadas necesitan el modelo separado, porque los bordes colapsados ignoran border-radius.
Las propiedades de borde de tabla de un vistazo
Objetivo
CSS
Dónde va
Líneas de cuadrícula únicas y compartidas
border-collapse: collapse
Líneas alrededor de cada celda
border: 1px solid #ccc
th, td
Huecos entre celdas
border-spacing: 4px
table (solo modelo separado)
Filas alternas
tbody tr:nth-child(even) { background: #f5f5f5 }
Esquinas exteriores redondeadas
border-radius + border-collapse: separate
table y celdas de las esquinas
Líneas solo entre filas
border-bottom: 1px solid #ddd
th, td
Las tablas tienen sus propias reglas de borde, distintas de las de las cajas normales, así que el CSS que funciona en un div a menudo queda mal en una tabla. Usa el editor para cambiar entre el modelo colapsado y el separado, ajustar el grosor de línea, el espaciado y el radio de las esquinas, y copia el CSS exacto que genera.
Elige el modelo collapse o separate en el editor y mira cómo las líneas dobles se fusionan o se separan.
Elige qué líneas dibujar: una cuadrícula completa, solo filas o solo un marco exterior.
Activa las filas cebra o las esquinas redondeadas; al redondear, la tabla pasa al modelo separado automáticamente.
Copia el CSS generado o parte de uno de los ejemplos editables de más abajo.
Pon los bordes en las celdas, no solo en el elemento table. Un borde solo en la tabla dibuja un marco exterior y nada por dentro.
Usa border-spacing: 0 con el modelo separado cuando quieras esquinas redondeadas pero sin huecos visibles.
Alterna el color solo en las filas de tbody, para que la fila de encabezado conserve su propio fondo.
Mantén claros los colores de línea y deja que el padding haga casi toda la separación; las cuadrículas pesadas dificultan leer los números.
Envuelve las tablas anchas en un contenedor con overflow-x: auto para que en el móvil se desplace la tabla y no toda la página.
Preguntas frecuentes
¿Por qué mi tabla muestra bordes dobles?
El valor inicial de border-collapse es separate, así que cada celda dibuja su propio borde y dos vecinas quedan una junto a otra. Pon border-collapse: collapse en la tabla y los bordes adyacentes se fusionan en una sola línea.
¿Por qué border-radius no funciona en mi tabla?
Las esquinas redondeadas se ignoran en el modelo de bordes colapsados. Cambia la tabla a border-collapse: separate, pon border-spacing: 0 y luego redondea las celdas de las esquinas exteriores o envuelve la tabla en un div con border-radius y overflow: hidden.
¿Se sigue permitiendo el atributo HTML border en las tablas?
El estándar HTML considera obsoleto el atributo border en table y pide usar CSS en su lugar. Los navegadores lo siguen dibujando en páginas antiguas, pero el código nuevo debería definir los bordes en una hoja de estilos para que una sola regla controle todas las tablas.
¿Qué valores acepta border-spacing?
Una longitud define el hueco tanto en horizontal como en vertical. Dos longitudes definen primero el hueco horizontal entre columnas y después el vertical entre filas, por ejemplo border-spacing: 8px 4px. No tiene efecto cuando la tabla está colapsada.
¿Cómo añado un borde a una sola columna?
Selecciona las celdas de esa columna con un selector como td:nth-child(2), th:nth-child(2) y dales un borde izquierdo o derecho. Dar estilo directamente a las celdas funciona igual en los dos modelos de borde.
Dos modelos de borde
En el modelo separado cada celda es su propia caja con su propio borde, y border-spacing define el hueco entre esas cajas. Es el valor por defecto, y por eso una tabla sin más con bordes en las celdas se ve doble.
En el modelo colapsado el navegador convierte cada borde compartido en una sola línea. Es lo que quieren casi todas las tablas de datos, a costa de perder border-spacing y las esquinas redondeadas.
Tablas de datos legibles
Las líneas horizontales entre filas guían la vista a lo largo de una fila de cifras mejor que una cuadrícula densa. Alinea a la derecha las columnas numéricas, mantén una fila de encabezado clara con elementos th y añade un caption para que la tabla tenga un nombre para quienes usan lectores de pantalla.
Las filas cebra ayudan en tablas largas con muchas columnas. Comprueba que el color de la franja deja suficiente contraste para el texto que va encima.
Referencia de propiedades de borde de tabla
Propiedades que cambian cómo se dibujan las líneas de una tabla
Propiedad
Valores
Inicial
Notas
collapse, separate
Se pone en la tabla. Collapse fusiona los bordes compartidos.
una o dos longitudes
Hueco horizontal y luego vertical. Se ignora si está colapsada.
grosor estilo color
Normalmente se pone en th y td.
Se ignora en el modelo colapsado.
Ejemplos editables de bordes de tabla
Cuadrícula colapsada con fila de encabezado
La tabla de datos clásica: una línea entre cada celda y un encabezado con fondo de color.
Solo filas, con franjas cebra
Sin líneas verticales. Un borde inferior en cada celda más un tono en las filas pares hace que las filas largas sean fáciles de seguir.
Esquinas de tabla redondeadas
El modelo separado con espaciado cero, bordes a la derecha y abajo de cada celda y las esquinas exteriores redondeadas.
El atributo border obsoleto junto a la versión en CSS
Las dos tablas se ven igual. La segunda deja el estilo en el CSS, que es lo que pide el estándar HTML.
Editor de bordes de tabla
Modelo de borde
Líneas a dibujar
Cuadrícula completa
Solo filas
Solo marco exterior
Grosor de línea: {n}px
Espaciado entre celdas: {n}px
Radio de esquina: {n}px
Filas cebra
Color de línea
El espaciado y el redondeo solo funcionan en el modelo separado.