Utente:Corsaiolo/Sgabuzzino
Tabelle
Tabelle non rettangolari
| Parole in -occo | Parole in -accio | |||
|---|---|---|---|---|
| Con la A | Arrocco | Allocco | Addiaccio | Abbraccio |
| Con la B | Barocco | Blocco | Braccio | Brogliaccio |
| Con la C | Ciocco | Cocco | Carpaccio | Canovaccio |
| Diplococco | Dispaccio |
A volte può capitare di dover comporre una tabella in cui è necessario non figurino alcune caselle. Questo risultato essenzialmente si ottiene uniformando il colore dello sfondo delle cellette "da eliminare" a quello dello sfondo su cui giacciono (#FFFFFF o semplicemente "white" quello delle pagine, #F8F9FA quello interno delle tabelle di class=wikitable, #FFEEEE quello delle pagine di aiuto), e cancellandone i bordi nello stesso o in altri modi. La tabella qui a fianco contiene un campionario di questi metodi (non tutti sono perfettamente intercambiabili). Il codice della tabella è riportato qui sotto.
Note alle righe evidenziate:
- Il comando
border:nonedeve essere presente negli attributi della tabella per funzionare nelle caselle. - Parallelamente al
border:none, esiste anche il comandobackground:none, che per funzionare richiede anch'esso di essere già presente fra gli attributi della tabella. Quest'ultimo comando, però, non si limita ad eliminare lo sfondo della sola cella in cui è applicato, ma elimina anche quello di tutte le celle non di intestazione della tabella. - Il comando
bgcolor=non ha effetto sulle celle di intestazione. Al suo posto bisogna usarestyle="background:". - La sequenza dei lati a cui si riferiscono i valori di
border-widthè: superiore, destro, inferiore, sinistro. (da mezzogiorno in senso orario) - Se condivisi con altre cellette, i lati sinistro e superiore di una cella (in questo esempio: Blocco) non possono essere cancellati/occultati (a meno di non assegnare ai bordi lo spessore di 2px o più). Al loro posto, devono essere cancellati/occultati i lati destro e inferiore delle cellette ad essa adiacenti (Barocco e Allocco).
{| class=wikitable style="border:none; font-size: 95%;"
! style="border:none; background:#FFEEEE;"|
! Parole in -occo
! style="border-top:solid 1px #FFEEEE; background:#FFEEEE;"|
! Parole in -accio
! style="border-style:solid; border-width: 0 0 1px 1px; background:#FFEEEE;"|
|-
! Con la A
| Arrocco || style="border-bottom:0px;"| Allocco || Addiaccio || Abbraccio
|-
! style="border:none; background:#FFEEEE;"| Con la B
| style="border-right:solid 1px #F8F9FA;"| Barocco || style="border:#F8F9FA solid 1px;"| Blocco
| Braccio ||bgcolor=#FFEEEE style="border-right:solid 1px #FFEEEE;"| Brogliaccio
|-
! Con la C
| Ciocco || Cocco || Carpaccio || Canovaccio
|-
| bgcolor=#FFEEEE style="border:#FFEEEE solid 1px; border-right:0px"|
| Diplococco ||bgcolor=#FFEEEE style="border-bottom:solid 1px #FFEEEE;"| || Dispaccio
| bgcolor=#FFEEEE style="border-right:solid 1px #FFEEEE; border-bottom:solid 1px #FFEEEE;"|
|}
Tabelle nidificate
Le tabelle nidificate sono tabelle costruite all'interno di altre tabelle, e vengono generalmente utilizzate per risolvere problemi di composizione in casi particolarmente complessi, o per disporre i dati e gli oggetti secondo schemi che la sintassi di pagine e tabelle non permetterebbe.
Un paio di esempi di tabelle usate per "impacchettare" e allineare altre tabelle sono disponibili nella sezione immediatamente sottostante (tabelle "semplici" e tabelle "wikitable" all'interno di tabelle "semplici" senza bordi né sfondo).
Per quanto riguarda invece la nidificazione di tabelle all'interno di tabelle "propriamente dette", che è poi l'argomento principale di questa trattazione, occorre dire che è buona norma evitarla per quanto possibile, dal momento che essa può complicarne anche di parecchio i codici, e che la gran parte dei problemi per i quali si sarebbe tentati di farvi ricorso possono in realtà essere risolti con un uso adeguato di comandi quali rowspan e colspan.
Fatte salve queste considerazioni, le tabelle nidificate restano uno dei tanti strumenti a disposizione di chi crea e compila pagine e tabelle, e conoscerne i rudimenti può sempre rivelarsi utile.
Quali tabelle usare
La scelta del tipo di tabella da nidificare è opportuno ricada su una tabella "semplice".
Queste tabelle infatti, a differenza di quelle marcate class=wikitable, sono molto meno "ingombranti" e infinitamente più malleabili (una di esse ad esempio è la barra che divide i due gruppi di tabelle qui sotto), oltre al fatto che di partenza non hanno né sfondo proprio (assumono automaticamente quello su cui "poggiano") né bordi predefiniti né margini esterni, tutte cose che, se già presenti, sarebbe il più delle volte necessario cancellare o ridefinire, con rese finali quasi mai all'altezza delle aspettative.
- Tabelle "semplici" e tabelle "wikitable"
|
|
|
|
Padding e border-collapse
Normalmente, quando a una tabella "semplice" nidificata si aggiungono uno o più bordi interni (per mezzo - in questo caso - del comando style="border-bottom:solid 1px #A2A9B1"), questi non raggiungono mai i bordi della cella-contenitore:
|
Per far sì che ciò avvenga, occorre inserire i comandi style="padding:0px" fra gli attributi della cella-contenitore (elimina il "cuscinetto" fra la Tabella nidificata e i bordi della cella-contenitore) e style="border-collapse:collapse" fra gli attributi della tabella nidificata (consente ai bordi di fare "quel passetto in più" e agganciarsi):
|
Qui sotto il codice della tabella così modificata, con le righe salienti in evidenza.
{|class=wikitable style="font-size: 95%;" <!-- Inizio della tabella principale -->
|style="padding:0px"| <!-- Attributi della cella-contenitore -->
{|bgcolor=#F2E0CE style="border-collapse:collapse" <!-- Attributi (oltre che inizio) della tabella nidificata -->
|style="border-bottom:solid 1px #A2A9B1"| Tabella "semplice"
|-
| nidificata (e colorata)
|} <!-- Fine della tabella nidificata -->
|} <!-- Fine della tabella principale -->
Applicando questi comandi i bordi della cella-contenitore vanno naturalmente a "schiacciarsi" sul contenuto della nidificata, ma questo è un inconveniente a cui si potrà facilmente ovviare. Ultima nota: #A2A9B1 è il colore di default dei bordi delle tabelle di class=wikitable.
Dividere verticalmente una cella (senza bordi interni)
| Tempo | + | Atleta | Nazionalità | Evento |
|---|---|---|---|---|
| Kayak | ||||
| 1'10"11 |  b
|
Anna Oddo Alula Nayan |
 Italia India
|
Campionati palindromatici 2002 |
Esempio pratico
Nel corso di una manifestazione sportiva, un'atleta stabilisce il record del mondo nelle batterie di qualificazione (da cui la b), e un'altra lo pareggia in finale (cosa che non richiede specificazioni). Nella pagina dei record di quello sport andranno inseriti nella stessa riga entrambi i primati, con tutti i dati che li identificano (tempo, atleta, nazionalità, data, evento, eccetera), avendo naturalmente cura di far figurare una volta sola i dati comuni a entrambe le prestazioni.
Fra questi, e b vanno inseriti nella stessa casella, ed è a questo punto che sorgono i problemi: la grammatica di Wikipedia non permette infatti di attribuire più di un valore di allineamento (verticale o orizzontale che sia) ai vari contenuti di una stessa cella, per cui è impossibile far "galleggiare" la targhetta a mezza altezza e al contempo collocare la b nella riga superiore.
Una soluzione alla buona può essere quella di far figurare la b (opportunamente inclusa fra i comandi <big> e </big> perché risulti della dimensione normale) come apice della targhetta , ma se si vogliono le cose fatte bene l'unica soluzione è nidificare, ossia costruire una tabella (senza bordi) all'interno della cella in questione.
Primo passo: creare la tabella da nidificare
La sintassi in questo caso è estremamente semplice (il nella celletta della b serve a "dare una presa" al comando <br/>, mentre lo spazio fra i bordi blu e rossi è dovuto al fatto che nelle tabelle "semplici" il comando style="border-spacing:" è impostato per default sul valore di 1px).
{|
|{{Recordicona|RM|dim=small}}||''b''<br/>
|}
| dà |
|
ossia, per averne una percezione più chiara* |
|
| * (Dove | è il bordo della tabella, mentre |
quello delle singole cellette) |
Secondo passo: inserire la tabella nella cella-contenitore
Anche questo è presto fatto: basterà svuotare la cella in cui andrà posizionata la nidificata e incollare sulla riga immediatamente sottostante al suo contrassegno | il codice della tabella appena creata:
{| class=wikitable style="font-size: 95%;"
! Tempo !! + !! Atleta
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|1'10"11
| <!--- Cella-contenitore --->
{|
|{{Recordicona|RM|dim=small}}||''b''<br/>
|}
|Anna Oddo<br/>Alula Nayan
|}
| dà |
| Tempo | + | Atleta | ||
|---|---|---|---|---|
| Kayak | ||||
| 1'10"11 |
|
Anna Oddo Alula Nayan |
Terzo passo: inserire "padding" e "border-collapse"
A questo punto il lavoro potrebbe anche considerarsi concluso. Tuttavia, in questo caso, la cella-contenitore così modificata supera di parecchio le dimensioni massime consentite, e per far sì che non vada a stravolgere la formattazione della tabella in cui dovrà essere inserita, bisogna applicarvi i già citati comandi style="padding:0px"...
| Tempo | + | Atleta | ||
|---|---|---|---|---|
| Kayak | ||||
| 1'10"11 |
|
Anna Oddo Alula Nayan |
...e style="border-collapse:collapse" (notare come porti i bordi blu e rossi a sovrapporsi fra loro).
| Tempo | + | Atleta | ||
|---|---|---|---|---|
| Kayak | ||||
| 1'10"11 |
|
Anna Oddo Alula Nayan |
Quarto passo: ricostruire il "padding"
Eliminati i bordi "illustrativi" blu e rossi...
| Tempo | + | Atleta | ||
|---|---|---|---|---|
| Kayak | ||||
| 1'10"11 |
|
Anna Oddo Alula Nayan |
...non resta che dare un po' di "respiro" alla cella così creata, cosa che si può fare in vari modi, il più pratico ed efficace dei quali* è senza dubbio quello di ricostruire "dall'interno" della nidificata il padding azzerato "dall'esterno".
Per far ciò basterà richiamare in causa l'a questo punto familiare comando style="padding:", corredato dei valori in px che si vuole assegnare a ciascuno dei quattro lati (l'ordine è sempre quello: top, right, bottom, left, ossia "da mezzogiorno in senso orario"). In alternativa, quando come in questo caso l'unico padding da ricostruire è quello "orizzontale", basterà usare i comandi padding-left e padding-right.
Come sottolineato in precedenza, il padding di una cella di class=wikitable è di 5px + 5px "orizzontalmente" e di 2px + 2px "verticalmente".
|
|
Il padding orizzontale (spazio fra il contenuto e i bordi destro e sinistro della cella) di una tabella semplice dotata di style="border-collapse:collapse;" è di 1px, quello di una tabella di class=wikitable è di 5px, mentre uno spazio (sia esso "normale" o ) consta di 4px.
ottenendo così una cella per aspetto e dimensioni perfettamente identica all'originale, seppur finalmente rispondente alle esigenze di partenza.
| Tempo | + | Atleta | ||
|---|---|---|---|---|
| Kayak | ||||
| 1'10"11 |
|
Anna Oddo Alula Nayan |
| Tempo | + | Atleta |
|---|---|---|
| Kayak | ||
| 1'10"11 | b
|
Anna Oddo Alula Nayan |
Codice della nidificata nella tabella "Risultato finale"
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="padding: 2px 2px 2px 5px"|{{Recordicona|RM|dim=small}}
|style="padding: 2px 5px 2px 2px"|''b''<br/>
|}
* A dire il vero, il metodo più pratico in assoluto sarebbe quello di evitare di inserire il comando style="padding:0px" fra gli attributi della cella-contenitore, la quale però così facendo risulterebbe un po' più grande del normale, senza contare il fatto che lo spazio fra i singoli oggetti (nel caso in esame e b) risulterebbe dimezzato (1+1=2px al posto dei 4px di un o di un colpo di barra spaziatrice).
Dividere orizzontalmente una cella (senza bordi interni)
| Tempo | + | Atleta | Nazionalità | Evento |
|---|---|---|---|---|
| Kayak | ||||
| 1'00"01 |
|
Alula Nayan Anna Oddo Anna Oddo |
India Italia San Marino
|
Campionati palindromatici 2010 Campionati palindromatici 2016 IX meeting "ai latI d'Italia" |
Esempio pratico
Uno stesso record sportivo (esempio a fianco) è stato prima stabilito e poi pareggiato per due volte, queste ultime dalla stessa atleta (che, per comodità esemplificativa, nell'intervallo fra la prima e la seconda prestazione ha cambiato cittadinanza).
Ora la pulizia stilistica impone anche in questo caso di riportare una sola volta il nome della seconda atleta, posizionato a mezza altezza rispetto alle due righe-nazione corrispondenti, mentre quello della prima atleta deve restare fermo dove si trova. Questo sarebbe il lavoro perfetto per un'interlinea a 1,5 (un <br/> e mezzo), ma dato che su Wikipedia questa funzione non sembra esserci (trad.: io non l'ho trovata), diventa necessario ricorrere alla nidificazione.
Dividere orizzontalmente una cella
La procedura è quella già vista: prima si compone la tabella desiderata, in questo caso su righe successive (tramite |-), poi la si nidifica, dotandola di padding e collapse, e infine ci si dedica agli inevitabili (perlomeno in questo caso) aggiustamenti. A differenza della sezione precedente, a questo proposito sarà possibile agire solo in due modi, anziché tre*:
| ||||||||||||||||||||
- Regolando col comando
style="height:"l'altezza delle singole cellette; - Inserendo prima, dopo e/o fra di esse (sempre su righe successive) una o più cellette, vuote, per poi regolare anch'esse in altezza col metodo appena illustrato.
* Fra le opzioni si potrebbe annoverare anche il <br/>, ma essendo questo metodo molto meno preciso e maneggevole dei due elencati, non val la pena includerlo nella lista. Il comando rowspan=2 è invece applicabile solo a patto che, invece di una tabella 1x2, se ne costruisca una 2x3, con le due cellette a cui andrà ad "appoggiarsi" quella su due righe riempite con spazi insecabili oppure con spazi a larghezza zero ​.
Ecco perciò come si presenta il risultato finale. L'allineamento verticale è stato raggiunto con l'applicazione simultanea dei due metodi esposti, mentre il padding orizzontale è stato garantito dall'aggiunta di spazi prima dei contenuti testuali e dopo il contenuto testuale di lunghezza maggiore.
| + | Atleta | Nazionalità | ||
|---|---|---|---|---|
| Kayak | ||||
|
|
|
India Italia San Marino
|
| + | Atleta | Nazionalità |
|---|---|---|
| Kayak | ||
|
|
Alula Nayan Anna Oddo Anna Oddo |
India Italia San Marino
|
Codice della nidificata nella tabella "Risultato finale"
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="padding: 2px 5px 2px 5px;"|Alula Nayan
|-
|style="padding: 8px 5px 13px 5px;"|Anna Oddo
|}
Due metodi diversi
Sfruttando il fatto che due tabelle "semplici" i cui codici vengono riportati consecutivamente si dispongono l'una al di sotto e a ridosso dell'altra, ecco un altro modo per dividere orizzontalmente una cella: riempirla con due tabelle da una celletta invece che con una tabella da due cellette. Come si può notare dalle tabelle-esempio qui sotto (dotate di padding ma non di collapse), la differenza principale è sostanzialmente una, e salta all'occhio immediatamente. Un'altra differenza, che può forse causare qualche problema in sede di rifinitura, è che applicando a nidificate dotate di bordi e così disposte il comando style="border-collapse:collapse", i bordi "confinanti" delle tue tabelle non andranno a sovrapporsi ma semplicemente ad accostarsi, determinando in quel tratto la comparsa di un bordo doppio (cosa che si risolve eliminando - o, meglio, evitando di creare - il più corto dei due).
| + | Atleta | Nazionalità | ||
|---|---|---|---|---|
| Kayak | ||||
|
|
|
.svg){kind=small} Gran Bretagna Italia San Marino
|
| + | Atleta | Nazionalità | ||
|---|---|---|---|---|
| Kayak | ||||
|
|
|
Gran Bretagna Italia San Marino
|
Dividere verticalmente una cella (con bordi interni)
| Cifre dispari |
1 | 3 | 5 | 7 | 9 | ||||
|---|---|---|---|---|---|---|---|---|---|
| Cifre pari |
| ||||||||
| Cifre dispari |
1 | 3 | 5 | 7 | 9 | ||||
|---|---|---|---|---|---|---|---|---|---|
| Cifre pari |
| ||||||||
Una tabella nidificata con bordi interni si costruisce allo stesso modo di una senza bordi interni: una volta creata la tabella desiderata, questi si inseriscono collocando il comando style="border-right:solid 1px #A2A9B1" e/o analoghi (gli altri sono left, top e bottom) fra gli attributi delle singole cellette.
Fare questo però a volte non basta, come testimonia la tabella "Nidificata grezza" qui a fianco. Bisogna infatti tenere presente che la cella-contenitore e le cellette nidificate appartengono a due tabelle distinte, le quali "non si conoscono né si parlano", se non indirettamente (la cella-contenitore può ad esempio farsi "trascinare" in ampiezza dalla nidificata, ma niente di più*).
Ecco perciò che, per ottenere il risultato voluto, occorre in molti casi applicare alle cellette della nidificata i comandi style="height:" e style="width:", seguiti da un valore in pixel tale per cui la cella-contenitore risulti completamente "riempita" dalla nidificata, come nella tabella "Nidificata giustificata". I valori esatti per entrambi i parametri bisogna purtroppo stabilirli tramite prove ed errori (in questo caso il sistema non accetta valori percentuali), a meno che - come nella tabella "giustificata" qui a fianco - la larghezza della cella-contenitore non sia anch'essa stabilita con la funzione style="width:", nel qual caso basterà assegnare alle cellette nidificate un valore uguale per tutte, e tale per cui, moltiplicato per il numero di cellette coinvolte, dia come risultato una misura superiore alla larghezza totale della cella-contenitore. (nell'esempio qui a fianco: cella-contenitore di 220px, singole cellette di 59px, che moltiplicato per 4 fa 236px, ma sarebbero andati bene anche valori di 60, 94, 327, letteralmente qualsiasi numero, purché uguale per tutte)
* Oltre a questo, la cella-contenitore allinea la tabella nidificata a sinistra e la centra verticalmente, ma ciò non implica un "riconoscimento", dato che si tratta di un'impostazione di default, e perciò applicata a qualsiasi "oggetto".
Dividere orizzontalmente una cella (con bordi interni)
| Cifre dispari | Cifre pari | ||||
|---|---|---|---|---|---|
| 1 |
| ||||
| 3 | |||||
| 5 | |||||
| 7 | |||||
| 9 |
| Cifre dispari | Cifre pari | ||||
|---|---|---|---|---|---|
| 1 |
| ||||
| 3 | |||||
| 5 | |||||
| 7 | |||||
| 9 |
Anche in questo caso occorre adottare gli accorgimenti della precedente sezione, senza particolari differenze fra questa e quella, tranne che per il fatto che il "giochetto" di attribuire alla cella-contenitore un valore n per poi giustificare le cellette nidificate superandolo con la somma dei loro valori, con le altezze non funziona.
Dividere una cella in quattro cellette (2x2, con bordi interni)
Questa sezione è un po' il "riassunto delle puntate precedenti", dato che racchiude gran parte dei codici già analizzati e consente di costruire tabelle nidificate sviluppate su entrambi i piani dello spazio, volendo anche ben oltre il 2x2 illustrato in questi esempi. I codici di queste quattro tabelle, "depurati" dei colori e dei bordi tratteggiati, sono riportati nella sezione "I quattro metodi".
Quattro metodi diversi
Cella-contenitore
Tabella nidificata
2ª tabella nidificata
3ª tabella nidificata
4ª tabella nidificata
| Nomi | Nomi composti | ||||
|---|---|---|---|---|---|
| Edoardo Filippo Giuseppe Simone Valentino |
|
| Nomi | Nomi composti | ||||
|---|---|---|---|---|---|
| Edoardo Filippo Giuseppe Simone Valentino |
|
| Nomi | Nomi composti | ||||
|---|---|---|---|---|---|
| Edoardo Filippo Giuseppe Simone Valentino |
|
| Nomi | Nomi composti | ||||
|---|---|---|---|---|---|
| Edoardo Filippo Giuseppe Simone Valentino |
|
- Tabella 1.1: il modo più semplice per nidificare una tabella in una cella.
- Tabella 1.2: da usare quando all'interno della cella-contenitore è necessario avere due o più righe che differiscano per il numero di celle in esse contenute.
- Tabella 1.3: stessa cosa della 1.2 ma a proposito delle colonne.
- Tabella 1.4: è l'interpolazione delle due precedenti; consente di ottenere tabelle nidificate con la più ampia libertà di formattazione possibile (ogni "cella singola" può essere trasformata in una tabella a sviluppo verticale e/o orizzontale).
Oltre a tutte le considerazioni che si possono fare a riguardo, è interessante notare come quattro codici (cioè "genotipi") del tutto diversi producano qui quattro tabelle (cioè "fenotipi") del tutto identiche.
I quattro metodi
Per non sovraccaricare il codice, il padding delle nidificate è stato ottenuto collocando spazi prima dei contenuti testuali e dopo i contenuti testuali di lunghezza maggiore.
Cella-contenitore + tabella/e nidificata/e
Tabella 1.1
{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.1
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="border-right:solid 1px #A2A9B1; width:35px" align=center|Gian|| Franco<br/> Maria
|-
|style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center|Pier||style="border-top:solid 1px #A2A9B1"| Francesco <br/> Giorgio<br/> Mario
|}
|}
Tabella 1.2
{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.2
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="border-right:solid 1px #A2A9B1; width:35px" align=center|Gian|| Franco<br/> Maria
|}
{|style="border-collapse:collapse;"
|style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1; width:35px" align=center|Pier||style="border-top:solid 1px #A2A9B1"| Francesco <br/> Giorgio<br/> Mario
|}
|}
Tabella 1.3
{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.3
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px;"|
{|style="border-collapse:collapse; float:left;"
|style="height:42px; width:35px; border-bottom:solid 1px #A2A9B1;" align=center|Gian
|-
|style="height:63px;" align=center|Pier
|}
{|style="border-collapse:collapse; float:left;"
|style="border-bottom:solid 1px #A2A9B1; border-left:solid 1px #A2A9B1;"| Franco<br/> Maria
|-
|style="border-left:solid 1px #A2A9B1;"| Francesco <br/> Giorgio<br/> Mario
|}
|}
Tabella 1.4
{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.4
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px;"|
{|style="border-collapse:collapse; float:left;"
|style="height:42px; width:35px; border-bottom:solid 1px #A2A9B1;" align=center|Gian
|}
{|style="border-collapse:collapse;"
|style="width:70px; border-bottom:solid 1px #A2A9B1; border-left:solid 1px #A2A9B1;"| Franco<br/> Maria
|}
{|style="border-collapse:collapse; float:left;"
|style="height:63px; width:35px;" align=center|Pier
|}
{|style="border-collapse:collapse;"
|style="border-left:solid 1px #A2A9B1;"| Francesco <br/> Giorgio<br/> Mario
|}
|}
Costruire grafici usando le tabelle nidificate
Alcune dimostrazioni pratiche della duttilità delle tabelle nidificate. (Nota: per costruire i grafici a sviluppo orizzontale è stato utilizzato il metodo descritto nella Tabella 1.2 della soprastante sezione, mentre per l'istogramma verticale quello della Tabella 1.3)
Grafici orizzontali
A proposito della Tabella 3.2 è interessante notare come lo spessore delle barre possa essere modificato non solo per mezzo del comando style="height:", ma anche variando le dimensioni percentuali del testo in esse contenuto (in questo caso un ).
Cella-contenitore
Celle singole nidificate
| Celle nidificate e intestazione a sbalzo per sondaggi al volo | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
| Celle nidificate e intestazione a capitello per grafici a stalattite | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
| Esito del sondaggio | |||||
|---|---|---|---|---|---|
| Sì No Non so |
|
24% 11% 65% | |||
| Totale | 100% | ||||
| Esito del sondaggio | ||||||||
|---|---|---|---|---|---|---|---|---|
| Sì No Non so |
|
24% 11% 65% | ||||||
| Totale | Maschi - 52,8% Femmine - 47,2% |
100% | ||||||
Istogramma verticale
Note:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Varie
   
|
   
|
   
|
   
|
| ⋮ |