Html - Tabelle con spiegazione dettagliata.

La creazione di tabelle in HTML (Provare la tabella HTML generatore)

Le tabelle HTML sono intese, a mio parere, come una delle lezioni importanti che si possono imparare.

Le tabelle sono una parte fondamentale del layout di pagina web, e si può fare così tanto con il disegno della pagina, se hai capito come funzionano.

Se vedi una pagina web con una navigazione di sinistra, di solito questa pagina viene creata utilizzando un grande tavolo con due colonne e senza frontiere.

La colonna di sinistra generalmente è fissata a un importo inferiore alla colonna di destra, in tal modo l'istituzione di navigazione a sinistra.

Tabella di base tag

I tre più importanti tag per le tabelle sono il tag table di apertura, <table>, il tag della riga della tabella e il tag dati della tabella: <tr> e <td> rispettivamente.

Il tag <tr> rappresenta una riga per la tabella.

Il tag <td> rappresenta una cella all'interno della riga.

Ora, con questo in mente, creiamo una semplice tabella:

<table>

<tr> <td>A</td> <td>B</td> <td>C</td> </tr>

<tr> <td>X</td> <td>Y</td> <td>Z</td> </tr>

</table>

E questo è ciò che il tavolo sarà simile pubblicato:

A Un B B C C

X X Y Y Z Z

Si noti che, guardando il codice, si può dire quante righe e colonne sono inclusi solo guardando il codice.

L'apertura di due tag <tr> indica due righe e i primi tre tag <td> su ogni riga rappresentano tre celle di dati (o tre colonne).

Aggiunta di bordi tabelle

L'aggiunta di una delle frontiere comporta semplicemente l'inserimento dell'attributo border al tag table di apertura.

Cambiare una tabella border color

Regolazione table cell padding e cell spacing

È possibile aumentare lo spazio all'interno delle celle della tabella e lo spazio tra le celle usando gli attributi cellpadding e cellspacing.

L'attributo cellspacing regola lo spazio tra le cellule e cellpadding regola lo spazio all'interno, circa, della cella.

<table border="2" cellspacing="10" cellpadding="3">

<tr><td>A</td> <td>B</td> <td>C</td> </tr>

<tr><td>X</td> <td>Y</td> <td>Z</td> </tr>

</table>

Questo è ciò che il tavolo sarà simile a ora...

A Un B B C C