Come costruire e gestire le tabelle in html, gli attributi i parametri ed altro..
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 23 Mar 2017
aggiungi in preferiti  
Home    Mappa directory    Script




Tabelle e HTML:

Le tabelle sono fondamentali per completare una pagina in 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>

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>
tabella con due colonne

<table border="2">
<tr>
<td>
tabella con
</td>
</tr>
<tr>
<td>
due righe
</td>
</tr>
</table>
tabella con
due righe

<table border="2">
<tr>
<td>
tabella
</td>
<td>
con due
</td>
</tr>
<tr>
<td>
colonne e
</td>
<td>
due righe
</td>
</tr>
</table>
tabella con due
colonne e due righe


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 colspan
Con 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:
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:
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.
Esempio:
<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:
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:
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:
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:
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:
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:
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:
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

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.