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. Come l'industria ha maturato e studi significativi sono stati eseguiti sull'usabilità del contenuto vs azione dei consumatori, maggior parte dei risultati indicano che gli approcci più semplici da autori web sono più efficaci nel veicolare il messaggio del sito Web per l'utente finale. Per aiutare gli utenti a trovare ciò che vogliono vedere il sito Web, standard di progettazione sono evoluti all'utilizzo di due colonne in sito Web formati e generalmente non più di tre nella progettazione del sito Web corrente. Creazione di colonne in un sito Web consente all'autore di web rappresentare le relazioni tra i dati e può modificare ulteriormente la presentazione dei dati attraverso l'uso di fogli di calcolo CSS (CSS).

Istruzioni

Creazione di due colonne in una pagina Web

1

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

2

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

3

Avviare il codice HTML per la tabella con il tag < Table >. Dopo la tabella tag sarà la didascalia della tabella. La didascalia è inserita tra l'apertura < CAPTION > e chiusura < / CAPTION > tag HTML.
< TABLE >
Didascalia della tabella < CAPTION > viene inserito qui < / CAPTION >

4

Immettere le etichette di riga < id TR = "row1" >, seguito dal corrispondente tag di intestazione con l'etichetta che segue il tag < TH >.
Dopo il tag di intestazione, la cella tag sono elencati < TD > cella 1 < TD > Cell 2
< id TR = "row1" >
< TH > prima cella intestazione < TD > < TD > 1 cella 2
< id TR = "row2" >
Cella di intestazione < TD > < TH > secondo 3 < TD > cella 4
< id TR = "row3" >
Cella di intestazione < TD > < TH > terzo 5 < TD > cella 6

5

Una volta le voci di celle per la tabella è completa, chiuderanno la voce della tabella < / tabella >.
Verificare che i dati elencati nella tabella siano corretti.

Formattazione dei dati di tabella HTML con CSS

6

Allineare il testo a sinistra di ogni cella in grassetto con la seguente regola CSS:
TH {text-align: center; font-weight: bold}

7

Allineare il testo di 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 farà in modo che la riga superiore è circondata da un bordo nero di 3 pixel e le altre righe da un bordo blu 1-px.
TABLE {border-collapse: collapse}
TR #row1 {border-top: 3px solid black}
TR #row2 {border-top: 1px solid blue}
TR #row3 {border-top: 1px solid blue}

9

Inserire la didascalia della tabella sopra la tabella.
DIDASCALIA {didascalia-lato: top}

Consigli & Avvertenze

• Assicurarsi che i pezzi di informazioni importanti sono evidenziati a sinistra e superiore di una colonna, disegnare occhio del lettore. Inserire uno spazio vuoto tra proiettili e sub-proiettili.
• Creazione di un sito Web con più di tre colonne può ridurre usabilità e diminuire parole chiave di traffic\Highlight sito Web globale fornendo collegamenti ipertestuali ai relativi contenuti nel testo del sito Web.