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;