Corso HTML e CSS (Lezione 9)

Impariamo a costruire un sito Web

Lezione 9: I tag del <body> : Tag per le tabelle

I tag che abbiamo incluso nel raggruppamento per le tabelle sono:

<table> Definisce una tabella
<caption> Definisce la descrizione della tabella
<th> Definisce una cella della testata della tabella
<tr> Definisce una riga della tabella
<td> Definisce una cella della riga
<thead> Definisce la testata della tabella
<tbody> Definisce il corpo (le righe escluse testata e pié di pagina) della tabella
<tfoot> Definisce il pié di pagina della tabella
<col /> Definisce gli attributi di una colonna della tabella
<colgroup> Definisce un gruppo di colonne ai fini della formattazione.

prima di descrivere in dettaglio i singoli tag, vediamo la struttura generale di una tabella.

<table>
   <caption> ... </caption>
   <colgroup>
      <col ... />
      <col ... />
   </colgroup>
   <thead>
      <tr>
         <th> ... </th>
         <th> ... </th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td> ... </td>
         <td> ... </td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td> ... </td>
         <td> ... </td>
      </tr>
      <tr>
         <td> ... </td>
         <td> ... </td>
      </tr>
   </tbody>
</table>

La struttura dovrebbe essere abbastanza chiara: all’interno dei tag <table> e </table> c’è tutta la tabella. All’interno vi sono altri 4 gruppi (non obbligatori): <colgroup> e </colgroup> racchiudono la descrizione delle caratteristiche delle colonne. Ciascun <col /> è una colonna da sinistra a destra.
All’interno dei tag <thead> e </thead> c’ è eventualmente la descrizione della testata. La riga della testata è definita dai tag <tr> e </tr>. All’interno troviamo la descrizione delle singole celle di testata <th> </th>.
<tfoot> </tfoot>  contengono invege la descrizione della riga di pié di pagina. Ancora una volta la riga è definita dai tag <tr> e </tr> al cui interno troviamo la definizione delle caratteristiche delle celle del pié di pagina all’interno dei tag <td> e </td>.
Infine c’è il gruppo <tbody> </tbody> che contiene il corpo della tabella con tutte le sue righe definite da <tr> </tr> al cui interno troviamo l’elenco delle celle <td> </td>.
Abbiamo tralasciato di mentionare il tag <caption> che contiene il titolo della tabella.

Vediamo ora indettaglio i singoli tag.
1) <table> … </table>

Questo tag, come detto, viene usato per definire una tabella. Tutti gli elementi della tabella che vedremo successivamente vanno racchiusi all’interno di questi tag.

Vediamo gli attributi che il tag <table> può avere:

Attributo Valore Descrizione Obblig./Facolt.
align left
center
right
Deprecated. Usare i fogli di stile. Non usare
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Usare i fogli di stile. Non usare
border pixels Specifica la larghezza dei bordi attorno alla tabella Facoltativo
cellpadding pixels Specifica lo spazio tra il bordo della cella ed il suo contenuto Facoltativo
cellspacing pixels Specifica lo spazio tra le celle Facoltativo
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Specifica se deve esserci un contorno (cornice) della tabella e quale parte deve essere visibile. Facoltativo
rules none
groups
rows
cols
all
Specifica quale parte dei bordi interni deve essere visibile. Facoltativo
summary text Specific ail sommario del contenuto di una tabella. Non viene mostrato a video. Facoltativo
width pixels
%
Specifica la larghezza di una tabella. Facoltativo

Inoltre può anche avere gli attributi standard cioè:

