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>
4. ¿SOLUCIONADO?
Espero que os haya funcionado. Cualquier duda la podéis compartir a través de los #comentarios.
¡Hasta pronto! 🙂
¡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!
con que no definas el border no te aparece no tienes que esconderlo
Hola amigo, en el ultimo ejemplo, donde estan todas las etiquedas en hidden, falto cerrar el Segundo TR, saludos.
pero donde pongo el texto que necesito que vaya dentro de la tabla?
Hola Armando.
El texto va entre las etiquetas <td>El texto va aquí</td>
Un saludo.
Muchas gracias por tu post.
Muy útil!
A ti por el comentario Jordi. ^_^