Table Tutor- Lezione 3

Tutor- Lezione 3

Torniamo un attimo indietro al semplice Tom.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Tom</TD> </TR> </TABLE>

Per semplicità leviamo gli attributi di allineamento. Già sappiamo cosa accadrà dal momento che conosciamo quali sono i valori di default. A questo proposito, un TAG dice al browser di fare qualcosa. Un ATTRIBUTO va dentro al TAG e specifica al browser come farlo.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Tom</TD> </TR> </TABLE>

Tom

Adesso ingrandiremo di un poco la tabella.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Tom</TD> </TR> </TABLE>

L'amico di Tom, Mauro é tornato e vuole la sua cella personale stavolta.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Tom</TD> <TD>Mauro</TD> </TR> </TABLE>

Tom Mauro

Quando non viene fornita alcuna istruzione al browser, di solito (ma non sempre) ogni cella assume una dimensione diversa. E' sempre una buona idea specificare quanto é grande ciscuna cella. Controlla attentamente che i tuoi calcoli siano giusti, altrimenti quello che la gente vedrà visualizzato sarà MOLTO diverso da quello che volevi fargli vedere!

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=150>Tom</TD> <TD WIDTH=150>Mauro</TD> </TR> </TABLE>

Tom Mauro

Gli attributi di LARGHEZZA possono anche essere espressi come valori percentuale.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=50%>Tom</TD> <TD WIDTH=50%>Mauro</TD> </TR> </TABLE>

Tom Mauro

Assegnamo a Tom una cella più grande visto che lui é qui dall'inizio.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=80%>Tom</TD> <TD WIDTH=20%>Mauro</TD> </TR> </TABLE>

Tom Mauro

Adesso pure Paolo é tornato e, ovviamente, anche lui vuole la sua cella personale. Dobbiamo decidere quanto spazio assegnargli. Direi che il 20% é più che sufficiente. Fai attenzione ad aggiustare pure la quota di spazio che spetta a Tom.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60%>Tom</TD> <TD WIDTH=20%>Mauro</TD> <TD WIDTH=20%>Paolo</TD> </TR> </TABLE>

Tom Mauro Paolo

Tre tizi sull'altro lato della strada vedono quello che sta succedendo e decidono che pure loro vogliono stare nella tua tabella. Mi sa che dovremo assegnare una riga tutta per loro.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD WIDTH=60%>Tom</TD>
<TD WIDTH=20%>Mauro</TD>
<TD WIDTH=20%>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo

Pippo Pluto Quo

Gli attributi di LARGHEZZA vengono estesi anche alle righe successive.

Se Quo si scoccia e se ne va la tabella resta intatta. Al suo posto rimane una casella vuota. "Attenzione: ho detto casella e non cella"

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD WIDTH=60%>Tom</TD>
<TD WIDTH=20%>Mauro</TD>
<TD WIDTH=20%>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
</TR>

</TABLE>

Tom Mauro Paolo

Pippo Pluto

Come vedi la casella vuota, se la tua tabella ha i bordi, esteticamente non è molto bella da vedere. Puoi ovviare a questo problema, creandoti la cella, all'interno della quale inserirai il carattere speciale relativo ad uno spazio.
Vedi sotto:
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Tom</TD>
<TD WIDTH=20%>Mauro</TD>
<TD WIDTH=20%>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD> </TD>
</TR> </TABLE>

Tom Mauro Paolo

Pippo Pluto

Rimettiamo Quo al suo posto e leviamo tutti gli attributi tranne il BORDER.

<TABLE BORDER=3>

<TR>
<TD>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo

Pippo Pluto Quo

Adesso parleremo di due attributi che si chiamano CELLPADDING e CELLSPACING. Sono entrambi definiti all'interno del Tag <TABLE> iniziale. CELLPADDING é lo spazio che c'é fra il bordo della cella e il contenuto della cella stessa.

<TABLE BORDER=3 CELLPADDING=12>

<TR>
<TD>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo

Pippo Pluto Quo

Il valore di default per questo attributo é 1. La ragione per cui il default é 1 e non 0 é che altrimenti il testo starebbe schiacciato contro i bordi della cella e questo non é bello a vedersi (in ogni caso se lo desideri puoi specificare 0).

Se sostituiamo CELLSPACING al posto di CELLPADDING otteniamo un effetto un po' diverso.

<TABLE BORDER=3 CELLSPACING=12>

<TR>
<TD>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo

Pippo Pluto Quo

Il valore di default per CELLSPACING é 2.

Ovviamente siamo anche liberi di usare una combinazione dei due attributi.

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>

<TR>
<TD>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo

Pippo Pluto Quo

<--BACK SEGUIMI-->