Tabelle & HTML: guida ed esempi già fatti

Iniziamo a parlare di tabelle e come realizzarle in HTML

Per aprire e chiudere una tabella:

                         
<table>...</table>

Poi ci sono gli strumenti per aprire e chiudere le singole righe e le singole celle, perché l'HTML funziona a righe e non a colonne, nel senso che il codice di esempio:


                         
<table bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
        <tbody>
                <tr>
                        <td>1</td>
                        <td>2</td>
                </tr>
                <tr>
                        <td>3</td>
                        <td>4</td>
                </tr>
                <tr>
                        <td>5</td>
                        <td>6</td>
                </tr>
        </tbody>
</table>


Che diventa la seguente tabella:

1 2
3 4
5 6






<tr>...</tr>

Gli elementi <tr>...</tr> inseriti all'interno di <table> definiscono l'inizio di una riga della tabella, 
ciò vuol dire che il numero di coppie di <tr>...</tr> indica anche il numero di righe della tabella. Non contiene dati al suo interno come <td>...</td> per cui non si ha ragione di inserire attributi come bgcolor o background. ATTENZIONE senza l'apposito tag di chiusura </tr> la tabella non funziona e rischia di andare in crash.




<th>...</th>

Gli elementi <th>...</th> servono per indicare la prima riga della tabella, quella che viene chiamata intestazione. Il testo all'interno di questo tag è in automatico in grassetto. Diciamo che prende il posto di <td>...</td> nella prima riga. ATTENZIONE senza l'apposito tag di chiusura </th> la tabella non funziona e rischia di andare in crash.




<td>...</td>

Glii elementi <td>...</td> inseriti all'interno di <table> e quindi di <tr> definiscono la cella: viene inserito all'interno della riga. Il numero di <td>...</td> (aperto/chiuso) all'interno di <tr> ...</tr> sono il numero di celle con cui è divisa la riga.

Il numero di celle all'interno della riga dovrebbe essere sempre lo stesso, tranne nel caso che si uniscano due celle con l'attributo colspan. ATTENZIONE senza l'apposito tag di chiusura </td> la tabella non funziona e rischia di andare in crash.

 Facciamo due esempi dopo tutto quello che abbiamo detto:

<table bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                <tr>
                        <td>1 cella</td>                    
                </tr>
</table>



1 cella

<table bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                <tr>
                        <td>1 cella</td>
                        <td>2 cella</td>      
                </tr>
</table>

1 cella 2 cella


<table bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                <tr>
                        <td>1 cella</td>
                        <td>2 cella</td>              
                        <td>3 cella</td>    
                </tr>
</table>

1 cella 2 cella 3 cella










Struttura di base: Caption, Thead, Tfoot, Tbody 


Caption:
Il titolo della tabella che appare subito sopra questa
Thead: la prima riga, l'intestazione delle singole colonne
Tfoot: l'ultima riga di base della tabella
Tbody: il corpo vero e proprio della tabella

Tfoot, anche se appare alla fine della tabella è subito dopo thead, basta vederlo andando avanti con le frecce della tastiera del nostro pc. Vediamo il seguente esempio:



<table bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
     <caption>
          <p>I miei dati</p>
     </caption>
     <thead>
          <tr><th>Colonna 1</th><th>Colonna 2</th></tr>
     </thead>
     <tfoot>
          <tr><td>Totale 1</td><td>Totale 2</td></tr>
     </tfoot>
     <tbody>
          <tr><td>Dato 1,1</td><td>Dato 1,2</td></tr>
          <tr><td>Dato 2,1</td><td>Dato 2,2</td></tr>
          <tr><td>Dato 3,1</td><td>Dato 3,2</td></tr>
     </tbody>
</table>


I miei dati [caption]
Colonna 1 [thead]Colonna 2 [thead]
Totale 1 [tfoot]Totale 2 [tfoot]
Dato 1,1 [tbody]Dato 1,2 [tbody]
Dato 2,1 [tbody]Dato 2,2 [tbody]
Dato 3,1 [tbody]Dato 3,2 [tbody]





align

L'attributo align consente di specificare l'allineamento della tabella rispetto al documento, con le seguenti possibilità: center, left e right rispettivamente per: centrato, a sinistra, a destra.

