Come fare tre colonne in un Blogger post

February 21

Ci sono una manciata di ragioni che si potrebbe desiderare di creare tre colonne nel tuo post sul blog --- soprattutto se si sta confrontando tre elementi. Tuttavia, editor di testo di Blogger non viene fornito con uno strumento che crea facilmente le colonne; invece, si dovrà utilizzare l'editor HTML e creare le colonne manualmente. Ci sono due modi per ottenere un effetto a tre colonne: utilizzando una tabella con tre colonne, o la creazione di tre strati div allineati in una fila.

istruzione

Utilizzando una tabella

1 Iniziate la vostra tavola. Se si desidera che la tabella per riempire la larghezza del tuo post sul blog, modificarlo come con "<table width =" 100% ">". È inoltre possibile specificare la spaziatura tra le celle con "spacing =" 5 "", vale a dire "<table width = spaziatura" 100% "=" 5 ">".

2 Inserire "<tr>" nella riga successiva per creare una nuova riga della tabella. Dal momento che si sta creando tre colonne, avrete bisogno di una sola riga.

3 Tipo "<td>" per creare la prima colonna, che è una cella all'interno della tabella. Riempire il contenuto della cella, e alla fine del contenuto chiudere la cella con "</ td>". Se le colonne saranno tutti hanno diverse lunghezze di contenuti, ti consigliamo di aggiungere "valign =" top "" per garantire che ogni colonna inizia nella parte superiore della tabella, vale a dire "<td valign =" top ">". È inoltre possibile specificare l'allineamento, come ad esempio "align =" center "".

4 Avviare la colonna successiva con la stessa etichetta, come la prima, e compilare il contenuto. Assicurarsi che termina con un "</ td>". Ripetere questo per la terza colonna.

5 Chiudere la riga della tabella dopo la fine dell'ultima colonna / cella con "</ tr>", e poi terminare la tabella stessa con "</ table>". È comunque possibile inserire contenuti sopra o sotto il tavolo, se lo desiderano.

Utilizzo dei livelli Div

6 Aprire un nuovo post sul tuo blog e passare sopra l'editor HTML. Crea il tuo primo strato con "<div style =" float: left; ">". È possibile modificare tutti gli attributi di questo strato all'interno del tag "stile": il tipo di carattere, colore, allineamento e la dimensione; la larghezza dello strato; e quanto spazio c'è intorno ad esso.

7 Inserire una larghezza per il vostro livello. Come ampio dipende interamente vostra estetica. Se si vuole tre colonne identiche a riempire lo spazio, utilizzando "width: 33%" potrebbe essere la msot efficiente, anche se non lascia spazio tra le colonne. Se si desidera che lo spazio tra le colonne, si può sempre abbassare a "width: 30%; padding: 5px;" per specificare un div che è il 30% della larghezza del tuo post, con 5 px di imbottitura su ogni lato. L'apertura del vostro livello sarebbe apparire come "<div style =" float: left; width: 30%; padding: 5px; ">". Trovare il giusto rapporto larghezza / spazio può prendere alcuni tentativi ed errori.

8 Compilare ciò che si vuole nella prima colonna. Una volta completato, chiudere lo strato con un "</ div>" tag alla fine del testo.

9 Utilizzare lo stesso tag di apertura per le altre due colonne, e ripetere il processo ogni volta. Il "float: left" tag indica i livelli di seguire l'altro in linea. Assicurarsi che ogni strato si conclude con "</ div>" o Blogger si rifiuterà di salvare la pagina, citando rotto HTML.

Consigli e avvertenze

  • È possibile lo stile i livelli individualmente con molti più elementi, tra cui sfondi, colori e bordi. Vedere le risorse per una panoramica sulle principali caratteristiche div.