Cómo insertar tablas en Blogger paso a paso

¿Cómo insertar tablas en Blogger?

Una de las dudas más comunes de los usuarios de Blogger es como insertar tablas en sus entradas. Puesto que Blogger no tiene una función específica para tal fin, es necesario hacer esto insertando un código sencillo en la entrada en que queremos que aparezca. El siguiente procedimiento también puede emplearse para insertar tablas en WordPress de forma manual si no tienen instalado un plugin que permita hacer eso de modo más sencillo.

Por ejemplo, si queremos mostrar una tabla de 4 filas por 4 columnas el código sería el siguiente:

<table border="1" cellpadding="4"><tbody> <tr><td>Semana</td> <td>Día</td> <td>Hora</td> <td>Resultado</td></tr> <tr><td>1</td> <td>Lunes</td> <td>1:00</td> <td>Correcto</td></tr> <tr><td>2</td> <td>Martes</td> <td>2:00</td> <td>Correcto</td></tr> <tr><td>3</td> <td>Miercoles</td> <td>3:00</td> <td>Correcto</td></tr> </tbody></table>

Este código produce el siguiente resultado:

Semana	Día	Hora	Resultado
1	Lunes	1:00	Correcto
2	Martes	2:00	Correcto
3	Miercoles	3:00	Correcto

En este caso, las cuatro primeras palabras forman la primera fila, las otras cuatro forman la segunda fila y así sucesivamente. Para insertar una fila adicional solamente se debe agregar el siguiente código antes de </tbody></table>:

<tr><td>4</td> <td>Jueves</td> <td>4:00</td>  <td>Correcto</td></tr>

 

De esta manera, la tabla anterior quedaría de la siguiente manera:

Semana	Día	Hora	Resultado
1	Lunes	1:00	Correcto
2	Martes	2:00	Correcto
3	Miercoles	3:00	Correcto
4	Jueves	4:00	Correcto

 

Además, si deseamos aumentar el número de celdas por fila, podemos agregar la cantidad que deseamos añadiendo las palabras entre las etiquetas  <td> </td> que se ubican antes de cada </tr>.

Con estos códigos podemos crear una tabla sencilla como la mostrada anteriormente. Ahora, si queremos modificar sus atributos debemos emplear códigos adicionales. Por ejemplo, para aumentar el grosor del borde cambiamos el código  border="1" por un número más elevado como 2 o 3, pero si queremos eliminar el borde, simplemente usamos ponemos  border="0". De esta manera, si empleamos el atributo border="3" con la tabla 1 el código empleado y la apariencia de la tabla serían los siguientes:

<table border="3" cellpadding="4">

Semana	Día	Hora	Resultado
1	Lunes	1:00	Correcto
2	Martes	2:00	Correcto
3	Miercoles	3:00	Correcto

Si deseamos modificiar el color del borde de la tabla añadimos el atributo bordercolor="X" después de <table. En el lugar de la X escribimos el color que deseamos emplear como green o red. Para que la tabla 1 tenga un borde de color amarillo el código empleado es bordercolor="yellow".  El código empleado y la apariencia de la tabla serían los siguientes:

<table border="1" bordercolor="green" cellpadding="4"> <tbody><tr><td>Tabla con borde verde</td></tr> </tbody></table>

 

Semana	Día	Hora	Resultado
1	Lunes	1:00	Correcto
2	Martes	2:00	Correcto
3	Miercoles	3:00	Correcto

 

 

El atributo bgcolor="X" colocado después de <table permite agregar color de fondo. Por ejemplo, si queremos que la tabla 1 tenga un fondo de color azul agregamos bgcolor="blue".

<table border="1" bgcolor="blue" cellpadding="4"> <tbody><tr><td>Tabla con fondo amarillo</td></tr> </tbody></table>

 

  

Semana	Día	Hora	Resultado
1	Lunes	1:00	Correcto
2	Martes	2:00	Correcto
3	Miercoles	3:00	Correcto

Podemos emplear el atributo bgcolor para que las filas tengan colores distintos en lugar de que toda la tabla tenga el mismo color. Para esto, el atributo se coloca después de la etiqueta <tr en lugar de la etiqueta <table.

