Cómo quitar los bordes de una tabla HTML

Para quitar los bordes visibles de una tabla HTML, establece la propiedad CSS border en none en la tabla y las celdas que muestran una línea. Usa border-collapse: collapse cuando quieras que los bordes contiguos de las celdas compartan una sola línea: esta propiedad combina los bordes, pero no los elimina. Esta diferencia resulta útil al organizar imágenes u otro contenido dentro de las celdas: collapse cambia la forma en que se unen los bordes contiguos, mientras que border: none elimina los bordes renderizados de los elementos seleccionados.

Use border-collapse: collapse to Combine Adjacent Table Cell Borders in HTML

La propiedad CSS border-collapse determina si una tabla usa el modelo de bordes separados o el modelo de bordes colapsados. Con el valor collapse, los bordes contiguos de las celdas se combinan, de modo que dos celdas no dibujan líneas distintas en el borde que comparten. Aun así, pueden seguir viéndose los bordes existentes alrededor de la tabla y de sus celdas: esta declaración no los elimina. Tampoco sirve para establecer el espaciado en cero. En el modelo separado, border-spacing controla la separación entre los bordes de las celdas. En cambio, el modelo colapsado combina los bordes contiguos, por lo que cambiar border-spacing no soluciona las líneas visibles en ese modelo.

Este pequeño ejemplo HTML contiene dos celdas con bordes. La regla de la tabla combina las líneas donde se encuentran las celdas, mientras que la regla de las celdas mantiene visibles sus bordes:

const example = `<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>`;
console.log(example);

<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>

Sustituye el texto de ejemplo de las celdas por tu propio contenido; también puedes incluir un elemento de imagen si las celdas contienen imágenes. El CSS funciona con celdas <td> y <th> normales y no depende de ningún servicio de imágenes. La declaración padding añade espacio dentro de cada celda; no controla la separación entre los bordes de celdas distintas. Si quieres una cuadrícula con líneas compartidas, conserva los bordes de las celdas y usa collapse. Si no quieres líneas, quita las declaraciones de borde correspondientes, como se explica a continuación.

Establezca la propiedad CSS border en none para eliminar el borde de una tabla en HTML

Para ocultar los bordes, establece border: none en la tabla y en cada tipo de celda cuyos bordes deban desaparecer. Una regla con table, th, td selecciona la tabla, las celdas de encabezado y las celdas de datos. Si el contorno de la tabla ya no aparece y solo quedan las líneas de las celdas, puedes usar th, td para seleccionar únicamente esas celdas. El selector determina a qué elementos se aplica la declaración; la cascada de CSS determina qué declaración coincidente prevalece. Una regla más específica puede imponerse a un selector general y, si la especificidad es la misma, prevalece la declaración posterior.

La propiedad border es una forma abreviada de border-width, border-style y border-color. Al establecerla en none, se elimina el borde renderizado de los elementos seleccionados, pero no se quitan el relleno interno de las celdas ni su contenido. Por ejemplo, una hoja de estilos puede usar table, th, td { border: none; } si los tres tipos de elementos deben quedar sin bordes visibles. Añade border-collapse: collapse solo si también quieres que la tabla use el modelo colapsado; esa propiedad no sustituye a border: none.

Si sigue apareciendo una línea, comprueba qué elemento la dibuja. Para quitar un borde de la tabla, la regla debe seleccionar la tabla; para quitar el de una celda de encabezado o de datos, debe seleccionar th o td. Después, comprueba si otra regla de la hoja de estilos está sobrescribiendo tu declaración. Así, la corrección se limita a los elementos que realmente tienen bordes y evita modificar el espaciado o el contenido de la tabla sin necesidad.