0

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

Tabla transparente en HTML1. 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)

1a2a
1b2b

 

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>

1a2a
1b2b

 

4. ¿SOLUCIONADO?

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

¡Hasta pronto! 🙂

¿TE HA RESULTADO ÚTIL/INTERESANTE? ¡COMPÁRTELO!

 

ENTRADAS RELACIONADAS:

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *