Table Tutor- Lezione 3

Table Tutor- Lezione 3

Torniamo un attimo indietro al semplice Ed.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Ed</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>Ed</TD> </TR> </TABLE>

Adesso ingrandiremo di un tocco la tabella.

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

Ed

Forse già sai che tocco é un termine tecnico. La sua definizione completa é cosė ampia e complessa che sarebbe comprensibile solo da studenti esperti di HTML.

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

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

Ed Tom

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>Ed</TD> <TD WIDTH=150>Tom</TD> </TR> </TABLE>

Ed Tom

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

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

Ed Tom

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

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

Ed Tom

Adesso pure Rick é 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 Ed.

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

Ed Tom Rick

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>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick

Larry Curly Mo

Gli attributi di LARGHEZZA vengono estesi anche alle righe successive.

Se Mo si scoccia e se ne va la tabella resta intatta. Al suo posto rimane una casella vuota.

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

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
</TR>

</TABLE>

Ed Tom Rick

Larry Curly

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

<TABLE BORDER=3>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick

Larry Curly Mo

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>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick

Larry Curly Mo

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).