HTML: Le tabelle (no rowspan e colspan)

Bene, oggi parleremo di TABELLE


La tabella è un elemento, per certi versi, simile agli elenchi puntati.

Il tag che la genera è <table>. E' un tag contenitore, di blocco.

Come sappiamo le tabelle hanno delle righe e delle colonne.

Per costruire una tabella con HTML bisogna costruire singolarmente ogni riga e, per ciascuna di queste, le celle interne.


Le righe della tabella è generata da un altro tag (contenitore): <tr>
L'altezza delle colonne corrisponde al numero di righe che creiamo.

Contiamo le celle azzurre: sono 9, come sono 9 le righe. le celle azzurre indicano l'altezza della colonna. Ecco dimostrato appunto che altezza delle colonne= numero di righe.

Però in HTML non esiste un tag per creare delle colonne, nonostante esista il tag per le righe, ma un modo c'è!

Guardiamo la tabella in alto. Se ci si fa caso, si può notare che il numero delle colonne corrisponde al numero di celle per ogni riga.

Quindi, per costruire tre colonne di altezza 5 celle, dobbiamo costruire 5 righe (secondo la prima regola) e, in ogni riga, dobbiamo mettere 3 celle.

Ecco, abbiamo appena costruito un'equazione....forse non sembra, ma scriviamo il procedimento diversamente:

 3 COLONNE DI ALTEZZA 5 CELLE=costruire 5 righe e, in ogni riga, mettere 3 celle.

Per costuire le colonne, quindi, ci servono le righe e le celle. Le righe sappiamo farle, ma le celle?

Ebbene, esiste un tag anche per quelle! Il tag è <td> (contenitore)







All'interno di <td> ci si deve inserire il contenuto della cella.

Le celle che andremo a costuire saranno figlie della riga in cui si trovano.

Infatti, tutte le celle (<td>), devono essere racchiuse dentro alla propria riga(<tr>).

I <td> azzurri, appartengono alla <tr> 1.

Per raggiungere, quindi, l'obiettivo delle 3 colonne alte 5 celle:
<table>

 <tr>
   <td>Prima colonna</td>
   <td>Seconda colonna</td>
   <td>Terza colonna</td>
 </tr>

  <tr>
   <td>Prima colonna</td>
   <td>Seconda colonna</td>
   <td>Terza colonna</td>
 </tr>

 <tr>
   <td>Prima colonna</td>
   <td>Seconda colonna</td>
   <td>Terza colonna</td>
 </tr>
 
 <tr>
   <td>Prima colonna</td>
   <td>Seconda colonna</td>
   <td>Terza colonna</td>
 </tr>
 
 <tr>
   <td>Prima colonna</td>
   <td>Seconda colonna</td>
   <td>Terza colonna</td>
 </tr>

</table>

Questo codice rispecchia le regole di prima:

Volevamo 5 celle di altezza: abbiamo 5 righe.

Volevamo 3 colonne: abbiamo 3 celle per ogni riga.

Così si fanno le tabelle.

Adesso però dobbiamo aggiungere altro sulle tabelle.

Intanto vediamo, per la prima volta, un po' di formattazione: il tag <th>.

Si usa nello stesso modo del tag <td> (celle).
La differenza è che il contenuto delle celle generate da <th> sarà centrato e in grassetto.

Per mettere un titolo alla tabella (cosa che si potrebbe anche fare con dei banalissimi testi) si usa il tag <caption>titolo</caption> (contenitore).
Il tag <caption> è figlio di <table>, quindi, va inserito al suo interno.

Per quanto riguarda le tabelle ci sarebbero due cose un po' più complicate (quelle escluse nel titolo) che, però, vedremo la prossima volta.


Noterete, poi, che una tabella così creata non avrà i bordi visibili. Per questo andremo a parlarne molto più avanti, ma, per adesso, teniamo buone le tabelle così. Alla prossima!