Precedente
BACK

HTML HOUSE

TABELLE DIMENSIONAMENTO

Successiva
NEXT


A questo punto possiamo introdurre altri comandi per le tabelle soprattutto quelle per il dimensionamento dei bordi e delle celle:
<TABLE BORDER="1" WIDTH="150" HEIGHT="200">
<TR>
<TD>HTML HOUSE
</TD>
</TR>
</TABLE>
CLICCA QUI PER LA DIMOSTRAZIONE
Aggiungendo WIDTH E HEIGHT affianco a TABLE si è costruita una tabella con una larghezza di 150 pixel e un'altezza di 200 pixel (č possibile anche qui inserire le percentuali di schermo che si vogliono occupare), che non può essere ulteriormente dimensionata mettendo altri comandi vicino a TD come vedremo dopo. Ovviamente si può impostare anche solo la larghezza o l'altezza senza per forza dover aggiungere tutti e due i comandi. Un'altra possibilità come già anticipato prima è il fatto di poter dimensionare direttamente le celle senza intervenire su tutta la tabella. Praticamente basta aggiungere gli attributi WIDTH e HEIGHT dopo il comando TD e possiamo dimensionare direttamente le celle. ATTENZIONE! Bisogna stare attenti perchè dimensionando le celle di una riga in una maniera e altre con altri valori ci può essere il problema che la tabella formatta le sue celle in base alla larghezza di quella più larga. La stessa cosa capita anche quando c'è una cella più alta delle altre vicine.
<TABLE BORDER="1">
<TR>
<TD WIDTH="150" HEIGHT="200">HTML
</TD>
<TD>HOUSE
</TD>
<TD>HTML
</TD>
<TD>HOUSE
</TD>
</TR>
</TABLE>
CLICCA QUI PER LA DIMOSTRAZIONE
In questa maniera abbiamo ottenuto una cella con altezza di 200 pixel e larghezza di 150. A questo punto sapete variare le dimensioni del bordo (BORDER), delle celle (TD, WIDTH, HEIGHT) e quelle della tabella (TABLE, WIDTH, HEIGHT). Vediamo quali sono le altre possibilità delle tabelle.
Le altre possibilità riguardano la distanza delle scritte dal bordo della tabella, lo spazio fra una cella e l'altra e il colore della tabella, ma iniziamo a vedere le prime due. Per ottenere lo spaziamento tra la scritta e il bordo della cella basta aggiungere affianco a TABLE il comando CELLPADDING e tra le virgolette mettere lo spazio definito in pixel; la stessa cosa si può fare per stabilire lo spazio fra le celle: in questo caso bisogna utilizzare un altro comando che è CELLSPACING. Vediamo l'esempio:
<TABLE BORDER="1" CELLPADDING="10" CELLSPACING="20">
<TR>
<TD>HTML
</TD>
<TD>HOUSE
</TD>
</TR>
</TABLE>
CLICCA QUI PER LA DIMOSTRAZIONE
Con questo esempio abbiamo ottenuto una tabella in cui il testo è spaziato dal bordo di 10 pixel, mentre le celle sono spaziate tra di loro di 20 pixel. Ora non ci resta che definire come si impostano i colori nella nostra tabella: dobbiamo aggiungere quindi un ulteriore comando che è BGCOLOR e BORDERCOLOR, anche se quest'ultimo non è accettato da tutti i navigatori. I colori vanno inseriti come nell'impostazione del marcatore BODY, cioè si può inserire il colore in numeri o solo con il nome: anche in questo caso possiamo inserire un'immagine al posto dello sfondo utilizzando l'attributo BACKGROUND, ma attenzione il Netscape e l'Explorer leggono differentemente questo comando dando cosė risultati diversi. BGCOLOR può essere inserito in qualsiasi parte della tabella. Se si inserisce vicino a TABLE colorerà tutta la tabella, se si inserisce vicino a TR colorerà tutta la riga, se infine si inserisce vicino a TD colorerà solo la cella. BORDERCOLOR viene inserito invece solo vicino a TABLE e funziona solo se viene inserito anche il marcatore BORDER con numero 1.
<TABLE BORDER="1" BORDERCOLOR="yellow" BGCOLOR="red">
<TR BGCOLOR="blue">
<TD>HTML
</TD>
<TD>HOUSE
</TD>
</TR>
<TR>
<TD BGCOLOR="green">HTML
</TD>
<TD>HOUSE
</TD>
</TR>
</TABLE>
CLICCA QUI PER LA DIMOSTRAZIONE
Nell'esempio, se state lavorando con l'explorer, vi comparirà una tabella in cui i bordi saranno gialli, le due celle superiori saranno blu, quella inferiore sinistra sarà verde, mentre quella inferiore destra sarà rossa.
A questo punto non dovreste più avere problemi con le tabelle.

Precedente
BACK
Successiva
NEXT