April 2
le tabelle HTML consentono le pagine Web per visualizzare i dati in un formato facilmente leggibile. Essi sono relativamente semplici da configurare, ma possono essere fonte di confusione per un principiante perché mentre le righe di una tabella sono chiaramente definiti all'interno del codice, le colonne non sono. Non si preoccupi. Basta padroneggiare un paio di concetti di base, e sarete "colonne di scrittura" in pochissimo tempo.
Inizia impostando la struttura di base. tabelle HTML iniziano e terminano con <table> tag. Le informazioni all'interno di tabelle è organizzato per file, ciascuna delle quali è contrassegnata con <tr> tag (per "riga della tabella"). Le colonne sono creati dalla <td> ( "dati della tabella") i tag all'interno delle righe. Ogni set di tag <td> è chiamata una "cellula". Facciamo istituito un tavolo di base con i nomi e cognomi dei primi tre presidenti americani:
<Table>
<Tr> <td> No. </ Td> <td> Nome </ td> <td> Nome </ td> </ tr>
<Tr> <td> 1 </ td> <td> George </ td> <td> Washington </ td> </ tr>
<Tr> <td> 2 </ td> <td> John </ td> <td> Adams </ td> </ tr>
<Tr> <td> 3 </ td> <td> Thomas </ td> <td> Jefferson </ td> </ tr>
</ Table>
Si noti che questo tavolo non definisce tutte le colonne, a differenza il modo in cui righe sono definite con i tag <tr>. Il numero di colonne è definito dal numero di <td> cellule. Qui, ogni fila ha tre celle, quindi ci saranno tre colonne. hanno sempre lo stesso numero di celle in ogni riga, anche se non si dispone di un valore da mettere in una determinata cella; questo è come il browser mantiene le colonne allineate.
Regolare la dimensione della tabella, e le singole colonne al suo interno, con la proprietà "larghezza". È possibile definire la larghezza di una tabella o come un numero fisso di pixel o come percentuale della larghezza dell'elemento circostante. (Se non vi è alcun elemento che circonda, allora è la larghezza della finestra del browser.) Quindi, se si voleva vostro tavolo per essere la metà della larghezza della finestra, la prima linea sarebbe il seguente:
<Table width = "50%">
Se si voleva essere 650 pixel, che ci scrive:
<Table width = "650 px">
Se si specifica nessun larghezze, il browser imposterà il proprio utilizzando la lunghezza dei dati nelle celle.
È possibile impostare la larghezza delle colonne allo stesso modo - come un numero fisso di pixel o in percentuale. Fare questo con l'aggiunta di una proprietà di larghezza per le cellule nella riga superiore. Dal nostro esempio:
<Table width = "50%">
<Tr> <td width = "20%"> No. </ Td> <td width = "40%"> Nome </ td> <td width = "40%"> Cognome </ td> </ tr>
Si noti che queste percentuali sono relativi alla larghezza della tabella, non l'elemento circostante. Questa tabella assumerà la metà (50 per cento) della larghezza della finestra del browser. Le colonne saranno quindi 20, 40 e 40 per cento di quella larghezza. Se si trascura di impostare la larghezza di una colonna, il browser semplicemente assegnare il resto dello spazio utilizzabile; se più di una colonna hanno larghezze indefiniti, il browser dividerà il resto altrettanto. Se si sceglie di impostare le colonne da pixel, o fare in modo che tutte le colonne aggiungere fino a larghezza della tabella, o lasciare una colonna indefinito e lasciare che il browser impostato esso.
Unisci celle attraverso le colonne con la proprietà "colspan". Diciamo che, per qualche strana ragione, si voleva sostituire John Adams nel nostro esempio con "figlio prediletto del Massachusetts 'John Adams", e si voleva che abbracciano lo spazio sia per il "Nome" e "Cognome". Basta definire la sua cella "Nome" come che occupa due colonne:
<Tr> <td> 2 </ td> <td colspan = "2"> figlio prediletto del Massachusetts 'John Adams </ td> </ tr>