tablass en Blogger
El código básico para insertar una tabla es el siguiente:
El resultado es este:
Nótese que las tres primeras palabras forman la primera fila, luego las otras tres forman la segunda fila y las tres últimas la tercera fila. Si deseas insertar una fila más agrega esta parte antes de </tbody></table>
Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras añadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr>
Ya teniendo claro esto, ahora podemos personalizar las tablas añadiendo unos atributos.
El borde de la tabla es el más delgado, si lo quieres más grueso cambia border="1" por un número más alto, si lo dejas en "0" se quedará sin borde.
Para cambiar el color del borde de la tabla añadimos después de <table el atributo
bordercolor="green" el color lo puedes cambiar, por ejemplo "red"
Si quieres usar un color de fondo en toda la tabla agrega bgcolor="yellow" después de <table. El color lo puedes cambiar.
Este efecto también lo puedes agregar sólo a las celdas que quieras para que cada fila tenga distintos colores. Para hacer eso se usa el mismo atributo, pero en vez de ponerlo después de <table lo pones después de la etiqueta <tr por ejemplo:
Este fue el código para hacer eso:
También puedes poner una imagen de fondo en la tabla, para lograr eso agrega background="URL de la imagen" después de <table. Yo he puesto una imagen animada (.gif) en el ejemplo.
<table border="1" cellpadding="4"><tbody>
<tr><td>Mesa</td>
<td>Silla</td>
<td>Cama</td></tr>
<tr><td>Carro</td>
<td>Barco</td>
<td>Avión</td></tr>
<tr><td>Lunes</td>
<td>Martes</td>
<td>Miércoles</td></tr>
</tbody></table>
El resultado es este:
| Mesa | Silla | Cama |
| Carro | Barco | Avión |
| Lunes | Martes | Miércoles |
Nótese que las tres primeras palabras forman la primera fila, luego las otras tres forman la segunda fila y las tres últimas la tercera fila. Si deseas insertar una fila más agrega esta parte antes de </tbody></table>
<tr><td>Palabra 1</td>
<td>Palabra 2</td>
<td>Palabra 3</td></tr>
Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras añadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr>
Ya teniendo claro esto, ahora podemos personalizar las tablas añadiendo unos atributos.
El borde de la tabla es el más delgado, si lo quieres más grueso cambia border="1" por un número más alto, si lo dejas en "0" se quedará sin borde.
| <table border="5" cellpadding="4"> <tbody><tr><td>Tabla con borde "5"</td></tr> </tbody></table> |
Para cambiar el color del borde de la tabla añadimos después de <table el atributo
bordercolor="green" el color lo puedes cambiar, por ejemplo "red"
| <table border="2" bordercolor="green" cellpadding="4"> <tbody><tr><td>Tabla con borde verde</td></tr> </tbody></table> |
Si quieres usar un color de fondo en toda la tabla agrega bgcolor="yellow" después de <table. El color lo puedes cambiar.
| <table border="2" bgcolor="yellow" cellpadding="4"> <tbody><tr><td>Tabla con fondo amarillo</td></tr> </tbody></table> |
Este efecto también lo puedes agregar sólo a las celdas que quieras para que cada fila tenga distintos colores. Para hacer eso se usa el mismo atributo, pero en vez de ponerlo después de <table lo pones después de la etiqueta <tr por ejemplo:
| Fila café | Fila café |
| Fila gris | Fila gris |
Este fue el código para hacer eso:
<table border="1" cellpadding="6">
<tbody><tr bgcolor="brown">
<td>Fila café</td><td>Fila café</td></tr>
<tr bgcolor="grey">
<td>Fila gris</td><td>Fila gris</td></tr>
</tbody></table>
También puedes poner una imagen de fondo en la tabla, para lograr eso agrega background="URL de la imagen" después de <table. Yo he puesto una imagen animada (.gif) en el ejemplo.
| Tabla con fondo de imagen | Tabla con fondo de imagen |
<table background="URL de la imagen" border="1" cellpadding="4">
<tbody><tr><td>Tabla con fondo de imagen</td>
<td>Tabla con fondo de imagen</td></tr>
</tbody></table>
otras fuentes : http://avalerofer.blogspot.com.es/2010/03/insertar-tablas-en-el-blog.html
Pero también podemos introducir a mano el código en el editor del blog. Vamos a ver una tabla sencilla de dos columna con dos filas:
<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">Una vez que hemos escrito este código en la parte de Edición de HTML del editor (véanse las pestañas superiores), se crea la siguiente tabla cuando volvemos a la parte de Redactar:
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
<tr><td>Texto o imagen 3</td><td>Texto o imagen 4</td></tr>
</tbody>
</table>
| Texto o imagen 1 | Texto o imagen 2 |
| Texto o imagen 3 | Texto o imagen 4 |
Ahora ya podemos insertar el texto donde queramos, y si insertamos imágenes, antes debemos poner el cursor del ratón dentro de la celda donde queramos que esté la imagen. Y podemos centrar los elementos dentro de las celdas con el botón de Alineación al centro de la barra de herramientas del editor, como el texto o imagen 3.
El código de la tabla tiene la etiqueta <table> de apertura y </table> de cierre en forma anidada, como el resto de las etiquetas. Y esta etiqueta de tabla tiene los siguientes atributos dentro de la etiqueta de apertura, que creo que son los mínimos que puede tener para conseguir una tabla decente.
- bgcolor: color de fondo, cuyos códigos se pueden tomar de esta página de Wikipedia sobre los colores en HTML.
- border: el tamaño del borde en píxeles, que se puede poner en cero si no queremos borde.
- cellpadding: el relleno dentro de la celda entre los bordes y el texto o las imágenes. Para ver cómo funciona esto, lo mejor es cambiar el número, que representa los píxeles.
- width: es la anchura de la tabla; en este caso, el 100% para que ocupe todo lo ancho del documento, pero también podemos ponerle un número de píxeles de ancho. Para esta anchura se utiliza la etiqueta style con código de hojas de estilo CSS; no es HTML.
- tbody: indica el cuerpo de la tabla.
- tr: crea una fila.
- td: crea una celda dentro de una fila.
<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">Y después pegamos en medio el código de cada fila tantas veces como filas queramos. En forma anidada, vemos el código de la fila en color naranja, y dentro de la fila, las dos celdas o columnas en color azul y verde.
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
</tbody>
</table>
Si quisiéramos que la primera fila abarcara más de una columna, por ejemplo tres, sólo debemos añadir el atributo colspan="3" dentro de la etiqueta td de la única celda de la primera fila; y la segunda fila tiene tres celdas. El código es éste:
<table style="width: 100%;" border="1">Y el resultado es éste:
<tbody>
<tr>
<td colspan="3" align="center">Fila grande</td>
</tr>
<tr>
<td style="width: 33%;">Celda</td>
<td style="width: 33%;">Celda</td>
<td style="width: 34%;">Celda</td>
</tr>
</tbody>
</table>
| Fila grande | ||
| Celda | Celda | Celda |
Hemos centrado el contenido de la fila grande con el código align="center", y hemos dado una anchura de 33%, 33% y 34% a las celdas de la segunda fila con el código style="width: 33%;".
En la Web tenéis mucha información sobre el lenguaje HTML, ese gran desconocido que siempre estamos utilizando en la Web sin darnos cuenta, y sin el cual nada de esto sería posible.
3. Ejemplo de dos tablas independientes
Un amigo anónimo me pide lo siguiente en los comentarios de este post: "quiero poner una tabla en mi blog pero quiero poner dos columnas independientes dentro una tabla, repito primero quiero hacer columnas y luego dividirlo en lo que necesite fila o columnas". Lo que quiere, en realidad, son dos tablas independientes, una al lado de la otra. Pero para que las tablas estén una al lado de otra, hay que usar un poco el lenguaje de las hojas de estilo CSS . Veamos el ejemplo final:| Tabla izquierda |
| Tabla derecha |
El código de este ejemplo es el siguiente:
<table style="width: 49%; float: left; margin-right: 2%;" border="1">Hemos construido dos tablas de una columna cada una, aunque a partir de ahora podemos añadir las filas y columnas que queramos en cada una de ellas. Cada columna tiene un 49% de anchura, y en medio hemos dejado un 2% de separación mediante el parámetro margin-right: 2% del atributo style, es decir, un margen de 2% a la derecha de la primera tabla.
<tbody>
<tr>
<td>Tabla izquierda</td>
</tr>
</tbody>
</table>
<table style="width: 49%;" border="1">
<tbody>
<tr>
<td>Tabla derecha</td>
</tr>
</tbody>
</table>
Es fundamental que la columna izquierda quede flotando a la izquierda, de manera que la derecha pueda colocarse a su lado; de lo contrario, se colocarían una columna debajo de otra. Y para ello escribimos float: left dentro del atributo style de la primera tabla.
