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

Capitolo 477.   Tabelle complesse

È possibile costruire tabelle un po' più complesse, utilizzando gli attributi COLSPAN e ROWSPAN degli elementi TD e TH.

Si può immaginare che ogni cella di una tabella possa espandersi orizzontalmente (verso destra) e verticalmente (verso il basso), ma in condizioni normali, ogni cella si espande orizzontalmente e verticalmente di una sola cella.

Quando una cella si espande oltre il proprio spazio, va a occupare quello delle celle adiacenti, che non devono essere dichiarate.

477.1   File «tabelle-complesse-01.html»

Per esercizio, si riprenda il file tabelle-02.html e lo si salvi con il nome tabelle-complesse-01.html, modificandolo nel modo 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 complesse con HTML,
      6         esempio 01">
      7     <META NAME="Keywords" CONTENT="HTML, tabella, tabelle, esempio">
      8     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      9     <META NAME="Date" CONTENT="2007.01.01">
     10     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     11     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     12     <META NAME="Robots" CONTENT="ALL">
     13     <TITLE>Tabelle</TITLE>
     14 </HEAD>
     15 <BODY>
     16 
     17 <H1>Operatori</H1>
     18 
     19 <P>Segue una tabella contenente l'elenco degli operatori matematici
     20 pi&ugrave; comuni.</P>
     21 
     22 <TABLE SUMMARY="operatori">
     23 <CAPTION>Operatori matematici comuni</CAPTION>
     24 <THEAD>
     25     <TR>
     26     <TH></TH>
     27     <TH ROWSPAN="2"><P>Operatore e operandi</P></TH>
     28     <TH COLSPAN="2"><P>Annotazioni</P></TH>
     29     </TR>
     30     <TR>
     31     <TH></TH>
     32     <TH><P>Operazione</P></TH>
     33     <TH><P>Descrizione</P></TH>
     34     </TR>
     35 </THEAD>
     36 <TBODY>
     37     <TR>
     38     <TH ROWSPAN="4"><P>le quattro operazioni</P></TH>
     39     <TD><P><CODE><VAR>op1</VAR>+<VAR>op2</VAR></CODE></P></TD>
     40     <TD><P>somma</P></TD>
     41     <TD><P>Somma i due operandi.</P></TD>
     42     </TR>
     43     <TR>
     44     <TD><P><CODE><VAR>op1</VAR>-<VAR>op2</VAR></CODE></P></TD>
     45     <TD><P>sottrazione</P></TD>
     46     <TD><P>Sottrae il valore del secondo operando
     47         da quello del primo.</P></TD>
     48     </TR>
     49     <TR>
     50     <TD><P><CODE><VAR>op1</VAR>*<VAR>op2</VAR></CODE></P></TD>
     51     <TD><P>moltiplicazione</P></TD>
     52     <TD><P>Moltiplica i due operandi.</P></TD>
     53     </TR>
     54     <TR>
     55     <TD><P><CODE><VAR>op1</VAR>/<VAR>op2</VAR></CODE></P></TD>
     56     <TD><P>divisione</P></TD>
     57     <TD><P>Divide il primo operando per il valore del secondo.</P></TD>
     58     </TR>
     59 </TBODY>
     60 </TABLE>
     61 
     62 </BODY>
     63 </HTML>

Nel risultato si può osservare che è stata aggiunta una colonna, che nel corpo si mostra come una cella unica, usata come intestazione delle righe; inoltre, nell'intestazione superiore la cella contenente la stringa «Operatore e operandi» si espande in basso occupando lo spazio della cella inferiore, mentre la cella contenente la stringa «Annotazioni» occupa anche lo spazio della cella successiva a destra.

Figura 477.2. Aspetto del file tabelle-complesse-01.html. Per facilitare l'individuazione delle aree occupate dalle celle, è stato aggiunto un bordo attorno a ogni cella.

tabelle-complesse-01.html

477.2   Verifica sull'uso di tabelle complesse

In base a quanto appreso fino a questo punto, si realizzi il file verifica-tabelle-complesse-01.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore. Per facilitare l'interpretazione dell'immagine, sono stati inseriti i bordi attorno alla tabella, ma la verifica richiede la produzione di una tabella normale, senza bordi:

verifica-tabelle-complesse-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_complesse.htm

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

Valid ISO-HTML!

CSS validator!