7

¿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)

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! 🙂

 

ENTRADAS RELACIONADAS:

 

7 comentarios

  1. ¡Hola! Una preguntilla. Al integrarlo, me sigue saliendo un borde externo y en la aplicación móvil no se limita al tamaño de la pantalla si no que se alarga más. ¿Cómo puedo solucionarlo? ¡Muchísimas gracias!

  2. Hola amigo, en el ultimo ejemplo, donde estan todas las etiquedas en hidden, falto cerrar el Segundo TR, saludos.

 

 

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.