Nwlapcug.com


Come fare tre colonne in un Post di Blogger

Ci sono una manciata di motivi che si potrebbe desiderare di creare tre colonne nel tuo post sul blog---la maggior parte, in particolare se si stanno confrontando tre elementi. Tuttavia, editor di testo di Blogger non viene fornito con uno strumento che crea facilmente colonne; al contrario, sarà necessario utilizzare l'editor HTML e creare le colonne manualmente. Ci sono due modi per ottenere un effetto di tre colonne: utilizzo di una tabella con tre colonne, o la creazione di tre strati di div allineati in una riga.

Istruzioni

Utilizzo di una tabella

1

Iniziare il vostro tavolo. 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 celle con "spaziatura ="5"", cioè "< larghezza tavola = distanza tra le"100% "="5">".

2

Immettere "< tr >" sulla riga successiva per creare una nuova riga della tabella. Poiché si stanno creando tre colonne, è necessario solo una riga.

3

Tipo "< td >" per creare la prima colonna, ovvero una cella all'interno della tabella. Compila il contenuto del tuo cellulare e alla fine del contenuto chiudere la cella con "< /td >". Se le colonne avranno lunghezze diverse di contenuti, ti consigliamo di aggiungere "valign ="top"" per assicurare che ogni colonna inizia nella parte superiore della tabella, cioè "< td valign ="top">". È inoltre possibile specificare l'allineamento, come "align ="center"".

4

Avviare la colonna successiva con lo stesso tag come il primo e compilare il contenuto. Assicurarsi che si conclude con un "< /td >". Ripetere questa operazione per la terza colonna.

5

Nelle vicinanze la tabella riga dopo la fine dell'ultima colonna/cella con "< /tr >" e quindi terminare la tabella stessa con "< / tavolo >". È comunque possibile immettere contenuto sopra o sotto la tabella, se si sceglie così.

Utilizzo dei livelli di Div

6

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

7

Immettere una larghezza per il vostro livello. Come larghezza dipende interamente dalla sua estetica. Se si desidera tre colonne identiche per riempire lo spazio, utilizzando "Larghezza: 33%" può essere il msot efficiente, anche se non lascia lo spazio tra le colonne. Se si desidera spazio tra le colonne, si può sempre inferiore alla "Larghezza: 30%; padding: 5px; "per specificare un div che è del 30% la larghezza del tuo post, con 5 px di riempimento su ogni lato. L'apertura del tuo livello sarà ora simile "< div style =" float: sinistra; Larghezza: 30%; padding: 5px; " > ". Trovare il rapporto larghezza/spazio giusto può richiedere alcuni tentativi ed errori.

8

Compilare quello che vuoi nella tua prima colonna. Una volta completata, chiudere il livello 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 tag "Float: left" indica gli strati a seguire l'altro in linea. Assicurarsi che ogni livello termina con "< / div >" o Blogger si rifiuterà di salvare la pagina, citando rotto HTML.

Consigli & Avvertenze

  • È possibile disegnare i livelli individualmente con molti più elementi, tra cui sfondi, colori e bordi. Vedere risorse per una panoramica sulle funzionalità di base div.