Nwlapcug.com


Come creare 3 colonne in HTML per una pagina Web

Come creare 3 colonne in HTML per una pagina Web


Le colonne consentono la personalizzazione del layout di una pagina Web. Essi visualizzare informazioni verticalmente e vi aiuterà a distinguere tra aree separate. In una pagina a tre colonne, utilizzare la prima colonna per la navigazione, la colonna centrale per il vostro contenuto principale e l'ultima colonna per ulteriori informazioni che si desidera promuovere. Hyper Text Markup Language consente di utilizzare i tag "DIV" o "Tabella" per creare colonne e specificare i bordi, dimensioni e sfondi delle cellule.

Istruzioni

Utilizzando div

1

Avviare un editor di testo, ad esempio Blocco note, WordPad o EditPad. Selezionare "File" e "Nuovo" dal menu per creare un nuovo documento.

2

Copiare usando le scorciatoie da tastiera "Ctrl" e "C" e quindi incollare - "Ctrl" e "V" - il seguente codice HTML nella tua pagina. Aggiunge tre colonne alla pagina:

< html >

< head >

< style >

<!...

Main {

Larghezza: 100%;

}

.Column1 () {

background-color: giallo;

padding: 2px;

margine-destra: 5px;

Larghezza: 150px;

float: left;

}

.Column2 () {

background-color: blu;

padding: 2px;

margine-destra: 5px;

Larghezza: 75px;

float: left;

}

.Column3 () {

background-color: red;

padding: 2px;

margine-destra: 5px;

Larghezza: 100px;

float: left;

}

-->

< / stile >

< / head >

< corpo >

< div id = "main" >

< div class = "Colonna1" > contenuto della prima colonna < / div >

< div class = "Colonna2" > contenuto della seconda colonna < / div >

< div class = "Colonna3" > contenuto della terza colonna < / div >

< / div >

< / body >

< / html >

3

Sostituire "larghezza" per ".column1", ".column2" e ".column3" con la larghezza che si desidera impostare. Sostituire il valore di "background-color" per ogni colonna con il colore di sfondo che si desidera applicare. Per creare colonne senza sfondo, rimuovere la riga contenente "background-color," come:

background-color: red;

Utilizzo delle tabelle

4

Selezionare "File" e "Nuovo" dal menu nell'editor di testo preferito.

5

Copiare e incollare il seguente codice HTML nella tua pagina per inserire tre colonne:

< html >

< corpo >

< table width = "100%" >

< tr >

< stile td = "width: 250px; background-color: giallo; text-align: top; " > contenuto della prima colonna < /td >

< stile td = "width: 250px; background-color: blu; text-align: top; " > contenuto della seconda colonna < /td >

< stile td = "width: 250px; background-color: red; text-align: top; " > contenuto della terza colonna < /td >

< /tr >

< / tabella >

< / body >

< / html >

6

Sostituire la larghezza con la larghezza di colonna che si desidera impostare. Sostituire il valore per "background-color" con lo sfondo che vuoi. Per rimuovere il colore di sfondo, rimuovere il codice, come:

background-color: giallo;