Vediamo applicato al tag table cosa comporta (se non viene inserito niente l'allinea a sinistra come il testo):


                         
<table align="center" bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                 <tr>
                         <td>1 cella</td>                  
                </tr>
</table>

Center / Centro

           
<table align="left" bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                 <tr>
                         <td>1 cella</td>                  
                </tr>
</table>

left /sinistra

           

<table align="right" bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                 <tr>
                         <td>1 cella</td>                
                </tr>
</table>
Right / Destra





Vediamo applicato al <tr>...</tr> cosa comporta (se non viene inserito niente l'allinea a sinistra come il testo):

<table align="center" bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                 <tr align="center">
                         <td>1 cella</td>                
                </tr>
</table>

Center / Centro



<table align="center" bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                 <tr align="left">
                         <td>1 cella</td>                
                </tr>
</table>

Left / Sinistra



<table align="right" bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                 <tr>
                         <td>1 cella</td>                
                </tr>
</table>

Right / Destra


Vediamo applicato al <td>...</td> cosa comporta, (se non viene inserito niente l'allinea a sinistra come il testo):

<table bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                <tr>
                        <td align="left">Left / Sinistra</td>
                        <td align="center">Center / Centro</td>            
                        <td align="right">Right / Destra</td>  
                </tr>
</table>

Left / Sinistra Center / Centro Right / Destra


In questo caso si aggiungono altri due attributi per specificare il testo: char, justify:

<table bgcolor="#e9eaed" border="1px" cellpadding="10" cellspacing="1" style="width: 450px;">
                <tr>
                        <td align="left">Left / Sinistra</td>
                        <td align="center">Center / Centro</td>          
                        <td align="right">Right / Destra</td>
                </tr>
                 <tr>
                        <td align="char">Questo tipo di testo si presenta con l'attributo align char</td>        
                        <td align="justify">Questo tipo di testo si presenta con l'attributo align justify</td>
                </tr>
</table>


Left / Sinistra Center / Centro Right / Destra
Questo tipo di testo si presenta con l'attributo align char Questo tipo di testo si presenta con l'attributo align justify





background e bgcolor

L'attributo background permette di avere un'immagine come sfondo della tabella, è possibile applicarlo oltre che all'elemento <table> anche agli elementi che costituiscono la struttura della tabella stessa quali: <td> e <th>. Le immagini che si possono utilizzare sono quelle dei formati diffusi sul web: gif, jpg, png. Deve essere logicamente inserito l'URL dell'immagine.

L'attributo bgcolor è quello che serve per inserire il colore di sfondo. Ecco di seguito un esempio di tabella.



<table border="1" style="width: 450px;">
                 <tr>
                        <td >Qui</td>

                </tr>
<tr bgcolor="#e9eaed">
                        <td>Qui</td>
                </tr>
             
                <tr background="http://4.bp.blogspot.com/-ZkZH0P13yR0/UGWHqy85G4I/AAAAAAAAB7o/1q6GNDJZRQI/s290/578323_10150790956939659_1837022243_n.jpg">
                        <td align="left">Qui</td>
                </tr>
</table>

che diventa:


Qui
Qui
Qui





border e bordercolor

L'attributo border consente di creare un bordo alla tabella. A questo attributo si possono aggiungere altri due elementi di definizione: lo spessore espresso in pixel e il colore del bordo. Se non si inserisce questo campo, la tabella apparirà senza bordi.
Per decidere il colore del bordo si usa il tag bordercolor dopo border, come negli esempi seguenti.

Si può specificare il bordo anche nella tabella degli stili: si definisce in questo modo: border="solid 1px #123456" (tipo di bordo / spessore / colore)

Ad esempio:


<table  style="width: 450px;">
                <tr>
                        <td >Qui</td>
                </tr>
</table>

Qui


<table  border="1" style="width: 450px;">
                <tr>
                        <td >Qui</td>
                </tr>
</table>
Qui



<table  border="7" style="width: 450px;">
                <tr>
                        <td >Qui</td>
                </tr>
</table>
Qui


<table  border="13" style="width: 450px;">
                <tr>
                        <td >Qui</td>
                </tr>
</table>
Qui



<table border="13px" bordercolor="#08457E" style="width: 450px;">
                <tr>
                        <td>Qui</td>
                </tr>
</table>

Qui







frame

L'attributo frame si usa per specificare la visualizzazione dei bordi. ATTENZIONE funziona solo se si ha gia impostato l'attributo border precedentemente. I valori che si considerano sono i seguenti:


void = rimuove tutti i bordi esterni
above = visualizza solo i bordi esterni in cima alla tabella
below = visualizza solo i bordi esterni in fondo alla tabella
hsides = visualizza solo i bordi orizzontali in cima e in fondo alla tabella
lhs = visualizza i bordi esterni solo al margine sinistro della tabella
rhs = visualizza i bordi esterni solo al margine destro della tabella
vsides = visualizza i bordi esterni ai due margini destro e sinistro della tabella
box = visualizza un riquadro attorno alla tabella (tutti i margini)
border = visualizza un riquadro attorno alla tabella (come box)

Vediamo l'esempio di seguito applicato ai vari casi:

<table border="2" frame="void" style="width: 50%px;">
     <tr>
          <td>void = nessun bordo</td>
     </tr>
</table>

void = nessun bordo


above = solo bordo in cima alla tabella


below = solo bordo in fondo alla tabella


hsides = solo bordi in cima e in fondo alla tabella


lhs = solo bordo laterale sinistro


rhs = solo bordo laterale destro


vsides = solo bordi laterali sinistro e destro


box = tutti i bordi intorno alla tabella


border = tutti i bordi intorno alla tabella (come box)





cellpadding

L'attributo cellpadding indica la quantità di spazio vuoto da lasciare tra i bordi delle celle della tabella e il testo in esse contenuto, se non specificato il valore di default è 2 , per tabelle più compresse si dovrà impostare cellpadding uguale a 0. Vediamo alcuni esempi:

<table  cellpadding=0  border="1" style="width: 450px;">
                <tr>
                        <td >cellpadding=0</td>
                </tr>
</table>


cellpadding=0



<table  cellpadding=10  border="1" style="width: 450px;">
                <tr>
                        <td >cellpadding=10</td>
                </tr>
</table>


cellpadding=10



<table  cellpadding=20  border="1" style="width: 450px;">
                <tr>
                        <td >cellpadding=20</td>
                </tr>
</table>

cellpadding=20






cellspacing

L'attributo cellspacing indica la quantità di spazio tra le celle di dati della tabella, il valore per default è 2.



<table   border="1" style="width: 450px;">
                <tr>
                        <td >Vuoto</td>
                        <td >Vuoto</td>
                </tr>
</table>

Vuoto Vuoto

<table  cellspacing=0  border="1" style="width: 450px;">
                <tr>
                        <td >cellspacing=0</td>
                        <td >cellspacing=0</td>
                </tr>
</table>


cellspacing=0 cellspacing=0


<table  cellspacing=10  border="1" style="width: 450px;">
                <tr>
                        <td >cellspacing=10</td>
                        <td >cellspacing=10</td>
                </tr>
</table>


cellspacing=10 cellspacing=10


<table  cellspacing=20  border="1" style="width: 450px;">
                <tr>
                        <td >cellspacing=20</td>
                        <td >cellspacing=20</td>
                </tr>
</table>


cellspacing=20 cellspacing=20





Vediamo ora i due elementi che servono per definire le dimensioni della tabella, delle righe e delle celle:

height

L'attributo height specifica l'altezza della tabella, viene espressa in pixel o in percentuale rispetto all'altezza della finestra del browser. Si può utilizzare per <table>...</table>, ma diventa un attributo valido anche se viene usato per i singoli elementi che costituiscono la struttura della tabella stessa quali: <tr>, <td> e <th>.


width

L'attributo width specifica la larghezza della tabella, può essere espressa in pixel o in percentuale della larghezza della finestra del browser. Si può utilizzare per <table>...</table>, ma diventa un attributo valido anche se viene usato per i singoli elementi che costituiscono la struttura della tabella stessa quali: <tr>, <td> e <th>.

Vediamo alcuni esempi:

<table   border="1" style="width: 450px; height: 50px;">
                <tr>
                        <td >Prova</td>
                </tr>
</table>


Prova



<table   border="1" style="width: 99%; height: 20px;">
                <tr>
                        <td style="width: 33%;">Prova</td>
                        <td style="width: 10%;">Prova</td>
                        <td style="width: 57%;">Prova</td>             
                </tr>
</table>

Prova 33% 10 % Prova 57%




rowspan e colspan

Gli attributi rowspan e colspan uniscono righe e colonne senza alterare la struttura originale. Le tabelle hanno lo stesso numero di celle se specificato correttamente, oppure hanno dei vuoti. Con questi due attributi è possibile unire celle tramite righe e colonne. Vediamo due esempi:

<table>
     <tr>
          <td rowspan="2">
               riga 1 e 2 cella 1 e 5
          </td>
          <td>
               riga 1 cella 2
          </td>
          <td>
               riga 1 cella 3
          </td>            
          <td>
               riga 1 cella 4
           </td>
     </tr>
     <tr>
          <td>
               riga 2 cella 6
          </td>
          <td>
               riga 2 cella 7
          </td>
          <td>
               riga 2 cella 8
          </td>
     </tr>
</table>

Che diventa:

riga 1 e 2 / cella 1 e 5riga 1 cella 2 riga 1 cella 3 riga 1 cella 4
riga 2 cella 6 riga 2 cella 7 riga 2 cella 8


<table>
     <tr>
          <td colspan="4">
               riga 1 cella 1, 2, 3 e 4 
          </td>
     </tr>
     <tr>
          <td> 
               riga 2 cella 1
           </td>
          <td> 
               riga 2 cella 2 
          </td>
          <td> 
               riga 2 cella 3 
          </td>
          <td> 
               riga 2 cella 4
           </td>
     </tr>
</table>


riga 1 cella 1, 2, 3 e 4
riga 2 cella 1 riga 2 cella 2 riga 2 cella 3 riga 2 cella 4




nowrap

L'attributo nowrap impedisce il ritorno a capo del contenuto della cella forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Questo attributo va nel tag <td nowrap >...</td> Vediamo i due esempi:

<table bgcolor="#e9eaed" border="1" cellspacing="5" style="width: 50px;" nowrap >
     <tr>
          <td> Qua inseriamo e vediamo l'effetto dell'attributo nowrap </td>
     </tr>
</table>



Qua inseriamo e vediamo l'effetto dell'attributo nowrap



<table bgcolor="#e9eaed" border="1" cellspacing="5" style="width: 50px;" nowrap >
     <tr>
          <td> Qua inseriamo e vediamo l'effetto dell'attributo nowrap </td>
     </tr>
</table>


Qua NON inseriamo l'attributo nowrap

Come si vede, in questo caso la tabella prende la larghezza della parola più larga.




valign

 L'attributo valign permette di impostare l'allineamento verticale del testo all'interno delle singole celle della tabella, i valori possibili sono: middle, top, baseline, bottom. Vediamo l'esempio seguente:

<table bgcolor="#e9eaed" border="1" cellspacing="5" style="width: 450px;">
     <tr>
          <td style="width: 33%;" valign="baseline">
                    baseline
          </td>
          <td style="width: 33%;">
                    bottom
          </td>
          <td style="width: 33%;" rowspan="2">
                    testo che serve solo per evidenziare le altre quattro celle che contengono un allineamento verticale
          </td>
     </tr>
     <tr>
               <td style="width: 33%;" valign="middle">
                    middle
               </td>
               <td style="width: 33%;" valign="top">
                    Top
               </td>
          </tr>
</table>



baseline bottom testo che serve solo per evidenziare le altre quattro celle che contengono un allineamento verticale
middle Top






fontcolor

Questo tag è quello già presente nel normale html, che tuttavia può essere usato per meglio specificare il colore del font anche nelle tabelle. Vediamo un esempio:

<table width="75%" border="1" align="center" bgcolor="#e9eaed">
<tr>
<td width="50%" ><font color="#898437">Oliva chiaro</font></td>
<td width="50%"><font color="#DC143C">Cremesi</font></td>
</tr>
</table>


Che può essere scritto anche nella seguente maniera:


<table align="center" bgcolor="#e9eaed" border="1" style="width: 75%;">
<tbody>
<tr>
<td width="50%"><span style="color: #898437;">Biancaccio</span></td>
<td width="50%"><span style="color: crimson;">Cremesi</span></td>
</tr>
</tbody></table>

Oliva chiaro Cremesi

Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...