HTML: le tabelle

Le tabelle

Le tabelle nel linguaggio markup HTML sono uno strumento indispensabile per strutturare i contenuti all' interno delle pagine web. Inizialmente venivano utilizzate per create i layout di un sito internet, poi con l'avvento dei fogli di stile CSS ne è stato modificato il loro scopo utilizzandole soprattutto per impaginare i contenuti.

Una tabella <TABLE> è formata da righe <TR> e colonne <TD>:

<table>
    <tr>
	<td>contenuto 1</td>
	<td>contenuto 2</td>
    </tr>
</table>

Attributi delle tabelle

Le tabelle hanno degli attributi che ne determinano le caratteristiche, il primo attributo che analizziamo è BORDER, che serve per disegnare un bordo per delimitare la tabella e le celle al suo interno, così come è possibile colorare un bordo di una cella o di una tabella utilizzando l'attributo BORDERCOLOR

<table border="1" bordercolor="#ff0000">
    <tr>
	<td>contenuto 1</td>
	<td>contenuto 2</td>
    </tr><tr>
	<td>contentuo 3</td>
	<td>contenuto 4</td>
    </tr>
</table>
contenuto 1 contenuto 2
contenuto 3 contenuto 4

 

è possibile modificare l'attributo BORDER utilizzando gli attributi del TAG TABLE FRAMES per quanto riguarda il disegno dei bordi esterni di una tabella, RULES per quelli interni:

<table width="300" border="1" rules="groups">

L'attributo FRAME, come abbiamo indicato nei precedenti esempi, può avere i seguenti valori:

<table width="300" border="1" frame="void">

dove il border è nullo, è il valore di default

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

 

L'attributo FRAME, come abbiamo indicato nei precedenti esempi, può avere i seguenti valori:

<table width="300" border="1" frame="void" rules="none" >

dove il border è nullo, è il valore di default

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

 

<table width="300" border="1" frame="above" rules="none" >

il bordo viene disegnato solo sul lato superiore

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

 

<table width="300" border="1" frame="below" rules="none" >

il bordo viene disegnato solo sul lato inferiore

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

<table width="300" border="1" frame="hsides" rules="none" >

il bordo viene disegnato solo sul lato superiore ed inferiore

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

 

<table width="300" border="1" frame="vsides" rules="none" >

il bordo viene disegnato solo sul lato sinistro e destro

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

 

<table width="300" border="1" frame="lhs" rules="none" >

il bordo viene disegnato solo sul lato sinistro

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

 

<table width="300" border="1" frame="rhs" rules="none" >

il bordo viene disegnato solo sul lato destro

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

 

<table width="300" border="1" frame="box" rules="none" >

il bordo viene disegnato su tutti e quattro i lati

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

 

<table width="300" border="1" frame="border" rules="none" >

il bordo viene disegnato su tutti e quattro i lati

cella 1 cella    2
cella 3 cella    4
cella 5 cella    6
cella 7 cella    8
cella 9 cella  10

 

L'attributo RULES disegna i bordi esterni della tabella e puo essere settato così:

<table width="300" border="1" frame="void" rules="none">

il bordo esterno è nullo, è il valore di default

intestazione 1 intestazione 2
chiusura 1 chiusura 2
corpo 1 corpo 2
corpo 3 corpo 4
corpo 5 corpo 6

 

<table width="300" border="1" frame="void" rules="groups">

i bordi separeranno i gruppi (THEAD, TFOOT, TBODY)

intestazione 1 intestazione 2
chiusura 1 chiusura 2
corpo 1 corpo 2
corpo 3 corpo 4
corpo 5 corpo 6

 

<table width="300" border="1" frame="void" rules="rows">

il bordo dividerà i TR

intestazione 1 intestazione 2
chiusura 1 chiusura 2
corpo 1 corpo 2
corpo 3 corpo 4
corpo 5 corpo 6

 

<table width="300" border="1" frame="void" rules="cols">

il bordo dividerà le colonne

intestazione 1 intestazione 2
chiusura 1 chiusura 2
corpo 1 corpo 2
corpo 3 corpo 4
corpo 5 corpo 6

 

<table width="300" border="1" frame="void" rules="all">

il bordo dividerà sia TR che le colonne

intestazione 1 intestazione 2
chiusura 1 chiusura 2
corpo 1 corpo 2
corpo 3 corpo 4
corpo 5 corpo 6

 

Per assegnare la larghezza e l'altezza ad una tabella si usano gli attributi WIDTH (larghezza) e HEIGHT (altezza), questi attributi possono essere assegnati ai TAG <TABLE>, <TR> e <TD>

  • le dimensioni possono assegnate sia alla tabella in generale che alla singola cella,  possono essere definiti in pixel o con un numero intero

    width="200"

    height="100"

    <table width="200" height="100" border="1">
    	    <tr>
    	            <td>contenuto 1</td>
    	            <td>contenuto 2</td>
    	   </tr>
    	 
    	   <tr>
                       <td>contenuto 3</td>
                       <td>contenuto 4</td>
               </tr>
    </table>
    contenuto 1 contenuto 2
    contenuto 3 contenuto 4

     
  • la dimensione puo' essere assegnata anche con  un valore in percentuale, in tal modo la tabella  si adatterà secondo lo spazio a sua disposizione nella pagina web, mentre la cella si adatterà alla grandezza della tabella. Questi attributi possono essere assegnati ai TAG <TABLE>, <TR> e <TD>

    widht="50%"

    height="50%"

    <table width="100%" height="100%" border="1">
    	    <tr>
    	            <td width="25%">contenuto 1</td>
    	            <td width="75%">contenuto 2</td>
    	   </tr>
    	 
    	   <tr>
                       <td width="25%">contenuto 3</td>
                       <td width="75%">contenuto 4</td>
               </tr>
    </table>
    contenuto 1 contenuto 2
    contenuto 3 contenuto 4

