Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

Le Tabelle: la loro struttura.

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 sinistratitolo 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 sinistratitolo 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 sinistratitolo 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 attributi: rowspan 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.



Andrea Bianchi