Attributo Valore Descrizione Obblig./Facolt.
class classname Attribuisce uno stile abbinando una classe. Vedremo successivamente con i CSS Facoltativo
dir ltr
rtl
Specifica la direzione del testo (ltr o rtl) Facoltativo
id id Specifica un id univoco per l’elemento. Vedremo successivamente con i CSS Facoltativo
lang language- code Specifica un codice linguaggio per il testo associato all’immagine. Facoltativo
style elemento di stile Attribuisce un elemento di stile senza far ricorso ad un foglio CSS. Vedremo successivamente. Facoltativo
title testo Titolo dato all’immagine che comparirà quando si porterà il mouse sull’immagine stessa. Facoltativo
xml:lang language- code Specifica un codice linguaggio per il testo associato all’immagine in un documento XHTML. Facoltativo

Alla fine della lezione verrà mostrato un esempio di tabella che include tutti i tag.

 

2) <caption> … </caption>

Con questo tag si può dare un titolo alla tabella che verrà mostrato dal browser subito prima della tabella. Va da sé che per scrivere il titolo della tabella può anche essere usato un qualsiasi altro sistema come per esempio usare i tag <hi> dove i = 1 .. 6 (vedi lezione 5 – tag base).

3) <tr> … </tr>
<td> … </td>

Con questi tags si identificano le righe (<tr>) e, all’interno di ciascuna riga, le celle (<td>). Righe e celle vanno così identificate sia nel corpo della tabella sia nell’ header o nel footer. All’interno dei tad <td> e </td> vi sarà quindi il contenuto della singola cella.

Gli attributi utilizzabili col tag <tr> sono:

Attributo Valore Descrizione Obblig./Facolt.
align left
center
right
justify
char
Allineamento orizzontale del contenuto di una riga Facoltativo
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Usare i fogli di stile. Non usare
char pixels Allineamento del contenuto di una riga ad un carattere. Non supportato da nessun browser, quindi da non usare. Non usare
charoff pixels Fa riferimento all’attributo char. Numero di caratteri da allineare. Non supportato da nessun browser, quindi da non usare. Non usare
valign top
middle
bottom
baseline
Allineamento verticale del contenuto di una riga Facoltativo

Gli attributi utilizzabili col tag <td> sono:

Attributo Valore Descrizione Obblig./Facolt.
align left
center
right
justify
char
Allineamento orizzontale del contenuto di una riga Facoltativo
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Usare i fogli di stile. Non usare
char pixels Allineamento del contenuto di una riga ad un carattere. Non supportato da nessun browser, quindi da non usare. Non usare
charoff pixels Fa riferimento all’attributo char. Numero di caratteri da allineare. Non supportato da nessun browser, quindi da non usare. Non usare
valign top
middle
bottom
baseline
Allineamento verticale del contenuto di una riga Facoltativo
abbr text Specifica un’abbreviazione del contenuto di una cella. Non ha alcun effetto visivo; può essere letto però da uno screen reader (programmi che leggono il contenuto dello schermo, magari per persone non vedenti) Facoltativo
axis categoria Usato per assegnare una categoria ad una cella. Non ha alcun effetto visivo; può essere letto però da uno screen reader. Facoltativo
colspan numero Numero di colonne da raggruppare a partire dalla cella. Numero deve essere >0 Numero =0 non è supportato da alcun browser. Non usare
headers header_id Specifica una o più celle di testata a cui la cella si riferisce. Non ha alcun effetto visivo; può essere letto però da uno screen reader. Facoltativo
height pixels
%
Deprecated. Altezza della cella. Usare i fogli di stile. Non usare
nowrap nowrap Deprecated. Il contenuto non deve andare a capo. Usare i fogli di stile. Non usare
rowspan numero Numero di righe da raggruppare a partire dalla cella. Numero deve essere >0 Numero =0 non è supportato da alcun browser escluso Opera. Non usare
scope col
colgroup
row
rowgroup
Definisce un modo per associare un gruppo di celle dell’header o del body (per esempio dice se una cella dell’header è testata per una colonna o gruppo di colonne. Non ha alcun effetto visivo; può essere letto però da uno screen reader. Facoltativo
width pixels
%
Deprecated. Larghezza della cella. Usare i fogli di stile. Non usare

Inoltre si possono usare gli attributi standard già visti più volte.

A parte il possibile uso di questi attributi, la formattazione del contenuto di una cella verrà fatta ricorrendo ai fogli di stile o in alternativa all’attributo <style> all’interno del tag <td> con la sintassi <td style=”…”>. L’utilizzo dei fogli di stile CSS, come vedremo è tuttavia sempre preferibile.

4) <thead> … </thead>
<tbody> … </tbody>
<tfoot> … </tfoot>
<th> … </th>

