Cómo hacer tres columnas en un post de Blogger

Escrito por ashley poland Google | Traducido por laura gonzalez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer tres columnas en un post de Blogger
Hay dos maneras de lograr un efecto de tres columnas: el uso de una tabla con tres columnas, o la creación de tres capas div alineadas en una fila. (Thinkstock Images/Comstock/Getty Images)

Hay un puñado de razones por las que podrías desear crear tres columnas en la entrada del blog; sobre todo si estás comparando tres puntos. Sin embargo, el editor del blog no viene con una herramienta que cree fácilmente columnas, sino que tendrás que usar el editor de HTML para crearlas manualmente. Hay dos maneras de lograr un efecto de tres columnas: el uso de una tabla con tres columnas, o la creación de tres capas div alineadas en una fila.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

    Usar una tabla

  1. 1

    Comienza tu tabla. Si deseas que la tabla rellene la anchura de la entrada del blog, modifícalo con "<table width="100%">". También puedes especificar el espaciado entre celdas con "espacio =" 5 "", por ejemplo "<table width="100%" spacing="5">".

  2. 2

    Ingresa "<tr>" en la próxima línea para crear una nueva fila en la tabla. Dado que estás creando tres columnas, sólo necesitarás una fila.

  3. 3

    Escribe "<td>" para crear la primera columna, que es una celda de la tabla. Rellena el contenido de la celda, y al final del contenido cierra la celda con "</ td>". Si todas tus columnas tendrán diferentes longitudes de contenido, podrás agregar "valign="top"" para asegurarte de que cada columna empiece en la parte superior de la tabla, es decir, "<td valign="top">". También puedes especificar la alineación, tal como "align ="center"".

  4. 4

    Comienza la siguiente columna con la misma etiqueta que la primera, y rellena el contenido. Asegúrate de que se termine con un "</td>". Repite esto para la tercera columna.

  5. 5

    Cierre la fila de la tabla después de la última columna/celda con "</tr>" y luego termina con la propia tabla "</table>". Todavía puedes ingresar contenido ya sea por encima o por debajo de la mesa, si así lo deseas.

    Uso de capas Div

  1. 1

    Abre una nueva entrada en tu blog y cambia el editor a HTML. Crea tu primera capa con "<div style="float:left;">". Puedes cambiar los atributos de esta capa en el "estilo" tag: tipo de fuente, color, alineación y tamaño, la anchura de la capa, y la cantidad de espacio que hay a su alrededor.

  2. 2

    Introduce el ancho de la capa. Esta dependerá enteramente de tu estética. Si deseas tres columnas idénticas para llenar el espacio, usar "anchura: 33%" puede ser lo más eficiente, aunque no deja espacio entre las columnas. Si quieres espacio entre las columnas, siempre puedes bajarlo a "width:30%; padding:5px;" para especificar un div que es el 30% de la anchura de tu entrada, con 5 píxeles de relleno en cada lado. La apertura de tu capa ahora se vería como "<div style="float: left; width:30%; padding: 5px;">". Encontrar el cociente ancho/espacio puede tomar un poco de ensayo y error.

  3. 3

    Rellena lo que quieras en tu primera columna. Una vez completa, cierra la capa con una etiqueta "</div>" al final del texto.

  4. 4

    Utiliza la misma etiqueta de apertura para las otras dos columnas, y repite el proceso cada vez. La etiqueta "float:left" dirá que las capas se siguen unas a otras en línea. Asegúrate de que todas las capas terminen con "</div>" o Blogger se negará a guardar la página, citando un HTML roto.

Consejos y advertencias

  • Puedes darle estilo las capas individualmente con muchos más elementos, incluyendo fondos, colores y bordes. Ve los recursos para obtener información general sobre las características básicas div.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles