Eliminar bordes de la tabla HTML

1. Utilice la propiedad CSS border-collapse para eliminar el borde de las celdas en la tabla en HTML
2. Establezca la propiedad CSS border en none para eliminar el borde de una tabla en HTML

Este artículo presentará métodos para eliminar los bordes de la tabla HTML. Aprenderemos a eliminar los bordes de las celdas al insertar imágenes en las celdas de la tabla.

Utilice la propiedad CSS border-collapse para eliminar el borde de las celdas en la tabla en HTML

Podemos usar la tabla HTML para insertar imágenes. Podemos asignar clases a los elementos de la tabla y definir los atributos de las clases en CSS. Este método nos ayuda a establecer la altura y el ancho del elemento td e insertar la imagen usando la propiedad background-image. Entonces, en cada uno de los elementos td, podemos insertar la imagen. Al insertar las imágenes de esta manera, podemos ver el borde de cada celda en la tabla. Es posible que deseemos eliminar los bordes de las celdas y la tabla para que nuestras imágenes se vean mejor. Para ello, podemos utilizar la propiedad CSS border-collapse. Podemos establecer el valor de la propiedad en collapse para que el borde de las celdas se fusione. Esto habilita el espaciado de celdas a 0. El borde no aparecerá si no usamos el atributo border en la etiqueta table.

Por ejemplo, en HTML, escriba la etiqueta <table> y luego la etiqueta <tr> dentro de ella. Dentro de la etiqueta <tr>, escriba tres etiquetas <td> y escriba las clases left, midddle y right en la primera, segunda y tercera clases. En CSS, seleccione la etiqueta table y establezca la propiedad border-collapse en collapse. A continuación, seleccione las tres clases left, middle y right a la vez y establezca la altura, el ancho y una imagen de fondo.

Hemos creado tres elementos td e insertado imágenes en esos elementos en el siguiente ejemplo. Usando la propiedad border-collapse, eliminamos los bordes de las celdas. Podemos eliminar la propiedad border-collapse para ver cómo el borde de las celdas hace que se vea la imagen.

Código de ejemplo:

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>

table{
 border-collapse:collapse;
}
.left, .middle, .right
{
 width: 200px;
 height: 280px;
 background-image: url('https://loremflickr.com/212/280'); 
}

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

Podemos establecer la propiedad border en none para eliminar el borde de una tabla HTML. La propiedad está a la mano de diferentes propiedades fronterizas. Esas diferentes propiedades son border-width, border-style y border-color. No se formará un borde cuando usamos la propiedad border y la establecemos en none.

Por ejemplo, podemos usar la tabla creada anteriormente. Podemos modificar un poco el CSS anterior para lograr nuestro objetivo usando la propiedad border. Podemos seleccionar las etiquetas table, tr y td de la tabla y establecer la propiedad border en none. De esta forma, podemos eliminar el borde de una tabla y los bordes de las celdas de la tabla en HTML.

Código de ejemplo:

table, tr, td{
 border:none;
}

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>