Category Archives: Tablas

Como crear una Tabla en el blog?

Aprende lo Básico, Tablas

Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress…) o Página web.
Las tablas son muy utiles, si tienes imagenes y quieres colocarlas ordenadas, lo puedes hacer dentro de una tabla. Este código es super simple, y consta de 3 partes principales:

<table> (esto corresponde al comienzo de la tabla)
<tr> (esto corresponde al comienzo de la primera fila)
<td> (esto corresponde al comienzo del elemento de una columna)
</td> (esto corresponde al fin del elemento de una columna)
</tr> (esto corresponde al fin de la primera fila)
</table> (esto corresponde al fin de la tabla)

Entonces la estructura queda como muestra la siguiente figura:
crear_tabla_1.jpg

Aqui les dejo el código para esta misma tabla:

< View plain text >
HTML

  1. <table>
  2.  
  3. <tr>
  4. <td>Codigo del Objeto 1</td>
  5. <td>Codigo del Objeto 2</td>
  6. </tr>
  7.  
  8. <tr>
  9. <td>Codigo del Objeto 3</td>
  10. <td>Codigo del Objeto 4</td>
  11. </tr>
  12.  
  13. <tr>
  14. <td>Codigo del Objeto 5</td>
  15. <td>Codigo del Objeto 6</td>
  16. </tr>
  17.  
  18. </table>

Eso es todo, como ven el objeto 1 y 2 estan en la misma fila (<tr> </tr>) pero distinta columna (<td> </td>). Al igual que los objetos 3 y 4; y 5 y 6.

Espero que les quede claro.

patriram
Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Cuando inserto tablas en mis entradas, aparecen líneas adicionales en blanco. ¿Cómo puedo eliminar estos espacios vacíos?

Aprende lo Básico, Blogger, Classic Blogger, Funciones Menu, Plataformas, Tablas

Estos son los llamados saltos de linea.
Blogger cada vez que haces un salto de linea para cambiar de oración, agrega el código <br /> al final de cada una para visualizarlo. Si trabajas en el modo Redactar no te das cuenta de esto, pero si despues de realizar una entrada en el modo Redactar, te pasas al modo Edición de HTML entonces verás todo el código extra que agrega blogger para desplegar la entrada como tu quieres (agrega código por letras resaltadas en negro, cursiva, por centrar, por los vinculos..y por muchas mas cosas).
Puedes activar y desactivar esta opción en el menú Configuracion / Formato / Convertir Saltos de Línea como lo muestra la imagen (solo sigue los pasos):
table-example3.JPG

Supongamos que el código de tu tabla es el siguiente:

< View plain text >
HTML

  1. <table>
  2. <tr>
  3. <td>dato 1</td>
  4. <td>dato 2</td>
  5. </tr>
  6. </table>

Si tienes activada la opción para que aparescan Saltos de Linea, la tabla se vería mas o menos así (Los números del 1 al 4 no aparecen en la realidad es solo para demostrar la cantidad de espacios vacíos que verás por tener habilitada esta opción):
table-example1.gif

Si tienes desactivada la opción entonces no aparecerá ningún salto de línea ni al principio ni al final de la tabla, se vería mas o menos así:
table-example2.gif

Si quieres desactivar esta opción debes ir al panel de configuración de tu blog como aparece en la primera imagen, pero debes tener en cuenta que afectará a todas las entradas que hayas realizado antes.
Aunque, puedes volver a activarla, y todo volverá como estaba antes. Haz la prueba para ver como queda, y si te desordena demasiado los post tienes dos opciones:
1- dejarla activada
2- desactivarla y manualmente editar todos tus post para agregar los saltos. 🙁

Si la dejas desactivada entonces tendras que cambiar el codigo de las tablas (y de cualquier otro accesorio que tenga varias etiquetas), y no dejar espacios entre las etiquetas, tus tablas quedarían así:

< View plain text >
HTML

  1. <table><tr><td>dato 1</td><td>dato 2</td></tr></table>
patriram
Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.