El atributo background permite poner una imagen de fondo en la tabla y se agrega después de <table. Se utiliza de la siguiente forma: background="URL de la imagen"

 https://internetrcc.com/2012/04/como-insertar-tablas-en-blogger

Read more...

Crear una tabla en Blogger fija

¿Alguna vez habéis intentado hacer una tabla en Blogger? Pues no se puede, al menos directamente. Blogger no tiene la opción de crear tablas (como sí podemos hacer en Word, por ejemplo). Pero... ¡que no cunda el pánico! Si necesitamos una tabla, podemos hacerla con HTML.

¿Para qué podéis necesitar una tabla en vuestro blog? Aparte de los usos "clasicos" de las tablas, como medio de presentación de datos, nos hará falta recurrir a una tabla si queremos hacer, por ejemplo, un menú visual, como el que estoy haciendo en la página de mi recetario completo. Evidentemente, es mucho más atractivo que una simple lista de links. Pinchando en cada imagen os lleva al post correspondiente donde está publicada la receta. Pues éste es un ejemplo de una tabla insertada en una página (que se hace exactamente igual que en un post).

Como las tablas se hacen con HTML, también podemos insertar una tabla mediante el gadget correspondiente en la opción de diseño de nuestro blog. 

El código HTML que necesitáis para generar una tabla es el siguiente:

<table align="left" bgcolor="#ffffff " border="0" bordercolor="#ffffff" cellpadding:"2" cellspacing="0" >

<tbody>

<tr>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
</tr>

<tr>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
<td><img src="URL de la imágen" height="120" width="120" /></td>
</tr>

</tbody></table>

Os cuento ahora qué es cada cosa, para que podáis personalizarlo y adaptarlo a vuestras necesidades.

• Lo que hay entre cada <tr>...</tr>: cada fila (en horizontal).
• Lo que hay entre cada <td>...</td>: cada una de las celdas que tiene esa fila.
• table align: alineación de la tabla: puede ser left, center, right (izquierda, centrada, derecha).
• bgcolor: el color de fondo de la tabla (yo lo tengo blanco).
• border: grosor del borde de la tabla, en píxeles.
• border color: color del borde (también lo tengo en blanco).
• cellpadding: espacio entre el borde y el contenido de cada celda, en píxeles.
• cellspacing: distancia entre las celdas de la tabla, en píxeles.
• height: alto de la imagen, en píxeles. Si no se establece este valor, saldrá la imagen en tamaño real.
• width: ancho de la imagen, en píxeles. Si no se establece este valor, saldrá la imagen en tamaño real.

Para poner texto en lugar de una imagen en una celda:

<td>lo que queráis escribir</td>

Para poner una imagen y también texto en una celda: como lo más frecuente es incluir las tablas en un post o página del blog, lo más rápido y fácil es hacer la tabla con imágenes y luego editarla en el modo "Redactar". Aquí podéis incluir un pie de foto a la imagen y crear enlaces.

Vale, ya sé cómo hacer una tabla y la tengo personalizada a mi gusto. ¿Cómo la inserto en un post o página de mi blog?

Lo mejor es redactar el código HTML de nuestra tabla en un documento de texto (Word o similar), para poder hacer las modificaciones que necesitemos sin trastear demasiado en el blog. Para ello, podéis copiar el código que os he facilitado y pegarlo en un documento de Word en blanco. Después, le hacéis las modificaciones que os convengan, según os he explicado.

Una vez esté el código a nuestro gusto, lo copiamos y nos vamos, en el editor de entradas (o páginas) de Blogger, a la opción de HTML. Aquí buscamos el lugar exacto en el que queramos que aparezca nuestra tabla y pegamos el código que traíamos copiado del documento de Word.

Si cambiamos a la vista de "Redactar" veremos nuestra tabla. Si no nos gusta como queda, podemos modificarla, repitiendo el proceso (las modificaciones mejor en Word, si lo hacéis directamente en el blog acabará dando fallos).

En la vista de "Redactar", como ya os he explicado, podemos insertar un pie de foto a las imágenes y/o añadir enlaces.

Yo no quiero la tabla en un post o página, sino en el diseño de mi blog.

Pues más fácil todavía. Generamos la tabla en un documento de Word, como ya os he explicado, y pegamos el código en un gadget de HTML, que encontraremos en esta ruta:

Escritorio del blog - Diseño - Añadir un gadget - HTML/Javascript

Le damos a "Guardar", colocamos el gadget que hemos creado en el lugar en el que queremos ver la tabla, le damos a "Guardar disposición" y comprobamos que está todo correcto. Si es así, genial. Si no, modificamos lo que haga falta hasta que quede a nuestro gusto.

Fuente: http://aminomegustacocinar.blogspot.com/2015/08/tutorial-como-crear-una-tabla-en-blogger.html

VER TAMBIÉN

• Insertar tablas en el blog (Apuntes sobre blogs)
• Insertar tablas en Blogger (ciudad blogger)
• Introducir tablas en Blogger. Tutorial
• Crea columnas responsive en blogger

Read more...

Insertar tablas en el blog

En el editor de los blogs de Blogger, no existe la posibilidad de insertar tablas automáticamente, pero esto se puede hacer fácilmente incorporando el código HTML necesario. Las tablas no son muy habituales en un blog, porque su contenido suele ser breve y sencillo. Tampoco resulta muy aconsejable su uso frecuente, y en muchas ocasiones la tabla puede sustituirse por otros procedimientos más sencillos para presentar el contenido. Sin embargo, puede haber algunos casos en que resulte aconsejable incluir el contenido en una tabla. Vamos a ver dos de esos casos.

1. Dos ejemplos prácticos para el uso de tablas en un blog

1. Introducir una lista de palabras en una tabla con varias columnas.
2. Mostrar varias imágenes pequeñas en una entrada, una al lado de otra.

En ambos casos el motivo principal para el uso de las tablas es que no aparezcan los elementos, palabras e imágenes, uno debajo de otro y haya así demasiado espacio vacío en la entrada del blog. Son dos casos sencillos en los que las tablas pueden mostrar su utilidad de la siguiente manera.

Para el primer ejemplo, tomo una entrada de un blog cuya autora me ha planteado el caso. Se trata de que sus alumnos practiquen la pronunciación de estas palabras con un widget muy original:

environment	culture	woman
women	scientist	scientific
psychological	hierarchy	serveillance
business	clothes	politician
comfortable	island	nuclear weapon
pollution	hypothesis	controversial

Para el segundo ejemplo, voy a poner las fotografías de varios personajes famosos de la actual Web. ¿Sabéis quiénes son? Si sabéis mucho de la Web 2.0, puede que os interese hacer los tests que publiqué en El tinglado, donde aparecen estos y otros personajes: La Web 2.0 en imágenes.

2. Cómo se hace esto con tablas

Supongo que os habré dejado con la boca abierta. Pero esto no es tan complicado como parece. Podemos hacerlo de dos formas. La primera es utilizando un editor de HTML. Uno muy usado es Kompozer, que es software libre y gratuito. Si lo instalamos en nuestro ordenador, podremos hacer una tabla automáticamente, y después copiamos el código fuente en la Edición de HTML del editor de Blogger. Yo tengo hecho un curso para trabajar con Kompozer, y en la lección de tablaspuede verse cómo incluir tablas con todas sus propiedades.

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%;">
<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>

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:

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 atributosdentro 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.

Las demás etiquetas son las siguientes:

• tbody: indica el cuerpo de la tabla.
• tr: crea una fila.
• td: crea una celda dentro de una fila.

La forma más práctica de crear una tabla es escribir el código de una fila para después copiarla y pegarla tantas veces como filas queramos que haya. Es mejor dejar el número de celdas igual dentro de cada fila para no liarnos con más código. Es decir, primero escribimos los códigos (de apertura y de cierre) de la tabla, con los atributos de ésta:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
</tbody>
</table>

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.

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">
<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>

Y el resultado es éste:

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">
<tbody>
<tr>
<td>Tabla izquierda</td>
</tr>
</tbody>
</table>
<table style="width: 49%;" border="1">
<tbody>
<tr>
<td>Tabla derecha</td>
</tr>
</tbody>
</table>

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.

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.

(Imagen del primer párrafo extraída de Flickr)

(Artículo actualizado el 11 de julio de 2011)

Publicado por Alejandro Valero

http://avalerofer.blogspot.com/2010/03/insertar-tablas-en-el-blog.html

Read more...