[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico] [volume] [parte]


Capitolo 476.   Tabelle

La tabella è definita dall'elemento TABLE; al suo interno può essere inclusa una didascalia rappresentata dall'elemento CAPTION, quindi il contenuto della tabella viene distinto in intestazione, piede e corpo, all'interno dei quali si inseriscono le righe della tabella stessa.

Figura 476.1. Esempio di una tabella.

esempio di tabella

L'intestazione e il piede non sono obbligatori; in ogni caso, se si utilizzano vanno inseriti ordinatamente prima del corpo. Se non si indica l'intestazione o il piede, le righe che costituiscono il corpo vanno delimitate ugualmente tra i marcatori che rappresentano l'elemento corrispondente.

Lo standard ISO 15445 obbliga all'utilizzo dell'attributo SUMMARY nell'elemento TABLE. Questo attributo dovrebbe permettere di riassumere il contenuto della tabella per quelle situazioni in cui dovesse essere impossibile consultarla correttamente.

Tabella 476.2. Elementi da usare per la realizzazione delle tabelle HTML.

Elemento Significato
TABLE Delimita la tabella.
  CAPTION Didascalia.
  THEAD Righe di intestazione.
  TFOOT Righe del piede.
  TBODY Righe del corpo.
    TR Riga normale (table row).
      TH Elemento evidenziato di una riga (table head).
      TD Elemento di una riga (table data).

L'esempio seguente rappresenta una tabella molto banale, senza intestazione e senza piede:

<TABLE SUMMARY="uno due tre quattro cinque sei">
<TBODY>
    <TR><TD><P>uno</P></TD><TD><P>due</P></TD></TR>
    <TR><TD><P>tre</P></TD><TD><P>quattro</P></TD></TR>
    <TR><TD><P>cinque</P></TD><TD><P>sei</P></TD></TR>
</TBODY>
</TABLE>

Il risultato è uno specchietto simile a quello che si vede di seguito:

tabella senza intestazione

L'esempio seguente mostra l'aggiunta di una riga di intestazione:

<TABLE SUMMARY="uno due tre quattro cinque sei">
<THEAD>
    <TR><TD><P>Primo</P></TD><TD><P>Secondo</P></TD></TR>
</THEAD>
<TBODY>
    <TR><TD><P>uno</P></TD><TD><P>due</P></TD></TR>
    <TR><TD><P>tre</P></TD><TD><P>quattro</P></TD></TR>
    <TR><TD><P>cinque</P></TD><TD><P>sei</P></TD></TR>
</TBODY>
</TABLE>

tabella con intestazione

L'esempio seguente aggiunge anche una didascalia molto breve:

<TABLE SUMMARY="uno due tre quattro cinque sei">
<CAPTION>Tabella banale</CAPTION>
<THEAD>
    <TR><TD><P>Primo</P></TD><TD><P>Secondo</P></TD></TR>
</THEAD>
<TBODY>
    <TR><TD><P>uno</P></TD><TD><P>due</P></TD></TR>
    <TR><TD><P>tre</P></TD><TD><P>quattro</P></TD></TR>
    <TR><TD><P>cinque</P></TD><TD><P>sei</P></TD></TR>
</TBODY>
</TABLE>

tabella con intestazione e didascalia

Le tabelle HTML possono essere molto più complesse di quanto è stato mostrato qui. Vale la pena di sottolineare il fatto che gli elementi TD, ovvero le celle all'interno delle righe, possono contenere sia testo normale, sia blocchi di testo, ma qui, come negli altri capitoli di queste lezioni, si preferisce usare sempre solo blocchi.

Lo standard ISO 15445 non consente l'utilizzo di attributi per la descrizione dei bordi da far risaltare, perché per questo si possono applicare degli stili, pertanto, inizialmente si ottengono solo tabelle prive di linee di contorno.

476.1   File «tabelle-01.html»

Si crei il file tabelle-01.html con il contenuto seguente:

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
      2 <HTML LANG="it">
      3 <HEAD>
      4     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      5     <META NAME="Description" CONTENT="Tabelle con HTML, esempio 01">
      6     <META NAME="Keywords" CONTENT="HTML, tabella, tabelle, esempio">
      7     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      8     <META NAME="Date" CONTENT="2007.01.01">
      9     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     10     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     11     <META NAME="Robots" CONTENT="ALL">
     12     <TITLE>Tabelle</TITLE>
     13 </HEAD>
     14 <BODY>
     15 
     16 <H1>Operatori</H1>
     17 
     18 <P>Segue una tabella contenente l'elenco degli operatori matematici
     19 pi&ugrave; comuni.</P>
     20 
     21 <TABLE SUMMARY="operatori">
     22 <CAPTION>Operatori matematici comuni</CAPTION>
     23 <THEAD>
     24     <TR>
     25     <TD><P>Operatore e operandi</P></TD>
     26     <TD><P>Operazione</P></TD>
     27     <TD><P>Descrizione</P></TD>
     28     </TR>
     29 </THEAD>
     30 <TBODY>
     31     <TR>
     32     <TD><P><CODE><VAR>op1</VAR>+<VAR>op2</VAR></CODE></P></TD>
     33     <TD><P>somma</P></TD>
     34     <TD><P>Somma i due operandi.</P></TD>
     35     </TR>
     36     <TR>
     37     <TD><P><CODE><VAR>op1</VAR>-<VAR>op2</VAR></CODE></P></TD>
     38     <TD><P>sottrazione</P></TD>
     39     <TD><P>Sottrae il valore del secondo operando
     40         da quello del primo.</P></TD>
     41     </TR>
     42     <TR>
     43     <TD><P><CODE><VAR>op1</VAR>*<VAR>op2</VAR></CODE></P></TD>
     44     <TD><P>moltiplicazione</P></TD>
     45     <TD><P>Moltiplica i due operandi.</P></TD>
     46     </TR>
     47     <TR>
     48     <TD><P><CODE><VAR>op1</VAR>/<VAR>op2</VAR></CODE></P></TD>
     49     <TD><P>divisione</P></TD>
     50     <TD><P>Divide il primo operando per il valore del secondo.</P></TD>
     51     </TR>
     52 </TBODY>
     53 </TABLE>
     54 
     55 </BODY>
     56 </HTML>

Nel risultato che si ottiene attraverso un navigatore comune, sono assenti i bordi e non si distinguono le intestazioni dalle altre righe.

Figura 476.10. Aspetto del file tabelle-01.html con un navigatore.

tabelle-01.html

476.2   File «tabelle-02.html»

Per esercizio, si salvi il file anche con il nome tabelle-02.html e quindi lo si modifichi, in modo da usare l'elemento TH quando ciò è appropriato, in modo da ottenere un risultato simile a quello seguente:

tabelle-02.html

476.3   Verifica sull'uso di tabelle elementari

In base a quanto appreso fino a questo punto, si realizzi il file verifica-tabelle-01.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore:

verifica-tabelle-01.html

Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:

  1. la stampa del risultato ottenuto attraverso il navigatore;

  2. la stampa del sorgente.

Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.

Appunti di informatica libera 2007.02 --- Copyright © 2000-2007 Daniele Giacomini -- <daniele (ad) swlibero·org>


Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome tabelle.htm

[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico]

Valid ISO-HTML!

CSS validator!