Con questi tags si identifica la testata della tabella (<thead>), il corpo della tabella (<tbody>) e il pié di pagina (<tfoot>) mentre con <th> si identificano le singole celle di testata. I tag <th>.. </th> di ciascuna cella di testata saranno inclusi nei tag <tr> .. </tr> che identificano la riga della testata, così come mostrato nell’esempio all’inizio di questa lezione.
All’interno di <tbody> e di <tfoot> viceversa ci saranno righe <tr> al cui interno troveremo le celle <td>.

Gli attributi che possono avere <thead>, <tbody> e <tfoot> sono gli stessi visti per <tr> con l’esclusione di bgcolor che peraltro abbiamo visto non va usato qui.

Gli attributi di <th> invece sono esattamente quelli visti per <td>, com’è ovvio visto che entrambi i tag individuano una cella. Va notato tuttavia che, pur individuando entrambi una cella della tabella hanno un comportamento differente per quanto riguarda il testo contenuto. Infatti:

  • Il testo nelle celle  <th> è in grassetto e centrato per default.
  • Il testo nelle celle  <td> è standard (non in grassetto) ed allineato a sinistra per default.

5) <colgroup> … </colgroup>
<col />

<colgroup> viene usato per definire un gruppo di colonne ai fini della formattazione delle stesse. All’interno di <colgroup> si possono definire degli elementi <col /> per dare una formattazione alle colonne o gruppi di colonne.
Tuttavia gli attributi di formattazione possono essere dati a livello di <colgroup> senza indicare i tag <col />.

Entrambi possono avere i seguenti attributi:

Attributo Valore Descrizione Obblig./Facolt.
align left
center
right
justify
char
Allineamento orizzontale del contenuto di una riga Facoltativo
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Usare i fogli di stile. Non usare
char pixels Allineamento del contenuto di una riga ad un carattere. Non supportato da nessun browser, quindi da non usare. Non usare
charoff pixels Fa riferimento all’attributo char. Numero di caratteri da allineare. Non supportato da nessun browser, quindi da non usare. Non usare
span numero Specifica il numero di colonne che il gruppo o la colonna deve raggruppare Facoltativo
valign top
middle
bottom
baseline
Allineamento verticale del contenuto di una riga Facoltativo

più come sempre gli attributi standard.

Facciamo un paio di esempi:

<table>
   <colgroup span="2" style="background-color:#00CC00;"> </colgroup>
   <colgroup style="background-color:#FF9900;"> </colgroup>
      <tr>
         ...
      </tr>
      ......
</table>

