Colores y Fondos de Tablas

Colores y Fondos de Tablas.

En esta segunda parte del tutorial, vamos a saber como colocar imagenes, colores de fondo y bordes en tablas, seguiremos armando el código, tienen que aver visto el tutorial anterior para poder seguir con los cambios. VER TUTORIAL ANTERIOR.

Para poder agregar colores vamos a utilizar los siguientes códigos.

bgcolor + Código de color
style="background: url(URL IMAGEN)"
bordercolor + Código de color

Vamos a utilizar bgcolor + Código de color para agregar color de fondo a la tabla.
Lo que tendriamos que hacer, es agregar bgcolor="Código de color" antes del final del cierra de la primera linea.

<table cellspacing="1" cellpadding="1" border="1" bgcolor="#FF0000">
<tbody>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
</tr>
<tr>
<td>Contenido 01</td>
<td>Contenido 02</td>
</tr>
<tr>
<td>Contenido 001</td>
<td>Contenido 002</td>
</tr>
</tbody>
</table>

Cuando tengamos el código armado con la diferencia que le hemos agregado color de fondo a los td se notará el cambio de esta manera.

Contenido 1	Contenido 2
Contenido 01	Contenido 02
Contenido 001	Contenido 002

Tambien le podemos mesclar sus diferentes colores de celdas (td).
Si le cambiamos los colores en cada celda que se mantiene en color que le hemos dado en mi caso rojo, le tendremos que eliminarlo de la primera fila que hemos puesto el código del color, bgcolor="#FF0000" lo vamos a cambiar antes de los contenidos entre las etiquetas td.

De la siguiente manera.

<table cellspacing="1" cellpadding="1" border="1">
<tbody>
<tr>
<td bgcolor= "#FF0000">Contenido 1</td>
<td bgcolor= "#0101DF">Contenido 2</td>
</tr>
<tr>
<td bgcolor= "#00FF00">Contenido 01</td>
<td bgcolor= "#FF4000">Contenido 02</td>
</tr>
<tr>
<td bgcolor= "#FE2EF7">Contenido 001</td>
<td bgcolor= "#585858">Contenido 002</td>
</tr>
</tbody>
</table>

Lo que vamos agregarle son colores de cada celdas que serán de esta manera el resultado de cada color.

Contenido 1	Contenido 2
Contenido 01	Contenido 02
Contenido 001	Contenido 002

Cuando queramos colocar color de fondo a una celda o a muchas, lo agregamos el código completo 4 fila, td bgcolor= "Código de color" + Contenido 1 +/td

Ahora nos pasamos a la imagen de fondo en la tabla, lo que necesitamos hacer es agregar el código css en la primera linea del código, style="background: url(URL IMAGEN)"

Podemos dejar agregado los colores en la celda, mientras que no este el código de color de fondo td en la primera fila, todo estara en perfecto estado, una advertencia que hay que tener en cuenta es que no se puede agregar el código de fondo td + el fondo de imagen porque no se dará resultado el cambio, se visualizará un error al no ser vista ni la imagen ni el color de fondo, por eso agregamos lo siguiente y lo unico que tenemos que poner.


<table cellspacing="20" cellpadding="1" border="1" style="background: url(URL IMAGEN)">
<tbody>
<tr>
<td bgcolor= "#FF0000">Contenido 1</td>
<td bgcolor= "#0101DF">Contenido 2</td>
</tr>
<tr>
<td bgcolor= "#00FF00">Contenido 01</td>
<td bgcolor= "#FF4000">Contenido 02</td>
</tr>
<tr>
<td bgcolor= "#FE2EF7">Contenido 001</td>
<td bgcolor= "#585858">Contenido 002</td>
</tr>
</tbody>
</table>

Para que se pueda ver la imagen que tengamos agregada como fondo de tabla, tendremos que hacer mas espacios de medidasde celdas, cellspacing="10" y poner en link directo de la imagen de fondo.

Contenido 1	Contenido 2
Contenido 01	Contenido 02
Contenido 001	Contenido 002

Si no le agregamos colores a las celdas, sera transparente.

Cuando se ajustan los espacios de las celdas se hara mas grande la imagen de fondo que hemos puesto, ya sea un wallpaper o otras medidas inferiores o superiores. Tambien nos brinda la posibilidad del relleno del area de la celda, cuyo código es el siguiente de cellspacing será el cellpadding="1" donde el numero 1 es su relleno que se ve en la vista previa anterior, si le agregamos un numero mas elevado por ejemplo;cellpadding="10".

Cuando sea un numero menos elevado a los espacios de celda tiene que ser mayor el numero del relleno de celda, de esa manera se notará la imagen puesta de fondo, la imagen de fondo puede ser chica, los tamaños que puedan exceder los 200x100 pueden no visualizarse completamente, lo que tendria que hacerce mas grande a las celdas entre estas alternativas.

Nos quedaria el código para terminar con este tutorial que sera el borde de color de tablas, el código que usaremos es facil de agregar y personalizar, bordercolor + Código de color // bordercolor="#FF00FF"

Podemos mantener la estructura del código anterior, donde los unicos cambios le cambiaremos y agregaremos será border="1" bordercolor="#FF00FF"


<table cellspacing="20" cellpadding="10" border="1" bordercolor="#000000"style="background: url(URL IMAGEN)">
<tbody>
<tr>
<td bgcolor= "#FF0000">Contenido 1</td>
<td bgcolor= "#0101DF">Contenido 2</td>
</tr>
<tr>
<td bgcolor= "#00FF00">Contenido 01</td>
<td bgcolor= "#FF4000">Contenido 02</td>
</tr>
<tr>
<td bgcolor= "#FE2EF7">Contenido 001</td>
<td bgcolor= "#585858">Contenido 002</td>
</tr>
</tbody>
</table>

Le agregamos el código de color de borde alado de border="1" donde cambiare el "1" por un numero mas notorio ya sea el "5" y de ese tamaño de borde le pondremos un color que se encuentra alado de ese mismo código bordercolor="#000000" donde le agregaré un color negro usando los códigos de colores (#000000).

Contenido 1	Contenido 2
Contenido 01	Contenido 02
Contenido 001	Contenido 002

al realizar los breves cambios, ya podremos mejorar nuestro aspecto sobre las tablas, donde la modificaremos nuestro gusto, esto fue un breve tutorial de Master Nemesis sobre el uso de tablas en HTML.