;  MY LIFE: COSAS PARA BLOGGERS: COMO MODIFICAR EL FORMATO DE UNA TABLA

05 mayo 2011

COSAS PARA BLOGGERS: COMO MODIFICAR EL FORMATO DE UNA TABLA

En este post  os comenté como podemos insertar una tabla en un post. Ahora os diré como podemos cambiar el formato de la tabla.
El ejemplo que os ponía entonces era el de una tabla de tres columnas y dos filas, con un código así:

<table border=1><td>columna 1, fila 1</td>
<td>columna 2, fila 1</td><td>columna 3, fila 1</td>
<tr><td>columna 1, fila 2</td>
<td>columna 2, fila 2</td>
<td>columna 3, fila 2</td></table>


que correspondía a esta tabla:

columna 1, fila 1 columna 2, fila 1columna 3, fila 1
columna 1, fila 2 columna 2, fila 2 columna 3, fila 2


CAMBIAR EL ANCHO DEL BORDE DE LA TABLA.


Como veis, en el principio del código establecíamos el grosor del borde de la tabla con el comando border=1. Si no queremos borde, tendremos que cambiar ese uno por un 0, y si queremos otro tipo de grosor deberemos de cambiarlo por otro número. Por ejemplo, aquí está la tablar si cambiamos el borde a 5:

columna 1, fila 1 columna 2, fila 1columna 3, fila 1
columna 1, fila 2 columna 2, fila 2 columna 3, fila 2

Aquí os pongo los anchos a los que corresponde cada número: (extraído de aquí)




CAMBIAR EL COLOR AL BORDE DE LA TABLA.

Para cambiar el color al borde deberemos insertar detrás del grosor que hemos establecido el color que queremos, añadiendo la etiqueta bordercolor. Si por ejemplo queremos que nuestro borde sea rojo, el código del ejemplo sería el siguiente:

<table border=5 bordercolor="red"><td>columna 1, fila 1</td>
<td>columna 2, fila 1</td><td>columna 3, fila 1</td>
<tr><td>columna 1, fila 2</td>
<td>columna 2, fila 2</td>
<td>columna 3, fila 2</td></table>


columna 1, fila 1 columna 2, fila 1columna 3, fila 1
columna 1, fila 2 columna 2, fila 2 columna 3, fila 2

Hemos puesto más grosor (el 5) y hemos cambiado el color del borde a rojo. Aquí os dejo los colores.

PONER UN COLOR DE FONDO A TODA LA TABLA


Si lo que queremos es que la tabla tenga otro color de fondo diferente al de la página, lo haremos poniendo detrás del grosor del borde, la etiqueta bgcolor="color que queramos".


En nuestro ejemplo sería:


<table border=5 bgcolor="orange"><td>columna 1, fila 1</td>
<td>columna 2, fila 1</td><td>columna 3, fila 1</td>
<tr><td>columna 1, fila 2</td>
<td>columna 2, fila 2</td>
<td>columna 3, fila 2</td></table>


Ponemos el fondo en color naranja y quedaría así:

columna 1, fila 1 columna 2, fila 1columna 3, fila 1
columna 1, fila 2 columna 2, fila 2 columna 3, fila 2


PONER COLOR DE FONDO SÓLO A ALGUNAS CELDAS

Si por ejemplo lo que queremos es poner cada fila de un color, la etiqueta que usaremos será la misma que antes bgcolor, pero en este caso lo colocaremos en el código detrás de <tr (antes de cerrar con >).

Nuestro código de ejemplo quedaría así:

<table border=5 bgcolor="orange"><td>columna 1, fila 1</td>
<td>columna 2, fila 1</td><td>columna 3, fila 1</td>
<tr bgcolor="yellow"><td>columna 1, fila 2</td>
<td>columna 2, fila 2</td>
<td>columna 3, fila 2</td></table>

columna 1, fila 1 columna 2, fila 1columna 3, fila 1
columna 1, fila 2 columna 2, fila 2 columna 3, fila 2


COMO PONER COMO FONDO DE LA TABLA UNA IMAGEN


Si lo que queremos es poner de fondo una imagen fija o un gif animado, lo haremos con la etiqueta background y la situaremos detrás de table. En nuestro ejemplo el código quedaría así:


<table background="URL DE LA IMAGEN" border=5><td>columna 1, fila 1</td>
<td>columna 2, fila 1</td><td>columna 3, fila 1</td>
<tr><td>columna 1, fila 2</td>
<td>columna 2, fila 2</td>
<td>columna 3, fila 2</td></table>


En mi caso he utilizado una imagen de www.muchografico.com.

columna 1, fila 1 columna 2, fila 1columna 3, fila 1
columna 1, fila 2 columna 2, fila 2 columna 3, fila 2

Si necesitáis más información sobre ésto podéis ir a ciudadblogger.

Espero que os sea útil. Un saludo