Abbiamo visto nella lezione precedente come creare un layout usando dei box posizionati nella pagina. Prima di questa possibilità erano le tabelle il solo strumento usato in html per impaginare gli oggetti, praticamente venivano private del loro bordo e sfruttando la sola struttura venivano adoperate per impaginare. Così facendo si era quasi perduto lo scopo originale per il quale sono state inventate che è quello di presentare dati ben ordinati e tabulati, questo scopo è stato riscoperto e ripristinato con Xhtml.

Vediamo come si definiscono: <table> e relativo elemento (tag) di chiusura </table> questo elemento di definizione da solo servirebbe a poco, una tabella infatti è formata da caselle (celle) disposte su righe (orizzontali) e colonne (verticali), queste celle per essere create necessitano di altri elementi (tags), almeno due: <tr> e <td> che si trovano annidati all'interno di <table> e suddividono la tabella in righe e/o in colonne, entrambi hanno e richiedono il relativo elemento di chiusura </tr> e </td>.

Intere tabelle possono essere contenute a loro volta all'interno di celle di altre tabelle, da qui la definizione di "tabelle nidificate" una specie di scatole cinesi: una dentro l'altra per dare vita a tabelle piuttosto complesse.

Iniziamo con la struttura più semplice: una sola cella. Negli esempi faremo uso dell'attributo opzionale border che ne evidenzia il contorno perimetrale, lo useremo anche per le celle alle quali assegneremo un colore di sfondo che ci consentirà di vedere e capire meglio quanto andremo ad illustrare. Potremo assegnare l'attributo border direttamente all'elemento table ma visto che stiamo trattando html con style lo faremo assegnandolo con il foglio di style sul quale imposteremo anche il tipo di bordo, il colore e lo spessore. Questo il codice CSS:

table {
border: solid 2px #000000;
text-align: center;
}
td {
solid 1px #000000;
color: Black;
background: #F1EBAD;
}

Questo il codice html:

<table>
<tr>
<td> contenuto della tabella </td>
</tr>
</table>

Questo il risultato a video:

contenuto della tabella

Da notare che per <table> il bordo è definito da 2 pixel mentre per <td> da un solo pixel, questa scelta dipende soltanto dal gusto personale l'importante è sapere che i CSS permettono anche questo. Si noti inoltre che ogni elemento che riguarda la tabella necessita del relativo elemento (tag) di chiusura dove <tr>decreta l'inizio di una nuova riga, mentre <td> è la cella vera e propria, analogamente </td> decreta la fine della cella, mentre </tr> la fine della riga. Dovendo creare adesso una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elementi <td> all'interno di un solo <tr>

<table>
 <tr>
<td>
 cella sinistra </td><td> cella destra </td>
</tr>

</table>

Questo il risultato :

cella sinistra cella destra

Con la stessa logica è possibile aggiungere tutte le righe e le celle che ci servono, quindi:

<table>
<tr>
<td>
 cella alto sinistra </td><td> cella alto destra </td>
</tr>
<tr>
<td>
 cella basso sinistra </td><td> cella basso destra </td>
</tr>

</table>

Questo il risultato :

cella alto sinistra cella alto destra
cella basso sinistra cella basso destra

Oltre a <tr> e <td>, che sono gli elementi base di una tabella, esiste anche <th>che definisce il contenuto della intestazione della tabella; per essere adoperato necessita di un altro elemento <thead> (in cima) o <tfoot> (in fondo), praticamente la tabella viene suddivisa in due parti principali, proprio come succede con la pagina web dove c'è un head (testa) ed un body (corpo) anche in una tabella è possibile avere un <thead> ed un <tbody> se poi dovesse servire avere l'intestazione a fine tabella, invece che al suo inizio, sarà sufficiente adoperare <tfoot> (piede) al posto di <thead> (testa). Potrà sembrare complicato ma vi assicuro che è di una semplicità unica, un paio di esempi chiariranno tutto e meglio:

<table>
<thead>
<tr>
<th>titolo head sinistra</th><th>titolo head destra</th>
</tr>
</thead>
<tbody>