La larghezza della prima cella è quella più importante in quanto le successive, anche se avranno larghezze diverse, si adatteranno alla dimensione di quella che la precede.

Un attributo molto importante per le tabelle è <ROWSPAN> e <COLSPAN>. Servono per poter raggruppare due o più celle in modo tale da avere tabelle con righe o colonne che occupino spazi diversi,

<td colspan="2">

<table width="400" border="1" bordercolor="#ff0000">
	 <tr>
	    <td width="70%">contenuto 1</td>
	      <td width="30%">contenuto 2</td>
	 </tr>
	 <tr>
	      <td colspan="2" align=”center” valign=”middle”>contenuto 3</td>
	 </tr>
</table>

contenuto 1 contenuto 2
contenuto 3

 

<td rowspan="2">

<table width="400" border="1" bordercolor="#ff0000">
	  <tr>
	       <td>contenuto 1</td>
	       <td rowspan="2">contenuto 3</td>
	  </tr>
	  <tr>
	       <td>contenuto 2</td>
	  </tr>
</table>

contenuto 1 contenuto 3
contenuto 2

L'attributo di <TABLE> <CELLSPACING> serve per dare i margini intorno alle celle all'interno della tabella, mentre <CELLPADDING> viene utilizzato per dare il margine al contenuto all' interno di una cella:

<table width="100%" border="1" bordercolor="#ff0000" cellspacing="3" cellpadding="5">
	  <tr>
	       <td>contenuto 1</td>
	       <td>contenuto 1</td>
	  </tr>
	  <tr>
	       <td>&nbsp;</td>
	       <td>contenuto 1</td>
	  </tr>
</table>
contenuto 1 contenuto 2
contenuto 3 contenuto 4

 

Identificare gruppi di righe

Il linguaggio HTML utilizza alcuni TAG per individuare facilmente i contenuti all' interno di una tabella. Questi TAG sono facoltativi e vengono inseriti tra i TAG <TR> per identificare gruppi di righe:

<caption>

Viene utilizzato come titolo di una tabella, una sorta di commento introduttivo ai contenuti;

<thead>

è l'intestazione che indica il contenuto delle celle distribuite sulle colonne;

<tbody>

rappresenta il corpo centrale di una tabella, è formato dalle celle dove sono inseriti i dati;

<tfoot>

è il piede della tabella, viene utilizzato per esempio per riportare i risultati di somme di dati

<table width="75%" border="1">	
	 <caption><b>Registro presenze</b></caption>	
	 <thead>
	 		<tr>	 
            	<th width="20%">Mese</th>	 
                <th width="40%">corso 1</th>	 
                <th width="40%">corso 2</th>
	 		</tr>
	 </thead>	
	 <tfoot>
	 		<tr>	 
            	<td>&nbsp;</td>	 
                <td>&nbsp;</td>	 
                <td>&nbsp;</td>
	 		</tr>	
	 		<tr>	 
            	<td ><b>Totale ore</b></td>	 
                <td >71</td>	 
                <td >39</td>
	 		</tr>
	 </tfoot>	
	 <tbody>
	 		<tr>	 
            	<td >gen</td>	 
                <td >20</td>	 
                <td >10</td>
	 		</tr>	
	 		<tr>	 
            	<td >feb</td>	 
                <td >8</td>	 
                <td >9</td>
	 		</tr>	
	 		<tr>	 
            	<td >mar</td>	 
                <td >15</td>
	 			<td >7</td>
	 		</tr>	
	 		<tr>	 
     			<td >apr</td>	 
                <td >9</td>	 
                <td >3</td>
	 		</tr>	

	 		<tr>	 
     			<td >ago</td>	 
                <td >12</td>	 
                <td >4</td>
	 		</tr>	
	 		<tr>	 
            	<td >sett</td>	 
                <td >7</td>	 
                <td >6</td>
	 		</tr>
	 </tbody>
</table>
Registro presenze
Mese corso 1 corso 2
     
Totale ore 71 39
gen 20 10
feb 8 9
mar 15 7
apr 9 3
ago 12 4
sett 7 6

 

Così come è possibile raggruppare le righe, è possibile raggruppare le colonne con il TAG <COLGROUP>,  dandogli degli stili che le differenziano. Questo TAG, anche se fa parte delle specifiche della W3C, non è ancora supportato da tutti i browser. Rimandiamo lo studio di questo TAG al corso di CSS dove verrà specificato il suo utilizzo insieme all'applicazione dei fogli di stile.