¿Cómo crear una tabla en HTML con los bordes transparentes?

1. INTRODUCCIÓN

Hoy os traigo una entrada sobre sobre #web, #HTML y #Wordpress.

Ayer, mientras hacía algunos cambios de diseño en la página, llegué a la cuestión que encabeza este artículo.

Como no fui capaz de encontrar una respuesta eficaz por los dominios de Google para hacer los bordes de las tablas transparentes en HTML, me he animado a compartir la solución que a mí me funcionó.

Espero que os resulte útil.

 

2. TABLA HTML CON TODOS LOS BORDES TRANSPARENTES

Este fue el HTML que utilicé:

<table style="border: hidden">

 

Sin embargo, si por vuestro theme y css los bordes interiores se siguen mostrando, siempre podéis utilizar el mismo estilo para el cuerpo de la tabla, las filas y las columnas:

<tbody style="border: hidden">

<tr style="border: hidden">

<td style="border: hidden">

 

3. APLICACIÓN

Una tabla en HTML tiene la siguiente estructura básica:

<table> (tabla)

<tbody> (cuerpo de la tabla)

<tr> (fila a)

<td> (columna 1a)

<td>(columna 2a)

</tr> (fin de fila a)

<tr> (fila b)

<td> (columna 1b)

<td> (columna 2b)

</tbody> (fin del cuerpo de la tabla)

</table> (fin de la tabla)

1a	2a
1b	2b

 

Y si aplicamos lo aprendido, la tabla quedaría así:

<table style="border: hidden">

<tbody style="border: hidden">

<tr style="border: hidden">

<td style="border: hidden">1a</td>

<td style="border: hidden">2a</td>

</tr>

<tr style="border: hidden">1b</td>

<td style="border: hidden">2b</td>

<td style="border: hidden">

</tbody>

</table>

1a	2a
1b	2b

 

4. ¿SOLUCIONADO?

Espero que os haya funcionado. Cualquier duda la podéis compartir a través de los #comentarios.

¡Hasta pronto! 🙂