È 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.
332.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="2006.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ù 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 332.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.
332.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:
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
la stampa del risultato ottenuto attraverso il navigatore;
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.