Tabelle HTML consentono pagine Web visualizzare dati in un formato facilmente leggibile. Essi sono relativamente semplici da impostare, ma possono essere fonte di confusione per un principiante perché mentre le righe di una tabella sono chiaramente definite all'interno del codice, le colonne non sono. Non preoccuparti. Master solo pochi concetti di base e sarete "scrittura colonne" in nessun tempo.
Elementi di base
Iniziare configurando il quadro di base. Tabelle HTML iniziano e terminano con tag < table >. Le informazioni all'interno delle tabelle sono organizzate in righe, ognuna delle quali è contrassegnato con < tr > Tag (per "table row"). Le colonne vengono create dai tag < td > ("dati della tabella") all'interno delle righe. Ogni set di tag < td > viene chiamato una "cella". Consente di impostare una tabella di base con il nome e cognome dei primi tre presidenti americani:
< table >
nome < tr >< td > n. < /td >< td > < /td >< td > < /td >< /tr > nome
< tr >< td > 1 < /td >< td > < /td >< td > George Washington < /td >< /tr >
< tr >< td > 2 < /td >< td > < /td >< td > John Adams < /td >< /tr >
< tr >< td > 3 < /td >< td > < /td >< td > Thomas Jefferson < /td >< /tr >
< / tabella >
Si noti che questa tabella non definisce tutte le colonne, a differenza del modo le righe vengono definite con il tag < tr >. Il numero di colonne è definito dal numero di cellule < td >. Qui, ogni riga ha tre celle, quindi ci saranno tre colonne. Hanno sempre lo stesso numero di celle in ogni riga, anche se non hai un valore da inserire in una cella particolare; Questo è come il browser mantiene le colonne allineate.
Impostare la larghezza delle
Regolare le dimensioni della tabella e le singole colonne all'interno di esso, con la proprietà "width". È possibile definire la larghezza di una tabella come un numero fisso di pixel o come percentuale della larghezza dell'elemento circostante. (Se non esiste alcun elemento circostante, allora è la larghezza della finestra del browser). Così, se si voleva il tuo tavolo per essere metà della larghezza della finestra, la prima linea sarebbe leggere:
< table width = "50%" >
Se si voleva che fosse 650 pixel, è necessario scrivere:
< table width = "650px" >
Se non si specificano larghezze, il browser impostato proprio utilizzando la lunghezza dei dati nelle celle.
Si imposta la larghezza delle colonne nello stesso modo..--come un numero fisso di pixel o come percentuale. Eseguire questa operazione aggiungendo una proprietà width per le celle nella riga superiore. Dal nostro esempio:
< table width = "50%" >
< tr >< larghezza td = "20%" > n. < /td >< larghezza td = "40%" > nome < /td >< larghezza td = "40%" > cognome < /td >< /tr >
Notare che queste percentuali sono relativo alla larghezza della tabella, non l'elemento circostante. Questa tavola avrà la metà (50 per cento) della larghezza della finestra del browser. Le colonne saranno quindi 20, 40 e 40 per cento di tale larghezza. Se si trascura impostare la larghezza di una colonna, semplicemente il browser si assegnerà il resto dello spazio utilizzabile; Se più di una colonna definita larghezze, il browser verrà diviso equamente il resto. Se si sceglie di impostare le colonne di pixel, assicurarsi che tutte le colonne aggiungere fino alla larghezza della tabella, o lasciare una colonna undefined e lasciare che il browser impostato.
Colspans
Unire le celle nelle colonne con la proprietà "colspan". Diciamo che, per qualche strana ragione, si voleva sostituire John Adams nel nostro esempio con "Figlio prediletto John Adams di Massachusetts'", e si voleva che estendono lo spazio per "First Name" e "Cognome". Semplicemente definire sua cella "Nome" che attraversa due colonne:
< tr >< td > < /td >< 2 td colspan = "2" > figlio prediletto di Massachusetts' John Adams < /td >< /tr >