Le tabelle


Tabelle: struttura di base

Le tabelle rappresentano uno degli strumenti più utilizzati e potenti nella formattazione dei documenti HTML.

Gli elementi fondamentali per definire la struttura di una tabella sono:

- TABLE, che indica l' inizio e la fine di una tabella, caratterizzato dai tag <TABLE> e </TABLE>;

- TR, che indica l'inizio di una nuova riga, caratterizzato dai tag <TR> e </TR>;

- TD, che indica l'inizio di una nuova cella all'interno di una riga, caratterizzato dai tag <TD> e </TD>;

Esempio :


<HTML>
       <HEAD>
                             <TITLE>esempio</TITLE>
       </HEAD>
     <BODY>
                  <TABLE>
                        <TR>
                                             <TD>A</TD>
                                             <TD>B</TD> 
                                             <TD>C</TD>
                          </TR>
                            <TR>
                                                <TD>D</TD> 
                                                <TD>E</TD>
                                                <TD>F</TD>
                               </TR>
                      </TABLE>
   </BODY>
</HTML>









A B C
D E F

Creare una tabella a larghezza fissa o dinamica


Per creare una tabella a larghezza fissa bisognerà imporre altezza e larghezza in pixel, aggiungendo attributi width e height.

Come per le immagini, border ci serve a determinare il bordo della nostra tabella, se inserirlo, se diminuirlo, aumentarlo etc...

Di default il bordo è pari a 1.

Se ivece lo impostiamo con valore = 0, il bordo non verrà visualizzato.

Esempio:



      <TABLE width: "152"  height: "86"  border:"1">
<TR> 
                      <TD>A</TD> 
                     <TD>B</TD> 
                     <TD>C</TD>
</TR>
<TR> 
                     <TD>D</TD>
                     <TD> E</TD>
                    <TD> F</TD>
</TR>
</TABLE>
.............


Mentre per creare una tabella a larghezza dinamica bisognera' imporre altezza e larghezza in %
Esempio:



      <TABLE width: "152%"  height: "86%"  border:"1">
<TR> 
                      <TD>A</TD> 
                     <TD>B</TD> 
                     <TD>C</TD>
</TR>
<TR> 
                     <TD>D</TD>
                     <TD> E</TD>
                    <TD> F</TD>
</TR>
</TABLE>
.............

Di solito la larghezza e l'altezza globali della tabella sono espresse nel tag <table>, mentre la larghezza delle varie celle viene espressa nei <td> della prima riga.

L'altezza in percentuale non sempre è visualizzata correttamente da tutti i browser.

Per dare ordine alle nostre tabelle sono stati introdotti questi attributi opzionali:


- <caption> è l?intestazione, il titolo

- <thead> è l'intestazione, la parte iniziale della tabella, quella che contiene ad esempio indicazioni sul contenuto delle celle

- <tfoot> è il piede, la conclusione della tabella

- <tbody> è il corpo, la parte centrale con il contenuto vero e proprio della tabella

 

Copyright (c) 2010 ilcorsaronero. All rights reserved.