Color de fondo en las tablas
Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente análogo al empleado para que su página tenga un color de fondo uniforme. Para ello debemos utilizar el atributo bgcolor="#RRGGBB".
Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributo dentro de la etiqueta <table>. Por ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00):
| <table border=5 bgcolor="#00FF00"> <tr> <td>Fila1-Celda1</td> <td>Fila1-Celda2</td> <td>Fila1-Celda3</td> </tr> <tr> <td>Fila2-Celda1</td> <td>Fila2-Celda2</td> <td>Fila2-Celda3</td> </tr> </table> |
Que resulta:
| Fila1-Celda1 | Fila1-Celda2 | Fila1-Celda3 |
| Fila2-Celda1 | Fila2-Celda2 | Fila2-Celda3 |
Que solamente una celda determinada tenga un color de fondo. Para ello colocamos el atributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1 de la fila 1 tenga color verde:
| <table border=5> <tr> <td bgcolor="#00FF00">Fila1-Celda1</td> <td>Fila1-Celda2</td> <td>Fila1-Celda3</td> </tr> <tr> <td>Fila2-Celda1</td> <td>Fila2-Celda2</td> <td>Fila2-Celda3</td> </tr> </table> |
Que resulta:
| Fila1-Celda1 | Fila1-Celda2 | Fila1-Celda3 |
| Fila2-Celda1 | Fila2-Celda2 | Fila2-Celda3 |
Que la generalidad de las celdas tenga un color, pero que alguna celda tenga uno particular. El atributo del color general se coloca en la etiqueta <table>, y el del color particular en la etiqueta de la celda en cuestión (una combinación de los dos casos anteriores). Por ejemplo, vamos hacer que la generalidad de la tabla sea de color rojo (#FF0000), pero que la celda 1 de la fila 1 sea de color verde (#00FF00):
| <table border=5 bgcolor="#FF0000"> <tr> <td bgcolor="#00FF00">Fila1-Celda1</td> <td>Fila1-Celda2</td> <td>Fila1-Celda3</td> </tr> <tr> <td>Fila2-Celda1</td> <td>Fila2-Celda2</td> <td>Fila2-Celda3</td> </tr> </table> |
Que resulta:
| Fila1-Celda1 | Fila1-Celda2 | Fila1-Celda3 |
| Fila2-Celda1 | Fila2-Celda2 | Fila2-Celda3 |
Imagenes de fondo en las tablas
El Microsoft Internet Explorer soporta la colocación de imágenes de fondo en el interior de las tablas, de una manera análoga a como se hace en una página.
Para ello debemos utilizar el atributo background="imagen.gif" o background="imagen.jpg", según sea el caso.
Si se utiliza dentro de la etiqueta <table> la imagen en cuestión se multiplicará detras de todas las celdas.
Por ejemplo, si ponemos:
<table border=2 background="nubes.jpg">
| <table border=5 background="nubes.jpg"> <tr> <td>Fila1-Celda1</td> <td>Fila1-Celda2</td> <td>Fila1-Celda3</td> </tr> <tr> <td>Fila2-Celda1</td> <td>Fila2-Celda2</td> <td>Fila2-Celda3</td> </tr> </table> |
Obtenemos:
| Fila1-Celda1 | Fila1-Celda2 | Fila1-Celda3 |
| Fila2-Celda1 | Fila2-Celda2 | Fila2-Celda3 |
Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta (<td> o <th>), entonces la imagen de fondo se verá sólo en esa celda, como por ejemplo:
| <table border=5> <tr> <td background="nubes.jpg">Fila1-Celda1</td> <td>Fila1-Celda2</td> <td>Fila1-Celda3</td> </tr> <tr> <td>Fila2-Celda1</td> <td>Fila2-Celda2</td> <td>Fila2-Celda3</td> </tr> </table> |
Obtenemos:
| Fila1-Celda1 | Fila1-Celda2 | Fila1-Celda3 |
| Fila2-Celda1 | Fila2-Celda2 | Fila2-Celda3 |
Separación entre las celdas de una tabla
Por defecto, la separación etnre las distintas celdas de una tabla es de dos píxles. Pero se puede variar esto con el atributo cellspacing, que se pone dentro de la etiquta <table>.
Por ejemplo, para obtener una separación de 20 píxeles entre celds ponemos:
<table border=5 cellspacing=20>
| <table border cellspacing=20> <tr> <td>Fila1-Celda1</td> <td>Fila1-Celda2</td> <td>Fila1-Celda3</td> </tr> <tr> <td>Fila2-Celda1</td> <td>Fila2-Celda2</td> <td>Fila2-Celda3</td> </tr> </table> |
Con lo que se obtiene:
| Fila1-Celda1 | Fila1-Celda2 | Fila1-Celda3 |
| Fila2-Celda1 | Fila2-Celda2 | Fila2-Celda3 |
A primera vista parece como si esto fuera lo mismo que si hubiéramos aumentado el espesor de los bordes. Pero para comprobar que no es así, hagamos que en el caso anterior, tenga además unos bordes de 8 de espesor:
<table border=8 cellspacing=20>
| <table border=8 cellspacing=20> <tr>
<td>Fila1-Celda1</td>
<td>Fila1-Celda2</td>
<td>Fila1-Celda3</td>
</tr>
<tr>
<td>Fila2-Celda1</td>
<td>Fila2-Celda2</td>
<td>Fila2-Celda3</td>
</tr>
</table>
|
Con lo que se obtiene:
Separación entre el borde y el contenido de las celdas
| Fila1-Celda1 | Fila1-Celda2 | Fila1-Celda3 |
| Fila2-Celda1 | Fila2-Celda2 | Fila2-Celda3 |
Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un píxel. Se puede cambiar esto con el atributo cellpadding, que se pone dentro de la etiqueta <table>.
Por ejemplo, para obtener una separación de 20 pixeles entre el contenido y los bordes, dentro de cada celda:
<table border cellpadding=20>
| <table border cellpadding=20> <tr> <td>Fila1-Celda1</td> <td>Fila1-Celda2</td> <td>Fila1-Celda3</td> </tr> <tr> <td>Fila2-Celda1</td> <td>Fila2-Celda2</td> <td>Fila2-Celda3</td> </tr> </table> |
Con lo que se obtiene:
| Fila1-Celda1 | Fila1-Celda2 | Fila1-Celda3 |
| Fila2-Celda1 | Fila2-Celda2 | Fila2-Celda3 |
Se puede combinar este atributo con cellspacing.
Por ejemplo, una tabla con borde de 5 de espesor, separación entre celdas de 15 y separación del contenido con respecto a los bordes de las celdas de 20, lo que obtendriamos con:
<table border=5 cellspacing=15 cellpadding=20>
| <table border=5 cellspacing=15 cellpadding=20> <tr> <td>Fila1-Celda1</td> <td>Fila1-Celda2</td> <td>Fila1-Celda3</td> </tr> <tr> <td>Fila2-Celda1</td> <td>Fila2-Celda2</td> <td>Fila2-Celda3</td> </tr> </table> |
Con lo que se obtiene:
| Fila1-Celda1 | Fila1-Celda2 | Fila1-Celda3 |
| Fila2-Celda1 | Fila2-Celda2 | Fila2-Celda3 |
No hay comentarios:
Publicar un comentario