Tabelle e HTML:
Come abbiamo visto il pc legge le informazioni da una pagina web a cascata, ossia dalla prima all'ultima in ordine di altezza.
Visto questo abbiamo già capito che è molto difficile inserire scritte o immagini dove vogliamo, per questo ci vengono in aiuto le tabelle.
Nel linguaggio HTML non dobbiamo immaginare le tabelle come nell'usuale pensiero matematico, ma invece come un complesso di quadrati o rettangoli dove poter inserire oggetti o scritte.
Questo concetto che per anni ha aiutato i webmaster nella costruzione delle pagine HTML è stato ribaltato completamente con l'uscita ed il sempre più numeroso utilizzo del linguaggio XHTML, dove in pratica le tabelle sono utilizzate SOLO per mostrare dati matematici, liste ecc. ma non sono mai utilizzate per l'impaginazione, che è lasciata ad un complesso e misto uso di css e tag DIV.
I tag per scrivere una tabella sono i seguenti:
<table border="2">
<tr>
<td>
contenuto della tabella
</td>
</tr>
</table>
<tr>
<td>
contenuto della tabella
</td>
</tr>
</table>
In pratica otteniamo:
| contenuto della tabella |
Il tag table indica che stiamo per aprire/chiudere una tabella.
Il tag tr indica che stiamo per aprire/chiudere una riga.
Il tag td indica che stiamo per aprire/chiudere una casella (cella) della colonna.
Vediamo alcuni esempi:
|
<table border="2"> <tr> <td> tabella con </td> <td> due colonne </td> </tr> </table>
|
<table border="2"> <tr> <td> tabella con </td> </tr> <tr> <td> due righe </td> </tr> </table>
|
<table border="2"> <tr> <td> tabella </td> <td> con due </td> </tr> <tr> <td> colonne e </td> <td> due righe </td> </tr> </table>
|
IMPORTANTE DA NOTARE L'ANNIDAMENTO FRA TABELLE!!! Potrete notare che per far vedere i tre esempi abbiamo costruito una tabella più grande che li contiene. Si può fare aprendo e chiudendo una tabella all'interno di un'altra. Nel caso si dimentichi di chiudere o aprire un tag all'interno di un gruppo di tabelle si potrà riscontrare l'errore a video (il layout risulterà tutto spostato).
rowspan e colspan:
Adesso dobbiamo inserire due attributi essenziali: rowspan e colspanCon questi due attributi possiamo costruire tabelle con colonne o righe multiple, in pratica colonne o righe che possono occupare più spazi (più colonne o più righe) contemporaneamente. Capirete meglio dagli esempi:
<table border="1">
<tr>
<td>
prima colonna
</td>
<td>
seconda colonna
</td>
</tr>
<tr>
<td colspan="2">
colspan="2", ossia della larghezza di due colonne </td>
</tr>
</table>
In pratica:<tr>
<td>
prima colonna
</td>
<td>
seconda colonna
</td>
</tr>
<tr>
<td colspan="2">
colspan="2", ossia della larghezza di due colonne </td>
</tr>
</table>
| prima colonna | seconda colonna |
| colspan="2", ossia della larghezza di due colonne | |
<table border="1">
<tr>
<td rowspan="2">
rowspan="2" ossia dell'altezza di 2 righe
</td>
<td>
a b c
</td>
</tr>
<tr>
<td>
<d e f >
</td>
</tr>
</table>
In pratica:<tr>
<td rowspan="2">
rowspan="2" ossia dell'altezza di 2 righe
</td>
<td>
a b c
</td>
</tr>
<tr>
<td>
<d e f >
</td>
</tr>
</table>
| rowspan="2" ossia dell'altezza di 2 righe | a b c |
| d e f |
ALTRI ATTRIBUTI PER LE TABELLE:
- bgcolor=" " nome in inglese o esadecimale del colore.
- background=" " nome sfondo con estensione gif, jpg, jpeg o png.
- align=" " può essere right, left, center, justify ed allinea il contenuto delle celle in senso orizzontale.
- valign=" " può essere top (sopra), middle (centro - default browser), bottom (sotto), baseline (alla base) ed allinea il contenuto delle celle in senso verticale.
- width=" " unità di misura (px od altro) o in % determina le dimensioni in larghezza.
- height=" " unità di misura (px od altro) o in % determina le dimensioni in altezza.
<table border="2" bgcolor="red" width="250" height="80" gt;
<tr>
<td>
contenuto della tabella
</td>
<td bgcolor="green" align="center" valign="top" width="75%">
seconda cella
</td>
</tr>
</table>
In pratica:<tr>
<td>
contenuto della tabella
</td>
<td bgcolor="green" align="center" valign="top" width="75%">
seconda cella
</td>
</tr>
</table>
| contenuto della tabella | seconda cella |
BORDI E SPAZI:
Molti attributi possono variare la grandezza, il colore o la visuale dei bordi. Vediamo con degli esempi alcuni di questi:border=" " Può variare partendo da zero (senza bordo).
<table border="10" >
<tr><td>
contenuto della tabella
</td></tr>
</table>
In pratica:<tr><td>
contenuto della tabella
</td></tr>
</table>
| contenuto della tabella |
bordercolor=" " Per il colore del bordo. Da scrivere in inglese o formato esadecimale.
<table border="2" bordercolor="red">
<tr><td>
contenuto della tabella
</td></tr>
</table>
In pratica:<tr><td>
contenuto della tabella
</td></tr>
</table>
| contenuto della tabella |
bordercolordark=" " Colore sull'ombreggiatura più scura. In inglese o esadecimale.
<table border="2" bordercolordark="red">
<tr><td>
contenuto della tabella
</td></tr>
</table>
In pratica:<tr><td>
contenuto della tabella
</td></tr>
</table>
| contenuto della tabella |
bordercolorlight=" " Colore sull'ombreggiatura più chiara. In inglese o esadecimale.
<table border="2" bordercolorlight="red">
<tr><td>
contenuto della tabella
</td></tr>
</table>
In pratica:<tr><td>
contenuto della tabella
</td></tr>
</table>
| contenuto della tabella |
cellpadding=" " La quantità di spazio fra i bordi e l'oggetto della tabella
<table border="2" cellpadding="15">
<tr><td>
contenuto della tabella
</td></tr>
</table>
In pratica:<tr><td>
contenuto della tabella
</td></tr>
</table>
| contenuto della tabella |
cellspacing=" " La quantità di spazio vuoto fra le celle, da non confondere con border.
<table border="2" cellspacing="15">
<tr><td>
contenuto della tabella
</td></tr>
</table>
In pratica:<tr><td>
contenuto della tabella
</td></tr>
</table>
| contenuto della tabella |
frame=" " Indica il tipo di visuale da assegnare al bordo. I valori da assegnare possono essere:
above = bordi esterni in alto.
below = bordi esterni in basso.
void = senza bordi.
hsides = bordi orizzontali in alto e in basso.
lhs = bordi esterni sinistri.
rhs = bordi esterni destri.
vsides = bordi esterni destri e sinistri.
box = tutti i margini.
border = tutti i margini.
Esempi:
<table border="2" bordercolor="red" frame="above">
<tr><td>
above
</td></tr>
</table>
Vediamo per ogni attributo un esempio in pratica:above
</td></tr>
</table>
| above |
| below |
| void |
| hsides |
| vsides |
| lhs |
| rhs |
| box |
| border |
tbody
La tabella che contiene i tag <tbody> e </tbody> viene organizzata in modo che il testo , le immagini e tutto il resto contenuto occupi il minor spazio possibile.