In questo modo diciamo che le prime 2 colonne (<colgroup span=”2″…) avranno colore di sfondo verde (style=”background-color:#00CC00;”), mentre la terza avrà sfondo arancione.

<table>
   <colgroup>
      <col span="2" style="background-color:#00CC00;" />
      <col style="background-color:#FF9900;" />
   </colgroup>
   <tr>
      ...
   </tr>
   .....
</table>

In questo secondo esempio abbiamo dato le stesse informazioni a livello di colonna. In entrambi gli esempi le colonne sono 3.

Vediamo per finire un esempio di tabella completa:

	<table width="600" border="1" cellspacing="0" cellpadding="0">
	   <caption>Budget semestrale</caption>
           <thead>
              <tr style="background-color:#036; color:#9FF; height:30px;">
                <th rowspan="2">Voci</th>
                <th colspan="2">Gennaio</th>
                <th colspan="2">Febbraio</th>
                <th colspan="2">Marzo</th>
                <th colspan="2">Aprile</th>
                <th colspan="2">Maggio</th>
                <th colspan="2">Giugno</th>
              </tr>
              <tr style="background-color:#900; color:#FFC; height:25px;">
                <th>Nr.</th>
                <th>$</th>
                <th>Nr.</th>
                <th>$</th>
                <th>Nr.</th>
                <th>$</th>
                <th>Nr.</th>
                <th>$</th>
                <th>Nr.</th>
                <th>$</th>
                <th>Nr.</th>
                <th>$</th>
              </tr>
	   </thead>
	   <tfoot>
              <tr align="right" style="background-color:#3C0; height:25px;">
            	<td>Totali</td>
                <td>51</td>
                <td>130</td>
                <td>43</td>
                <td>106</td>
                <td>66</td>
                <td>154</td>
                <td>78</td>
                <td>182</td>
                <td>77</td>
                <td>164</td>
                <td>68</td>
                <td>146</td>
              </tr>
           </tfoot>
           <tbody>
              <tr align="right">
                <td align="left">Voce 1</td>
                <td>10</td>
                <td>25</td>
                <td>8</td>
                <td>20</td>
                <td>12</td>
                <td>29</td>
                <td>15</td>
                <td>35</td>
                <td>14</td>
                <td>30</td>
                <td>13</td>
                <td>28</td>
              </tr>
              <tr align="right">
                <td align="left">Voce 2</td>
                <td>8</td>
                <td>26</td>
                <td>10</td>
                <td>22</td>
                <td>13</td>
                <td>30</td>
                <td>14</td>
                <td>34</td>
                <td>14</td>
                <td>30</td>
                <td>15</td>
                <td>32</td>
              </tr>
              <tr align="right">
                <td align="left">Voce 3</td>
                <td>12</td>
                <td>28</td>
                <td>8</td>
                <td>20</td>
                <td>14</td>
                <td>32</td>
                <td>16</td>
                <td>38</td>
                <td>15</td>
                <td>32</td>
                <td>14</td>
                <td>30</td>
              </tr>
              <tr align="right">
                <td align="left">Voce 4</td>
                <td>10</td>
                <td>26</td>
                <td>8</td>
                <td>20</td>
                <td>12</td>
                <td>29</td>
                <td>15</td>
                <td>35</td>
                <td>18</td>
                <td>37</td>
                <td>13</td>
                <td>28</td>
              </tr>
              <tr align="right">
                <td align="left">Voce 5</td>
                <td>11</td>
                <td>25</td>
                <td>9</td>
                <td>24</td>
                <td>15</td>
                <td>34</td>
                <td>18</td>
                <td>40</td>
                <td>16</td>
                <td>35</td>
                <td>13</td>
                <td>28</td>
              </tr>
	   </tbody>
	</table>

A video il browser mostrerà:

Budget semestrale
Voci Gennaio Febbraio Marzo Aprile Maggio Giugno
Nr. $ Nr. $ Nr. $ Nr. $ Nr. $ Nr. $
Totali 51 130 43 106 66 154 78 182 77 164 68 146
Voce 1 10 25 8 20 12 29 15 35 14 30 13 28
Voce 2 8 26 10 22 13 30 14 34 14 30 15 32
Voce 3 12 28 8 20 14 32 16 38 15 32 14 30
Voce 4 10 26 8 20 12 29 15 35 18 37 13 28
Voce 5 11 25 9 24 15 34 18 40 16 35 13 28

Non vi preoccupate se vedete l’allineamento dei numeri a sinistra, mentre nel codice abbiamo indicato align=”right”, è un bug di WordPress, ma se mettete questo codice in una pagina html, il browser ve lo mostrerà correttamente allineato (i numeri e “Totali” allineati a destra, le “Voci” a sinistra).

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *