Viajar por Europa

abril 27, 2011

como incluir una tabla en el blog

Incluir  una tabla en el blog te abre nuevas posiubilidades para diseñar e incluir datos en las entradas.

Vamos a explicar como incluir una tabla en la entrada en el blog, para comparar datos, seguir una evolución en el tiempo de una o mas variables, etc., con ejemplos que incluyo a continuación. Solo tienes que escribir la tabla en la nueva entrada, para ello vas a nueva entrada, redactas el spot y en el lugar que quieras incluir la tabla entras en edición de HTML y  escribes la tabla en código HTML, con las columnas y filas que
 necesites. La redacción de cada celda de la tabla puede ser la misma, ya que una vez hayas definido la tabla, vuelves a la pestaña "redactar" y machacas lo escrito inicialmente por lo que te interese, incluso puedes centrar la leyenda o datos, llevarlos a la derecha o izquierda de cada celda de la tabla como normalmente haces al redactar el post. Lo que si tendrás que escribir en edición de HTML es las etiquetas necesarias para centrar la tabla.

Explicación detallada de como  definir una tabla en el blog, para incluirla en tus entradas.

a) Como escribir en HTML una tabla de una sola celda.

<table border="1">
<tbody>
<tr><td>celda única</td></tr>
</tbody></table>

celda única  he utilizado el  border con numero 3 en lugar de 1

b) Incluir una tabla en HTML con una fila y dos columnas: Hay que insertar tantas  etiquetas como columnas quieras <td> contenido </td> entre las etiquetas <tr> ....</tr>


<table border="2"><tbody>
<tr><td>Leyenda1</td><td>Leyenda2</td></tr>
</tbody></table>
</div>

Ejemplo:
Leyenda1 fila una columna 1 Leyenda2 fila 1 columna 2

c) Incluir una tabla con varias filas y una columna: Insertar <tr><td>leyenda</td></tr> entre <tbody>....</tbody>, tantas veces como filas queramos:

<table border="1"><tbody>
<tr><td>celda fila 1 columna 1</td></tr>
<tr><td>celda fila 2 columna 1</td></tr>
<tr><td>celda fila 3 columna 1</td></tr>
</tbody></table>

Ejemplo:
celda fila 1 columna 1
celda fila 2 columna 1
celda fila 3 columna 1

d) Como incluir una tabla con HTML de varias filas y columnas:


<table border="2"><tbody>
<tr><td>fila1columna1</td><td>fila1columna2</td></tr>
<tr><td>fila2columna1</td><td>fila2columna2</td></tr>
<tr><td>fila3columna1</td><td>fila3columna2</td></tr>
<tr><td>fila4columna1</td><td>fila4columna2</td></tr>
</tbody></table>


Ejemplo:
fila1columna1fila1columna2
fila2columna1fila2columna2
fila3columna1fila3columna2
fila4columna1fila4columna2

Si quieres que la tabla centrada en la entrada o post del blog: <div style="text-align: center;"> antes de escribir la tabla en html y he cerrado la etiqueta </div> al final del código html

Ejemplo:

fila1columna1fila1columna2
fila2columna1fila2columna2
fila3columna1fila3columna2
fila4columna1fila4columna2

Ejemplo de tabla para el blog con una variante: Fondo de color en este caso en la primera fila:

<div style="text-align: center;">
<table border="1"><tbody>
<tr><td bgcolor="#000fff"><span style="color: white;">fila1columna1</span></td>
<td bgcolor="#000fff"><span style="color: white;">fila1columna2</span></td></tr>
<tr><td>fila2columna1</td><td>fila2columna2</td></tr>
<tr><td>fila3columna1</td><td>fila3columna2</td></tr>
<tr><td>fila4columna1</td><td>fila4columna2</td></tr>
</tbody></table>
</div>

fila1columna1fila1columna2
fila2columna1fila2columna2
fila3columna1fila3columna2
fila4columna1fila4columna2

Para la mayoria de los bloggers que lean éste post quizás no les he descubierto nada, incluso lo podrian ampliar, pero hay otros muchos que quizás les sea útil ésta explicación sobre las tablas en HTML y su uso en las entradas de sus blogs.

No hay comentarios:

Publicar un comentario

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.