Quando la navigazione web ha cominciato a diventare più diffusa ed è entrato nel mainstream commerciale alla fine del 1990 e primi anni 2000, era molto comune vedere tre e quattro colonne su un sito web. Poiché l'industria è maturato e studi significativi sono stati fatti sulla fruibilità dei contenuti contro l'azione dei consumatori, la maggior parte dei risultati indicano che gli approcci più semplici di autori web sono più efficaci nel trasmettere il messaggio sito attraverso al finale. Per aiutare gli utenti a trovare quello che vogliono vedere sul sito web, standard di progettazione si sono evoluti per utilizzare due colonne in formati di siti web e in genere non più di tre in progettazione di siti web corrente. Creazione di colonne in un sito web permette all'autore web per rappresentare relazioni tra i dati, e può modificare ulteriormente la presentazione dei dati attraverso l'uso dei fogli a cascata (CSS).

istruzione

La creazione di due colonne in una pagina Web

1 Aprire una pagina web esistente o nuovo modello di pagina web in un editor HTML o editor di testo.

2 Determinare il numero di colonne e righe desiderate per la tabella. In questo esempio, vengono visualizzate due colonne e quattro righe.

3 Avviare il codice HTML per la tabella con il tag <Table>. Dopo il tag table sarà la didascalia della tabella. La didascalia viene inserito tra l'apertura <CAPTION> e di chiusura </ caption> tag HTML.
<TABLE>
<CAPTION> Tabella didascalia viene inserito Qui </ caption>

4 Inserire i tag riga <tr id = ""> row1, seguiti dal corrispondente tag di intestazione con l'etichetta dopo la <TH> tag.
Dopo il tag di intestazione, i tag delle celle sono elencati <td> Cell 1 <td> Cell 2
<Tr id = "row1">
<TH> Primo Intestazione <td> Cell 1 <td> Cell 2
<Tr id = "row2">
<TH> Seconda Intestazione <TD> Cell 3 <TD> Cell 4
<Tr id = "Row3">
<TH> Terza intestazione <td> Cell 5 <td> Cell 6

5 Una volta che le voci di cella per la tavola sono, chiudere la voce della tabella </ table>.
Verificare che i dati elencati nella tabella è corretta.

La formattazione HTML tabella di dati con i CSS

6 Allinea il testo a fianco di ogni cella con un carattere in grassetto con la seguente regola CSS:
TH {text-align: center; font-weight: bold}

7 Allineare il testo della cella di intestazione sulla linea di base, con il testo centrato verticalmente in ogni cella.
TH {vertical-align: baseline}
TD {vertical-align: middle}

8 Aggiungere bordi al tavolo. Le seguenti regole garantiranno che la riga superiore è circondato da un bordo nero 3 pixel, e le altre righe di un blu bordo 1-px.
TABELLA {border-collapse: crollo}
TR # row1 {border-top: nero solido 3px}
TR # row2 {border-top: 1px blu solido}
TR # Row3 {border-top: 1px blu solido}

9 Posizionare la didascalia di tabella sopra la tabella.
Caption {caption-side: top}

Consigli e avvertenze

• Assicurarsi che i pezzi importanti di informazioni sono evidenziate a sinistra e in alto di una colonna, per disegnare lo spazio bianco eye.Place del lettore tra pallottole e sub-proiettili.
• Creazione di un sito web con più di tre colonne in grado di ridurre l'usabilità e la diminuzione complessiva del traffico sito \ highlight parole chiave, fornendo collegamenti ipertestuali a contenuti correlati nel testo del sito.