EH - Esposizione interattiva di xHTML etc. Indici: Pagine Panoramica Termini Problemi Esempi
Le tables nel linguaggio xHTML sono strutture di presentazione importanti, in quanto, oltre a consentire la visualizzazione delle tradizionali tabelle di dati, costituiscono strumenti versatili ed efficienti per la disposizione di testi ed immagini sullo schermo.
Le tables sono utilizzate per risolvere molti problemi inerenti l'aspetto della pagina: permettono di organizzare un testo su più colonne, di collocare adeguatamente gruppi di immagini, di collocare in modo preciso intestazioni, periodi ed immagini, di definire margini, ecc. .
Ogni tabella viene controllata con un elemento table e con alcuni suoi sottoelementi. Per venire incontro alle esigenze di impaginazione, il linguaggio xHTML nel corso della sua evoluzione ha adottato un numero sempre maggiore di opzioni per gli elementi table: dalla possibilità di definire i parametri (come il colore, le dimensioni e l'allineamento) che possono determinare l'aspetto di ogni singola cella, allo spessore dei bordi. Inoltre è possibile definire costrutti complessi con celle multiple e tabelle inserite in altre tabelle.
Cominciamo la presentazione delle tabelle con modello di base per queste strutture di presentazione che si riallaccia a quanto accennato nella rapida introduzione ad HTML. Successivamente introdurremo varie opzioni disponibili servendoci sistematicamente di esempi.
Un modello di base delle tabelle
Nel testo sorgente una tabella viene aperta con un tag della forma <table attributi> e viene chiusa dal tag coniugato </table>.
Il contenuto di un elemento table e` formata da una sequenza di righe organizzate in elementi della forma
<tr attributi> contenuto di una riga</tr>
Ogni riga e` costituita da una sequenza di celle, ciascuna delle quali organizzata in un elemento della forma
<td attributi> contenuto di una cella</td>
In tutte le righe si ha uno stesso numero di celle, ma il contenuto di ogni cella è ampiamente arbitrario: potrebbe essere un semplice dato, una frase, un discorso costituito da piu` paragrafi, un elemento immagine, un altro inserto, una lista o un'altra tabella. Le celle di una tabella possono essere molto diverse tra di loro, sia per il tipo di contenuto che per l'aspetto.
Tutti i tags iniziali possono presentare vari attributi. Il tag iniziale puo` avere la forma seguente:
<table border="estensione" cellspacing= "estensione" cellpadding="estensione">
Con il valore assegnato all'attributo border si determina lo spessore di un bordo che circonda la tabella; in particolare il valore uguale a zero implica bordi sono invisibili. Con l'attributo cellspacing si stabilisce che le zone rettangolari costituenti le celle siano separate dalla distanza assegnata come valore. Con l'attributo cellpadding si stabilisce la distanza minima tra i lati dei rettangoli costituenti le celle e le piu` ristrette zone rettangolari nelle quali si collocano i contenuti delle varie celle. Queste tre estensioni sono espresse come numeri di pixels.
La tabella che segue e` retta dal tag iniziale della forma
<table border="3" cellspacing="3" cellpadding="3">
| c | velocita` della luce nel vuoto | 3.9979 10 | 108 m/sec |
| e | carica elementare | 16021893 | 10-25 coulomb |
| h/ | costante di Planck | 6.6261 | 10-14 joule sec |
| me | massa a riposo dell'elettrone | 9.109 | 10-31 Kg |
| 1/a | inverso della costante di struttura fine | 137.03604 | |
| R | costante di Rydberg | 1.097373177 | 1.0973 m-1 |
Presentiamo altri attributi dell'elemento table
width="valore%" : stabilisce la larghezza della tabella in termini di percentuale della larghezza della finestra corrente.
height="valore%" : regola l'altezza della tabella in termini di percentuale della larghezza della finestra aperta, in modo da controllare la proporzione fra la sua altezza e la sua larghezza.
align="left | center | right" : allineamento orizzontale del contenuto di ogni cella della riga corrente o della singola cella corrente.
valign="top | middle | bottom" : allineamento verticale del contenuto di ogni cella della riga corrente o della singola cella corrente.
rowspan="valore" : definisce il numero di righe che la cella corrente, di tipo espanso, occupa.
colspan="valore" : definisce il numero di colonne che la cella corrente, di tipo espanso, occupa.
bgcolor= "valore esadecimale" | "codice colore" : definisce il colore di sfondo della cella.
nowrap : evita che il browser vada a capo automaticamente; l'autore puo` chiedere salti a capo mediante i tags singoli <br />.
Se si vuole dotare la tabella di una didascalia si usa un elemento della forma
<caption> didascalia </caption>
Per vedere esempi di queste istruzioni clicca qui