Cómo hacer tres columnas en un Blogger Publica

Hay un puñado de razones por las que es posible que desee crear tres columnas en la entrada del blog --- sobre todo si se está comparando tres elementos. Sin embargo, editor de texto de Blogger no viene con una herramienta que crea fácilmente columnas; En su lugar, tendrá que usar el editor HTML y crear sus columnas 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 alineados en una fila.

Instrucciones

Utilización de una tabla

1 Comience su mesa. Si desea que la tabla de ajuste a la anchura de la entrada del blog, modificarlo si es con "<table width =" 100% ">". También puede especificar el espaciado entre celdas con "separación =" 5 "", es decir, "<table width =" 100% "espaciamiento =" 5 ">".

2 Enter "<tr>" en la línea siguiente para crear una nueva fila de la tabla. Puesto que usted está creando tres columnas, lo único que necesita una fila.

3 Tipo "<td>" para crear la primera columna, que es una célula dentro de la tabla. Rellene el contenido de su celda, y al final del contenido cerrar la cubeta con "</ td>". Si sus columnas todos tendrán diferentes longitudes de contenido, usted querrá añadir "valign =" top "" para asegurar que cada columna empieza en la parte superior de la tabla, es decir, "<td valign =" top ">". También puede especificar la alineación, tales como "align =" center "".

4 Iniciar la siguiente columna con la misma etiqueta como la primera, y rellenar el contenido. Asegúrese de que se termina con un "</ td>". Repita este procedimiento para la tercera columna.

5 Cierre la fila de la tabla después del final de la última columna / celda con "</ tr>", y luego terminar con la propia tabla "</ table>". Todavía se puede entrar en el contenido, ya sea por encima o por debajo de la mesa, si así lo desea.

Uso de las capas Div

6 Abrir una nueva entrada en su blog y cambiar el editor de HTML a. Creación de la primera capa con "<div style =" float: left; ">". Puede cambiar los atributos de esta capa dentro de la etiqueta "estilo": el tipo de letra, color, alineación y tamaño; la anchura de la capa; y la cantidad de espacio que hay a su alrededor.

7 Introduzca una anchura de su capa. ¿Qué tan ancha depende enteramente de su estética. Si desea tres columnas idénticas para llenar el espacio, el uso de "anchura: 33%" puede ser el msot eficiente, aunque no deja espacio entre columnas. Si quieres espacio entre columnas, siempre se puede bajarlo a "width: 30%; padding: 5px;" para especificar un div que es el 30% de la anchura de su puesto, con 5 píxeles de relleno en cada lado. La apertura de la capa tendrá ahora un aspecto como "<div style =" float: left; anchura: 30%; padding: 5px; ">". Encontrar la relación de anchura derecha / espacio puede tomar un poco de ensayo y error.

8 Rellene lo que quiere en su primera columna. Una vez terminado, cierre la capa con una etiqueta "</ div>" al final del texto.

9 Utilizar la misma etiqueta de apertura para las otras dos columnas, y repetir el proceso cada vez. El "float: left" etiqueta le dice que las capas se siguen unos a otros en la fila. Asegúrese de que todas las capas termina con "</ div>" o Blogger se negará a guardar la página, citando HTML roto.

Consejos y advertencias

• Puede estilo de las capas de forma individual con muchos más elementos, incluidos fondos, colores y bordes. Ver recursos para obtener información general sobre las características básicas div.