Struttura di base
Cominciamo innanzitutto con le definizioni di base:
con <table> si apre la costruzione della tabella
con <tr> si apre la definizione di una riga
con <td> si apre la definizione di una cella
Per chiudere ognuna delle definizioni aperte precedentemente, si usano rispettivamente le seguenti scritture: </table> </tr> </td>
La costruzione di una tabella comincia con il dichiarare la tabella con il tag <table>. Poi bisogna dichiarare l’inizio di una nuova riga conil tag <tr>.
Tra l'apertura e la chiusura della riga, si inseriscono tanti tag <td>
per quanto sono le colonne. Vediamo come è stata costruita la tabella all'inizo di questo articolo. In nero il codice html, in verde tra parentesi, i nostri commenti.
<table> (Inizio della tabella)
<tr> (Inizio della prima riga)
<td> (prima cella a sinistra)
</td> (fine della prima cella)
<td> (seconda cella)
</td> (seconda cella)
<td> (terza cella)
</td> (terza cella)
<td> (quarta cella)
</td> (quarta cella)
</tr> (fine della prima riga)
Le definizioni delle righe successive sono identiche e dopo la chiusura della terza riga, si chiude la tabella con il tag </table>
I contenuti che vogliamo inserire nella tabella devono essere messi tra i tag <td> </td> della cella che ci interessa.
Creare un bordo
Peer creare un bordo visibile, dobbiamo indicarne lo spessore. La dichiarazione di apertura tabella cambia in questo modo <table border= "1"> Maggiore sarà il numero, tanto più grande sarà lo spessore.
Impostare la larghezza della tabella
Il valore della larghezza può esssere espresso in due maniere diverse: in pixel e in percentuale. Nel primo caso la tabella sarà larga esattamente quanto i pixel indicati. Nel secondo caso sarà adattata, secondo la percentuale indicata, in funzione della pagina visualizzata. La dichiarazione iniziale si arrichisce in questo modo: <table width=”600″ border=”1″> oppure <table width=”50%” border=”1″>
Impostare la larghezza di una cella
La dichiarazione della cella cambia in questo modo: in pixel <td width=”160″> in percentuale <td width=”60%”>
Mettere la tabella al centro della pagina
In questo caso, nella dichiarazione della tabella ci deve essere l'attributo align scritto in questo modo: <table align=”center”> Se vogliamo che stia a sinistra usiamo al posto di center la parola left e se la vogliamo a destra, la parola right.
Impostare un colore di sfondo alla tabella
Nella dichiarazione iniziale ci deve essere l'attributo bgcolor scritto in questo modo: <table style=”background-color: red”> Similmente si può colorare una sola riga, una sola cella o più righe e più celle. La forma è la stessa, ma deve essere inserita nella riga o nella cella che interessa.
In questo articolo vi abbiamo dato gli strumenti iniziali per costruire una tabella. Nel prossimo approfondiremo l'argomento.
Alcuni ottimi libri sull'html che consigliamo
Click sull'immagine per i dettagli
Nessun commento:
Posta un commento
Facci sapere che cosa pensi di questa iniziativa.