WMPortal
a- a+

Una semplice tabella

Creare una semplice tabella 2x2 è molto utile per comprendere i rudimenti della sintassi da usare per "costruirne" di più complesse, ed infatti è quello che faremo per introdurre l'argomento.

Questo è un esempio di semplice tabella 2x2:
 

1 2
3 4


Diamo un'occhiata alla sintassi che ho usato per fare questa tabella:

<table border=1>

<tr>
<td>1</td>
<td>2</td>

<tr>
<td>3</td>
<td>4</td>

</table>


 

        <TABLE>...</TABLE>

Come è facile intuire sono questi i TAGs basilari che specificano l'inizio e la fine di una tabella.
Come unico attributo di questa prima tabella vediamo il BORDER, al quale ho dato il valore 1 solo per renderla visibile, in seguito vedremo come inserirne altri che ci aiuteranno ad avere un maggior controllo della tabella stessa, lasciando poco o nulla al "caso".

        <TR>...</TR>

Sono i TAGs che specificano l'inizio e la fine di una singola riga.
A rigor di cronaca è bene puntualizzare che la chiusura del TAG non si è rivelata indispensabile, quindi possiamo tranquillamente omettere il </TR> ed affermare che il <TR> è il TAG che specifica l'inizio di una nuova riga.
Approfondendo ulteriormente possiamo dire che se intendiamo realizzare una tabella costituita da una serie di celle che giacciono sulla stessa riga possiamo anche omettere il <TR>.

        <TD>...</TD>

Dopo il <TABLE> e sua chiusura, sono i TAGs più importanti di una tabella in quanto tutto ciò che sarà visualizzato in una data cella deve necessariamente essere inserito tra questi due comandi.
Anche questo possiede dei comandi accessori che verranno trattati in seguito.



Quest'altra banale tabella 2x2 (identica alla precedente, a parte il "contenuto" della prima cella) ci fa vedere come...

 

...le celle si espandano
automaticamente,
se non specificato diversamente,
in funzione del loro contenuto...
2
3 4

...solo le dimensioni della cella 4, infatti, sono rimaste invariate, in quanto l'altezza della cella 2 è influenzata dalle quattro righe di testo contenute nella cella che la precede, e la larghezza della cella 3 (appartenendo alla medesima colonna), allo stesso modo, si modifica di conseguenza.

Anche se a prima vista non sembra, da questa seconda tabella di esempio possiamo estrapolare altre informazioni molto utili:

  • Si nota, infatti, chiaramente che se si vuole inserire del testo in una cella si deve nuovamente definire il tipo di carattere usando i consueti TAGs che ormai non dovrebbero aver segreti in quanto, se non specificato, il testo verrà visualizzato con il carattere predefinito del browser (in tutto il resto del documento infatti il carattere è "Arial" mentre in questo esempio il carattere visualizzato è il "Times New Roman").

  • Si nota, inoltre, che l'allineamento predefinito del contenuto delle celle è a sinistra, orizzontalmente, come appare chiaro nelle celle 1 e 3, e centrato, verticalmente, come risulta palese dalla cella 2.

 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Francesco
Hai dubbi su questo articolo?