jueves, 27 de septiembre de 2012

Manejo de tablas en las entradas de Blogger

Ejemplo:

Rojo Amarillo Azul
Rojo Rojo Naranja Púrupura
Amarillo Naranja Amarillo Verde
Azul Púrpura Verde Azul

Simplemente en la vista HTML de la entrada se digita el código respectivo, así:

<table border="1" cellpadding="4"><tbody>
<tr bgcolor="pink"><th></th><th>Rojo</th>
<th>Amarillo</th>
<th>Azul</th></tr>
<tr><th>Rojo</th>
<td>Rojo</td>
<td>Naranja</td>
<td>Púrupura</td></tr>
<tr><th>Amarillo</th>
<td>Naranja</td>
<td>Amarillo</td>
<td>Verde</td></tr>
<tr><th>Azul</th>
<td>Púrpura</td>
<td>Verde</td>
<td>Azul</td></tr>
</tbody></table>

Obviamente, en vez de colores, podemos incluir otras palabras, frases, párrafos, imágenes, etc. Si queremos que la tabla no tenga borde quitamos el atributo "border" de la etiqueta <table>. 

Si queremos que la tabla se adapte al ancho del blog utilizamos una orden CSS en la etiqueta <table> que es: style="width:100%;", además le vamos a dar color al borde con: bordercolor"blue" y a aumentar su tamaño, así:

<table style="width:100%;" bordercolor="blue" border="5" cellpadding="4"><tbody>

La tabla quedaría así:

Rojo Amarillo Azul
Rojo Rojo Naranja Púrupura
Amarillo Naranja Amarillo Verde
Azul Púrpura Verde Azul

O se puede insertar una imagen como fondo de tabla arreglando la etiqueta <table> así (observar que no importa el orden de los atributos):

<table background="url de la imagen" border="5" cellpadding="5" style="width:100%;"><tbody>

Rojo Amarillo Azul
Rojo Rojo Naranja Púrupura
Amarillo Naranja Amarillo Verde
Azul Púrpura Verde Azul


No hay comentarios:

Publicar un comentario