<tr>
<td> cella alto sinistra </td><td> cella alto destra </td>
</tr>
<tr>
<td> cella basso sinistra </td><td> cella basso destra </td>
</tr>
</tbody>
</table>

Ricordatevi che facendo uso di <thead> o di <tfoot> sarà necessario usare anche <tbody>.
Questo il risultato :

titolo head sinistra titolo head destra
cella body alto sinistra cella body alto destra
cella body basso sinistra cella body basso destra

La scritta in grassetto è una caratteristica dell'elemento <th> mentre inserendo <tfoot> al posto di <thead>:

<table>
<tfoot>
<tr>
<th>titolo foot sinistra</th><th>titolo foot destra</th>
</tr>
</tfoot>
<tbody>

<tr>
<td> cella alto sinistra </td><td> cella alto destra </td>
</tr>
<tr>
<td> cella basso sinistra </td><td> cella basso destra </td>
</tr>
</tbody>
</table>

Si avrà questo il risultato :

titolo foot sinistra titolo foot destra
cella body alto sinistra cella body alto destra
cella body basso sinistra cella body basso destra

Per avere una didascalia si adopera l'elemento <caption> con relativo elemento di chiusura </caption> che deve essere inserito immediatamente sotto l'elemento <table>. Serve per descrivere la natura della tabella, descrizione che risulterà essere esterna alla tabella stessa pur facendone parte integrante. E' possibile inserire anche summary come attributo dell'elemento table e sarà letto soltanto da quei dispositivi non visuali quali per esempio sintesi vocale e Braille.

<table summary"descrizione tabella">
<caption>Descrizione tabella </caption>
<thead>
<tr><th>titolo head sinistra</th><th>titolo head destra</th></tr>
</thead>
<tbody>
<tr><td> cella alto sinistra </td><td> cella alto destra </td>
</tr>
<tr>
<td> cella basso sinistra </td><td> cella basso destra </td>
</tr>
</tbody>
</table>

Questo il risultato:

Descrizione Tabella
titolo head sinistra titolo head destra
cella body alto sinistra cella body alto destra
cella body basso sinistra cella body basso destra

Come meccanismo direi che è abbastanza semplice data la sua logica e di conseguenza di facile comprensione. Una tabella avrà sempre una forma regolare, quadrata o rettangolare che sia, è possibile unire o fondere celle fra di loro sia in senso orizzontale che verticale (righe e colonne) per dare vita a tabelle irregolari. Per farlo si adoperano gli attributirowspan e colspan che servono rispettivamente per occupare più di una sola cella in senso orizzontale e più di una sola cella in senso verticale, come tali sono applicabili al solo elemento cella <td>.

Vediamo un esempio: supponendo di dover occupare con una sola cella più colonne della tabella regolare, adopereremo l'attributo colspan specificando il numero di colonne da occupare che nel nostro caso potrà essere al massimo 2. (ovvio, la nostra tabella in questo esempio è formata da 2 sole colonne):

<table>
<tr>
<td> cella alto sinistra </td><td> cella alto destra </td>
</tr>
<tr>
<td colspan="2"> Questa cella occupa lo spazio di 2 celle </td>
</tr>
</table>

Questo il risultato:

cella alto sinistra cella alto destra
Questa cella occupa lo spazio di 2 celle praticamente 2 colonne

Allo stesso identico modo usando l'attributo rowspan si potranno occupare più righe della tabella regolare, anche in questo caso il valore di rowspan potrà essere al massimo 2 (ovvio, la nostra tabella anche in questo esempio è formata da 2 sole  righe):

<table>
<tr>
<td rowspan="2"> questa cella occupa 2 righe </td><td> cella alto destra </td>
</tr>
<tr>
<td> cella basso destra </td>
</tr>
</table>

Questo il risultato :

questa cella occupa lo spazio di 2 celle praticamente 2 righe cella alto destra
cella basso destra

Combinando i vari attributi è possibile ottenere strutture ocomplesse ma anche ottimali, dipende soltanto da come vogliamo impaginare i nostri dati.

Nella prossima lezione vedremo altri attributi che è possibile usare con le tabelle.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

NON seguire questo link o sarai bannato dal sito!