sábado, 6 de marzo de 2010

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:

environmentculturewoman
womenscientistscientific
psychologicalhierarchyserveillance
business clothespolitician
comfortableislandnuclear weapon
pollutionhypothesiscontroversial

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 tablas puede 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 1Texto o imagen 2
Texto o imagen 3Texto 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.
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)

44 comentarios:

  1. Muy, muy práctica esta entrada, Alejandro. Y por supuesto, explicada con la claridad que acostumbras.
    Muchas gracias.

    ResponderEliminar
  2. Gracias, José Manuel. Ya veo que sigues muy activo con tu blog. Un saludo.

    ResponderEliminar
  3. profesor Alejandro me gustaria que me enviara a mi correo: arturo-mccarthur@hotmail.com ...un tutorial acerca de como unir varias partes de un video de youtube y que se vean en un blogs ininterrunpidamente...saludos y espero su sabia explicación

    ResponderEliminar
  4. Arturo, ya quisiera yo saber tanto como para poder ayudarle. Lo siento, pero eso que me pide no es mi fuerte.

    ResponderEliminar
  5. hola!como hago para que la tabla quede unida al texto q hay antes de ella, y no quede la tabla separada de este

    ResponderEliminar
  6. Gracias, Alejandro
    Super didáctico. Fuiste de mucha utilidad para mí, que con mis 54 años, no me asustan las nuevas tecnologías. Soy docente del Nivel Primario, he creado un blog para mi escuela y estoy en mis primeros pasos. Principiante en la creación de blog y fanática de la informática.
    Un abrazo
    Amelia

    ResponderEliminar
  7. Alejandro, el editor Kompozer, es en español?
    Amelia

    ResponderEliminar
  8. En la página de descargas tienes, en la parte inferior, los archivos de idiomas. Para instalarlo, sigue las instrucciones que doy en el documento de presentación de mi curso.

    ResponderEliminar
  9. arturo-mccarthur
    Pdorías unirlo usando el editor Sony Vegas :)
    Saludos

    ResponderEliminar
  10. Muy interesante y util lo de las tablas.
    Una pregunta mas , añadí a mi lista de blog 2 , entre ellos el tuyo pero no me di cuenta ( soy nueva y con poca facilidad para estas cosas )y en vez de hacerlo privado lo hice publico y ahora no puedo ni cambiarlo ni borrarme.

    Entro en administrar y no se activa nada entro en gogle reader y activo el quitar suscripción me dice que si, pero no es cierto ¿ me puedes decir que pasa ? ¿ como lo puedo quitar ? Gracias

    ResponderEliminar
  11. hola espero me puedas ayudar, tengo un problema quiero poner una tabla en mi blog pero quiero poner dos columnas independietes dentro una tabla, repito primero quiero hacer columnas y luego dividirlo en lo que necesite fila o columnas, cada columna tiene temas muy diferentes.
    he intentado invirtiendo el orden que das en el post pero el hace que se ocupe toda el espacio mandando la siguiente celda a la parte de abajo. gracias y espero que puedan ayudarme estare revisando tu blog continuamente

    ResponderEliminar
  12. Te he contestado en el apartado 3 de este post.

    ResponderEliminar
  13. Hola Buenas Tardes!.
    Me bajé el programita que recomendas (Kompozer) para re diseñar el blog ... el tema es que cuando voy a cargar la plantilla desde blogger me tira error. podrías explicarme como la tengo que publicar?. lo que hice fue hacer la página principal y las otras a donde me llevarían los links de la página principal ...

    ResponderEliminar
  14. Marialaura, lo que quieres hacer no se puede hacer en Blogger. Las plantillas de Blogger son complejas, y tienen otros elementos aparte del HTML. Lo que puedes hacer es modificar las plantillas que están hechas para Blogger.

    ResponderEliminar
  15. PARCE
    MUCHISIMAS GRACIAS POR SU AYUDA
    SE ME HIZO MUY FACIL CON SU EXPLICACION
    PORQUE EN DISEÑO WEB SI NO SE NADA
    LO OTRO QUE SE NECESITA ES EL CODIGO DE COLORES
    Y LISTO PARA FAJARNOS UNA GREAT PAGE

    LISTO MEN
    YA CASI TERMINO MI PAGINA,, CUANDO LA TERMINE
    CON GUSTO LA COMPARTIRE CON USTEDES
    Y TAMBIEN GUARDE EN WORD LOS CODIGOS QUE HE USADO

    POR SI LOS VUELVO A NECESITAR

    SALUDOS RAULFX

    ResponderEliminar
  16. PARA MARIALAURA RESPUESTA

    CONO NO SE NADA DE DISEÑO OPTE POR LO MAS FACIL
    PRIMERO con el ARISTEER QUE ES MUY BUENO PARA ESO PERO NO DEJA EXPORTAR LA PLANTILLA A BLOGGER
    OSEA QUE PERDIDO EL TRABAJO

    DESPUES USE DREAMWEAVER Y TRABAJE PRIMERO DESDEE LA SECCION CON DIBUJOS O DISEÑO OSEA SIN EL CODIGO QUE ES LO DIFICIL DE MANEJAR
    ESTE SI DEJA EXPORTAR EL CODIGO
    Y AL SUBIRLO A MI BLOG UPPPS SALE ERROR
    Y AMBOS PROGRAMAS CON LICENCIA
    ENTONCES DECIDE COJER EL VALDE DE LOS CODIGOS Y CON ESTA EXPLICACION DE ALEJANDRO SE ME HIZO REFACIL ,, YA VERAS COMO QUEDO MI PAGINA

    HAZ COMO DICE AHI

    COPIA EL CODIGO CON U NSOLO RENGLON
    Y DESPUES LE VAS AGREGANDO DE ACUERDO A TUS NECESIDADES
    raulcely@hotmail.com


    YA ME HAN FELICITADO MIS AMIGOS JEJEJEJE

    ResponderEliminar
  17. muchaaaaaas graciaaaas!!d verdad q me sirvio y de mucho!!!!ahora podre poner tablas en mi blog..d echo ya lo hice gracias a tu post..d veras.. t seguire...tu blog es muy interesante---x)

    ResponderEliminar
  18. Hola ale muchas gracias solo tengo otra consulta como hago para q al hacer click en la imagen no se habra otra pagina con la foto sino q se agrande en la misma pantalla saludos y desde ya muchas gracias.

    ResponderEliminar
  19. otra pregunta por q me queda tanto espacio entre el texto y el cuadro de imagenes mira http://thealmightys.blogspot.com/2011/06/mini-serie-de-street-fighter-de.html espero su respuesta nuevamente gracias.

    ResponderEliminar
  20. Me temo que lo de la imagen no se puede hacer en Blogger. Y el espacio que quedan entre el texto y las imágenes es debido a los códigos repetidos de línea que hay entre ambos. Bórralos y ya está.

    ResponderEliminar
  21. Hola Alejandro Valero!
    He aplicado su codigo para tablas y funciona de maravilla. Ahora mi duda es:

    ¿Cómo se puede hacer una tabla de 2 columnas, pero que la 1ª tenga 1 fila grande y la 2ª columna tenga 3 filas pequeñas que ocupen el mismo tamaño de la grande?

    Necesito poner una fotografía en la primera columna y otras 3 fotografias justo a la par, y no consigo ponerlas :(

    Blogger no deja ponerlas en ese orden así que opte por ponerla en tablas.
    Espero pueda ayudarme.

    Saludos y felicidades por el blog es fantástico! Estare visitandolo.
    Saludos de una nuevo seguidora!

    Muchas gracias.

    ResponderEliminar
  22. Gracias por tus palabras, Ane. He añadido la solución a tu duda en la parte final de la segunda sección de este artículo. Espero que te sirva. Un saludo.

    ResponderEliminar
  23. Hola Alejandro!
    Muchas gracias x todo :)

    ResponderEliminar
  24. Bueno Alejandro, este es el tercer comentario que te dejo (aunque en diferentes entradas) todo en relación al mismo tema. Con esta entrada acabo de completar lo que quería hacer, un índice para mis galerías de fotos sencillo pero claro y organizado. Al final terminé haciendo un churro de código entre el que me proporcionó picasa para cada album, y este que propusiste acá de una tabla de tres columnas. Tus explicaciones son muy claras! Muchas gracias por lo que haces!

    ResponderEliminar
  25. Me alegro de haberte servido de ayuda para tus propósitos. Un saludo.

    ResponderEliminar
  26. Buenas necesito una ayuda tengo un blogs
    Y tengo un problema no sé cómo poner las fotos una al lado del otra antes podía hacerlo pero ahora no se me serviría una ayuda

    ResponderEliminar
  27. Hola Alejandro, se aprende mucho con tus clases, ahora quiero hacer una cosa que no se hacer, es lo siguiente: quiero poner una serie de imagenes, pero en una colugna vertical, para poner debajo de cada imagen un comentario, podrías explicar en tu blog como se hace, gracias, saludos.

    ResponderEliminar
    Respuestas
    1. Eso se hace sin necesidad de tablas, simplemente poniendo una imagen debajo de otra y escribiendo debajo de ellas.

      Eliminar
  28. Muchas gracias por el aporte. Cómo puedo añadir snapshot a una imagen?

    ResponderEliminar
  29. Alejandro, excelente articulo.... como se hace para expandir una imagen dentro de una tabla teniendo estas diferentes alturas o anchos para que siempre se guien o por el mismo ancho o alto y lo demas sobre entones no tengamos espacios en blanco en cada celda y no se desformen las tablas. Espero se entienda mi pregunta ... te dejo un link de algo que a mi me ecanta y me gustaria hacerlo en mi blog.
    http://www.plataformaarquitectura.cl/2012/04/23/casa-elliott-ripper-christopher-polly-architect/ fijate que cuando cliqueas una imagen exta se expande en ancho a lo que el fotografo las saco y los casilleros esta definidos como espacio.

    Si me contestas esto te lo agradeceria enormemente.

    ResponderEliminar
  30. Alejandro me gustaria si podes que me respondas como hacer para hacer una tabla donde yo cargue imagenes con diferentes tamaños pero al verse las mismas es como que algunas quedan tal como las veo y las otras se recortan a determinada forma (sin desformarse)y quedan todas iguales entre ellas, pero al abrirlas estan en su ancho normal

    ResponderEliminar
  31. hola, ¿como podria cambiar el ancho de la primera tabla que explicas? style="width: 100%;"> que como dices es de hojas de codigo css y yo por mucho que le pongo 90, 80 o incluso 50%, el ancho de la tala no se inmuta.
    Lo quiero poner un pelin mas estrecho porque se me solapa encima de las columnas laterales de mi blog. Muchas gracias

    ResponderEliminar
    Respuestas
    1. El ancho al 100% tendría que funcionar bien con los estilos CSS, por eso mira si el código está bien escrito. En todo caso, siempre puedes poner un número de píxeles que ocupe el ancho de tu entrada, y eso se haría así, por ejemplo: style="550px".

      Eliminar
  32. Hola, soy una blogera muy muy joven, y no lo digo por la edad si no por inexperta.
    Mi pregunta es que me gustaría poner una serie de imagenes seguidas horizontalmente en mi blog de arte a modo de catálogo, pero la explicación de arriba a mi no me resulta fácil... habría algo mas fácil para hacer desde blogger, yo no he encontrado nada...
    Muchas gracias por tu trabajo.

    ResponderEliminar
    Respuestas
    1. La única forma de hacer eso es poner las imágenes una al lado de otra hasta que ocupen el ancho de tu entrada.

      Eliminar
  33. Hola Alejandro, buscando como hacer un índice para el blog me he encontrado con éste post muy completo, he empezado a hacerlo y está quedando muy bien ¡¡me gusta mucho!! pero, tengo un problemilla con el que espero me puedas ayudar
    Dicho índice lo quiero poner alfabéticamente con las miniaturas de imágenes de mis recetas de cocina, y el problema es que, a medida que vaya haciendo más recetas para seguir ese orden alfabético tendría que intercalar alguna imagen entre las otras y que las demás se desplazaran , no se si lo explico con claridad
    Muchas gracias de antemano, aunque es la primera vez que te escribo, desde hace tiempo visito tu blog
    Un saludo

    ResponderEliminar
    Respuestas
    1. No sé si entiendo bien lo que dices, pero puedes intercalar las imágenes y el texto entre los ítems de la lista que tienes sin ningún problema.

      Eliminar
  34. Hola Alejandro, la verdad es que no me explico nada bien, no me extraña que no lo entiendas, jejejeje, de todas maneras, muchas gracias por tu rápida contestación, voy a ponerme a ello y si tengo alguna duda, te preguntaré y espero explicarme con más claridad que ahora.
    Saludos

    ResponderEliminar
  35. Un vídeo para ver los pasos "in situ" sería lo mejor. Voy a ver si puedo introducir una tabla porque ya llevo varios días intentándolo y los datos salen juntos y sin mucho sentido. Dentro del menú de bloger sería más cómodo una pestaña con la inscripción tabla, nos ahorraríamos tiempo y sufrimiento.

    ResponderEliminar
    Respuestas
    1. En la Web puedes encontrar muchos titulares que te ayuden a insertar tablas.

      Eliminar
  36. Gracias Alejandro por compartir tus conocimientos....Me han sido de gran ayuda

    ResponderEliminar
  37. Hola Alejandro. Muy interesante y útil todo lo que publicas, pero mi falta de conocimiento no permite llegar a determinadas cosas. Mi problema es cómo insertar varias imágenes en una entrada, un detrás de la otra, para que ocupen menos espacio, pero estas imágenes deben ser enlaces con su página real. Me resulta muy complicado y casualmente me ha salido en una ocasión sin necesidad de insertar tabla, tal y como propones. ¿Hay alguna forma de ordenarlas directamente en las entradas del blog?.
    Otra pregunta: ¿Das cursos de formación para profesores en Madrid? Estoy muy interesada. Gracias.

    ResponderEliminar

Pido disculpas, pero no voy a poder atender los comentarios temporalmente.

Nota: solo los miembros de este blog pueden publicar comentarios.