 Estás en: HTML» Trucos » Bordes de celdas
Trucos y preguntas frecuentes sobre diseño en HTML
¿Cómo se pueden crear bordes gruesos de celdas rellenos de color?
Cuando creamos una tabla con bordes (ver tutorial capítulo dedicado a tablas), el ancho que le damos al borde (si es mayor que un pixel) no se aplica por igual a la línea que enmarca cada celda, sino que ésta se verá siempre en el navegador mucho más fina (seguirá siendo de 1 pixel). Ver el ejemplo:
| En el editor de textos |
En el navegador |
<table border="5" cellspacing="0" bordercolor="#F8D848">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table> |
|
Cuando pretendemos ampliar ese grosor de la linea divisoria de celdas, dando un valor al atributo cellspacing, nos encontramos con la sorpresa del ejemplo siguiente, que es una bonita forma de resaltar las celdas, pero, quizás no es el efecto que queramos:
| En el editor de textos |
En el navegador |
<table border="5" cellspacing="5" bordercolor="#F8D848">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table> |
|
Podemos recurrir entonces al siguiente truco para que los bordes de las celdas sean también gruesas y parezcan rellenas de color:
Daremos un color de fondo a la tabla, que será el que queramos que aparezca como color del marco y de los bordes de celdas. En el ejemplo será: bgcolor="#F8D848" (amarillo). A continuación indicaremos el color de fondo para cada celda. En el ejemplo será: bgcolor="#FFFFFF" (blanco). De esta forma, el color blanco se superpondrá al amarillo del fondo. Observa el resultado:
| En el editor de textos |
En el navegador |
<table border="5" cellspacing="5" bordercolor="#F8D848" bgcolor="#F8D848">
<tr>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#FFFFFF"></td>
</tr>
</table> |
|
Si quitamos el color de fondo y el borde a la tabla, pero mantenemos el color de fondo de las celdas, conseguiremos el siguiente efecto siempre que mantengamos un cellspacing de varios pixels:
| En el editor de textos |
En el navegador |
<table cellspacing="5">
<tr>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#FFFFFF"></td>
</tr>
</table> |
|
| 
