|
= [[Utente:Corsaiolo/Capoliste|Capoliste]] =
[[Aiuto:Tabelle/Avanzate]]
==== Timeline ====
__TOC__
<timeline>
= Tabelle =
ImageSize = width:1000 height:100
== Tabelle non rettangolari ==
PlotArea = left:15 right: 15 bottom:40 top:0
{| class=wikitable style="border:none; font-size: 95%; float:right; margin-left:10px; margin-right:10px;"
DateFormat = x.y
! style="border:none; background:#FFEEEE;"|
Period = from:0.5 till:38.5
! Parole in -occo
ScaleMajor = unit:year increment:1 start:1
! style="border-top:solid 1px #FFEEEE; background:#FFEEEE;"|
ScaleMinor = unit:year increment:1 start:0.5
! 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;"|
|}
TimeAxis = orientation:hor format:yyyy
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 (<code>#FFFFFF</code> o semplicemente "white" quello delle pagine, <code>#F8F9FA</code> quello interno delle tabelle di <code>class=wikitable</code>, <code>#FFEEEE</code> 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.
Colors =
id:Napoli value:rgb(0,0.61,1)
Note alle <code>{{Font color||#FFFFCC|righe evidenziate}}</code>:<br/>
id:Inter value:rgb(0.1,0,1)
* Il comando <code>border:none</code> deve essere presente negli attributi della tabella per funzionare nelle caselle.
PlotData=
* Parallelamente al <code>border:none</code>, esiste anche il comando <code>background:none</code>, 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.
bar:Leaders width:15 mark:(line,white) align:left fontsize:S
* Il comando <code>bgcolor=</code> non ha effetto sulle celle di intestazione. Al suo posto bisogna usare <code>style="background:"</code>.
from:6.5 till:14.5 shift:(-15,18) text:"[[Società Sportiva Calcio Napoli|Napoli]]" color:Napoli
* La sequenza dei lati a cui si riferiscono i valori di <code>border-width</code> è: superiore, destro, inferiore, sinistro. (da mezzogiorno in senso orario)
from:14.5 till:16.5 shift:(-9,18) text:"[[Football Club Internazionale Milano|Inter]]" color:Inter
* 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).
from:16.5 till:22.5 shift:(-10,18) text:"[[Società Sportiva Calcio Napoli|Napoli]]" color:Napoli
</timeline>
<source lang="html" highlight="1-2, 6, 9, 12">
__NOTOC__
{| class=wikitable style="border:none; font-size: 95%;"
==== Tabella ====
! style="border:none; background:#FFEEEE;"|
<div style="overflow:auto">
! Parole in -occo
{| style="font-size:80%; text-align:center; border-collapse:collapse"
! style="border-top:solid 1px #FFEEEE; background:#FFEEEE;"|
|- style="visibility:hidden"
! Parole in -accio
|rowspan=5 width=10px|
! style="border-style:solid; border-width: 0 0 1px 1px; background:#FFEEEE;"|
|style="height:25px"|——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——||——
|-
|rowspan=5 width=1px|
! Con la A
|- style="font-family:Arial Narrow; font-size:105%"
| Arrocco || style="border-bottom:0px;"| Allocco || Addiaccio || Abbraccio
!colspan=6|
|-
!colspan=8|[[Società Sportiva Calcio Napoli|Napoli]]
! style="border:none; background:#FFEEEE;"| Con la B
!colspan=2|[[Football Club Internazionale Milano|Inter]]
| style="border-right:solid 1px #F8F9FA;"| Barocco || style="border:#F8F9FA solid 1px;"| Blocco
!colspan=6|[[Società Sportiva Calcio Napoli|Napoli]]
| Braccio ||bgcolor=#FFEEEE style="border-right:solid 1px #FFEEEE;"| Brogliaccio
|- style="height:15px"
|-
|colspan=6|
! Con la C
|colspan=8 bgcolor=#009BFF style="border-left:inset 1px white"|
| Ciocco || Cocco || Carpaccio || Canovaccio
|colspan=2 bgcolor=#1900FF style="border-left:inset 1px white"|
|colspan=6 bgcolor=#009BFF style="border-left:inset 1px white"|
|- style="border-top:solid 1px black"
|height=1px style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black"| ||style="border-left:solid 1px black; border-right:solid 1px black"|
|-
!1ª||2ª||3ª||4ª||5ª||6ª||7ª||8ª||9ª||10ª||11ª||12ª||13ª||14ª||15ª||16ª||17ª||18ª||19ª||20ª||21ª||22ª||23ª||24ª||25ª||26ª||27ª||28ª||29ª||30ª||31ª||32ª||33ª||34ª||35ª||36ª||37ª||38ª
| 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;"|
|}
</sourcediv>
= Testata modelli calcio =
== Tabelle nidificate ==
{{Wikipedia:Modello di voce/Testata modelli calcio}}
<div style="text-align:center">[[Wikipedia:Modello di voce/Testata modelli calcio]]</div>
= Stradale =
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.
<div style="border:1px solid grey; width:58%"><div style="height:101px; background:linear-gradient(white 0%, white 50%, #0066b3 50%, #0066b3 100%)"><div style="text-align:center; font-size:800%; line-height:91%; font-weight:bold; background:linear-gradient(#0066b3 0%, #0066b3 50%, white 50%, white 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent">STRADALE</div></div></div>
= A scacchi =
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).<br/>
<div style="text-align:center; font-size:1500%; line-height:99%; font-weight:bold; background:white; background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%); background-size:16px 16px; background-position: 0 0, 8px 8px; -webkit-background-clip:text; -webkit-text-fill-color:transparent">Corsaiolo</div>
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 <code>rowspan</code> e <code>colspan</code>.<br/>
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.
= Attenzione =
=== Quali tabelle usare ===
=== Passo 50 (2) ===
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 50%, yellow 50%, yellow 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
=== Passo 33.3 (3) ===
La scelta del tipo di tabella da nidificare è opportuno ricada su una tabella "semplice".<br/>
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 33.3%, yellow 33.3%, yellow 66.7%, black 66.7%, black 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
Queste tabelle infatti, a differenza di quelle marcate <code>class=wikitable</code>, 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.
=== Passo 25 (4) ===
::::::::: '''Tabelle "semplici" e tabelle "wikitable"'''
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 25%, yellow 25%, yellow 50%, black 50%, black 75%, yellow 75%, yellow 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
=== Passo 20 (5) ===
{{Colonne|auto}}
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 20%, yellow 20%, yellow 40%, black 40%, black 60%, yellow 60%, yellow 80%, black 80%, black 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
=== Passo 10 (10) ===
{|
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 10%, yellow 10%, yellow 20%, black 20%, black 30%, yellow 30%, yellow 40%, black 40%, black 50%, yellow 50%, yellow 60%, black 60%, black 70%, yellow 70%, yellow 80%, black 80%, black 90%, yellow 90%, yellow 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
|height=9px|
|-
|
{|style="font-size: 95%;"
|+ '''Da nidificare'''
| Tabella "semplice"
|-
| senza bordi di default
|}
|width=13|
|
{|class=wikitable style="font-size: 95%;"
|+ Nidificata
|
{|
| Tabella "semplice"
|-
| senza bordi di default
|}
|}
|}
=== Passo 6.7 (15) ===
{{Colonne spezza}}
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 6.7%, yellow 6.7%, yellow 13.3%, black 13.3%, black 20%, yellow 20%, yellow 26.7%, black 26.7%, black 33.3%, yellow 33.3%, yellow 40%, black 40%, black 46.7%, yellow 46.7%, yellow 53.3%, black 53.3%, black 60%, yellow 60%, yellow 66.7%, black 66.7%, black 73.3%, yellow 73.3%, yellow 80%, black 80%, black 86.7%, yellow 86.7%, yellow 93.3%, black 93.3%, black 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
=== Passo 5 (20) ===
{|
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 5%, yellow 5%, yellow 10%, black 10%, black 15%, yellow 15%, yellow 20%, black 20%, black 25%, yellow 25%, yellow 30%, black 30%, black 35%, yellow 35%, yellow 40%, black 40%, black 45%, yellow 45%, yellow 50%, black 50%, black 55%, yellow 55%, yellow 60%, black 60%, black 65%, yellow 65%, yellow 70%, black 70%, black 75%, yellow 75%, yellow 80%, black 80%, black 85%, yellow 85%, yellow 90%, black 90%, black 95%, yellow 95%, yellow 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
|height=5px|
|-
|height=125px style="border-right:solid 1px #A2A9B1;"| ||
|}
=== Passo 4 (25) ===
{{Colonne spezza}}
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 4%, yellow 4%, yellow 8%, black 8%, black 12%, yellow 12%, yellow 16%, black 16%, black 20%, yellow 20%, yellow 24%, black 24%, black 28%, yellow 28%, yellow 32%, black 32%, black 36%, yellow 36%, yellow 40%, black 40%, black 44%, yellow 44%, yellow 48%, black 48%, black 52%, yellow 52%, yellow 56%, black 56%, black 60%, yellow 60%, yellow 64%, black 64%, black 68%, yellow 68%, yellow 72%, black 72%, black 76%, yellow 76%, yellow 80%, black 80%, black 84%, yellow 84%, yellow 88%, black 88%, black 92%, yellow 92%, yellow 96%, black 96%, black 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
=== Passo 2 (50) ===
{|
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 2%, yellow 2%, yellow 4%, black 4%, black 6%, yellow 6%, yellow 8%, black 8%, black 10%, yellow 10%, yellow 12%, black 12%, black 14%, yellow 14%, yellow 16%, black 16%, black 18%, yellow 18%, yellow 20%, black 20%, black 22%, yellow 22%, yellow 24%, black 24%, black 26%, yellow 26%, yellow 28%, black 28%, black 30%, yellow 30%, yellow 32%, black 32%, black 34%, yellow 34%, yellow 36%, black 36%, black 38%, yellow 38%, yellow 40%, black 40%, black 42%, yellow 42%, yellow 44%, black 44%, black 46%, yellow 46%, yellow 48%, black 48%, black 50%, yellow 50%, yellow 52%, black 52%, black 54%, yellow 54%, yellow 56%, black 56%, black 58%, yellow 58%, yellow 60%, black 60%, black 62%, yellow 62%, yellow 64%, black 64%, black 66%, yellow 66%, yellow 68%, black 68%, black 70%, yellow 70%, yellow 72%, black 72%, black 74%, yellow 74%, yellow 76%, black 76%, black 78%, yellow 78%, yellow 80%, black 80%, black 82%, yellow 82%, yellow 84%, black 84%, black 86%, yellow 86%, yellow 88%, black 88%, black 90%, yellow 90%, yellow 92%, black 92%, black 94%, yellow 94%, yellow 96%, black 96%, black 98%, yellow 98%, yellow 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
|
{|class=wikitable style="font-size: 95%;"
|+ Da nidificare
| Tabella "wikitable"
|-
| con bordi di default
|}
|width=13|
|
{|class=wikitable style="font-size: 95%;"
|+ Nidificata
|
{|class=wikitable
| Tabella "wikitable"
|-
| con bordi di default
|}
|}
|}
=== Passo 1 (100) ===
{{Colonne fine}}
<div style="border:1px solid black"><div style="height:101px; background:linear-gradient(135deg, black 0%, black 1%, yellow 1%, yellow 2%, black 2%, black 3%, yellow 3%, yellow 4%, black 4%, black 5%, yellow 5%, yellow 6%, black 6%, black 7%, yellow 7%, yellow 8%, black 8%, black 9%, yellow 9%, yellow 10%, black 10%, black 11%, yellow 11%, yellow 12%, black 12%, black 13%, yellow 13%, yellow 14%, black 14%, black 15%, yellow 15%, yellow 16%, black 16%, black 17%, yellow 17%, yellow 18%, black 18%, black 19%, yellow 19%, yellow 20%, black 20%, black 21%, yellow 21%, yellow 22%, black 22%, black 23%, yellow 23%, yellow 24%, black 24%, black 25%, yellow 25%, yellow 26%, black 26%, black 27%, yellow 27%, yellow 28%, black 28%, black 29%, yellow 29%, yellow 30%, black 30%, black 31%, yellow 31%, yellow 32%, black 32%, black 33%, yellow 33%, yellow 34%, black 34%, black 35%, yellow 35%, yellow 36%, black 36%, black 37%, yellow 37%, yellow 38%, black 38%, black 39%, yellow 39%, yellow 40%, black 40%, black 41%, yellow 41%, yellow 42%, black 42%, black 43%, yellow 43%, yellow 44%, black 44%, black 45%, yellow 45%, yellow 46%, black 46%, black 47%, yellow 47%, yellow 48%, black 48%, black 49%, yellow 49%, yellow 50%, black 50%, black 51%, yellow 51%, yellow 52%, black 52%, black 53%, yellow 53%, yellow 54%, black 54%, black 55%, yellow 55%, yellow 56%, black 56%, black 57%, yellow 57%, yellow 58%, black 58%, black 59%, yellow 59%, yellow 60%, black 60%, black 61%, yellow 61%, yellow 62%, black 62%, black 63%, yellow 63%, yellow 64%, black 64%, black 65%, yellow 65%, yellow 66%, black 66%, black 67%, yellow 67%, yellow 68%, black 68%, black 69%, yellow 69%, yellow 70%, black 70%, black 71%, yellow 71%, yellow 72%, black 72%, black 73%, yellow 73%, yellow 74%, black 74%, black 75%, yellow 75%, yellow 76%, black 76%, black 77%, yellow 77%, yellow 78%, black 78%, black 79%, yellow 79%, yellow 80%, black 80%, black 81%, yellow 81%, yellow 82%, black 82%, black 83%, yellow 83%, yellow 84%, black 84%, black 85%, yellow 85%, yellow 86%, black 86%, black 87%, yellow 87%, yellow 88%, black 88%, black 89%, yellow 89%, yellow 90%, black 90%, black 91%, yellow 91%, yellow 92%, black 92%, black 93%, yellow 93%, yellow 94%, black 94%, black 95%, yellow 95%, yellow 96%, black 96%, black 97%, yellow 97%, yellow 98%, black 98%, black 99%, yellow 99%, yellow 100%)"><div style="color:red; font-size:800%; line-height:95%; font-weight:bold; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; text-align:center">ATTENZIONE!</div></div></div>
= Varie =
=== Padding e border-collapse ===
{| class=floatright style="border:#000000 solid 1px; border-collapse:collapse; margin-bottom:7px; margin-left:15px"
|style="padding:0"|
Normalmente, quando a una tabella "semplice" nidificata si aggiungono uno o più bordi interni (per mezzo - in questo caso - del comando <code>style="border-bottom:solid 1px #A2A9B1"</code>), questi non raggiungono mai i bordi della cella-contenitore:
{| style="border:#00FF00 solid 1px; border-collapse:collapse"
{|class=wikitable style="font-sizepadding: 95%;0"|
{| style="text-align:center; font-family:Wingdings; font-size:33px; background:#000000; color:#00FF00; border-collapse:collapse"
|
|- style="font-size:3%; height:4px; visibility:hidden"
{|bgcolor=#F2E0CE
|style="padding:0"|———————————————————————————————————————————————————————————————————————————————————————————
|style="border-bottom:solid 1px #A2A9B1"| Tabella "semplice"
|style="padding:0"|———————————
|style="padding:0"|———————————————————————————————————————————————————————————————————————————————————————————
|-
|{{#timel:H}}
| nidificata (e colorata)
|style="font-family:Arial; padding:0"|:
|{{#timel:i}}
|- style="font-size:3%; height:4px; visibility:hidden"
|style="padding:0"|—
|}
|}
Per far sì che ciò avvenga, occorre inserire i comandi <code>style="padding:0px"</code> fra gli attributi della cella-contenitore (elimina il "cuscinetto" fra la <span style="background:#F2E0CE> Tabella nidificata </span> e i bordi della cella-contenitore) e <code>style="border-collapse:collapse"</code> fra gli attributi della tabella nidificata (consente ai bordi di fare "quel passetto in più" e agganciarsi):
{|class=wikitable style="font-size: 95%;"
|style="padding:0px"|
{|bgcolor=#F2E0CE style="border-collapse:collapse"
|style="border-bottom:solid 1px #A2A9B1"| Tabella "semplice"
|-
| nidificata (e colorata)
|}
|}
{| class="toccolours floatright" style="border-color:#000000; width:197px; margin-bottom:7px; border-collapse:collapse; margin-left:15px"
Qui sotto il codice della tabella così modificata, con le righe salienti <code>{{Font color||#FFFFCC|in evidenza}}</code>.
|[[Immagine:Chess rlt45.svg|55px]]
|style="padding:9px 6px 9px 0"|<span style="font-size:93%">Se questo utente fosse un pezzo degli scacchi, sarebbe una [[Torre (scacchi)|torre]].</span>
<source lang="html" highlight="2-3">
{|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 -->
</source>
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: <code>#A2A9B1</code> è il colore di default dei bordi delle tabelle di <code>class=wikitable</code>.
=== Dividere verticalmente una cella (senza bordi interni) ===
{| class=wikitable style="font-size: 95%; float:right; margin-left: 10px; margin-right: 10px;"
! Tempo !! + !! Atleta !! Nazionalità !! Evento
|-
|colspan=6; bgcolor=#D0F0F0|'''Kayak'''
|-
|style="border-top:0px;"|1'10"11
|{{Recordicona|RM|dim=small}} ''b''<br/>{{Recordicona|RM|dim=small}}
|Anna Oddo<br/>Alula Nayan
|{{ITA}}<br/>{{IND}}
|Campionati palindromatici 2002
|}
{| class=floatright style="width:197px; height:280px; text-align:center"
'''Esempio pratico'''
|[[Immagine:Faux Neon Cocktails Sign.svg|140px]]
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.<br/>
Fra questi, {{Recordicona|RM|dim=small}} 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 {{Recordicona|RM|dim=small}} a mezza altezza e al contempo collocare la ''b'' nella riga superiore.<br/>
Una soluzione alla buona può essere quella di far figurare la ''b'' (opportunamente inclusa fra i comandi <code><nowiki><big></nowiki></code> e <code><nowiki></big></nowiki></code> perché risulti della dimensione normale) come apice della targhetta {{Recordicona|RM|dim=small}}, 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 <code>&nbsp;</code> nella celletta della ''b'' serve a "dare una presa" al comando <code><br/></code>, mentre lo spazio fra i bordi blu e rossi è dovuto al fatto che nelle tabelle "semplici" il comando <code>style="border-spacing:"</code> è impostato per default sul valore di <code>1px</code>).
{{Colonne|auto}}
<source lang="html">
{|
|{{Recordicona|RM|dim=small}}||''b''<br/>
|}
</source>
{| class=floatright style="width:197px; height:205px; text-align:center"
{{Colonne spezza}}
|style="vertical-align:bottom"|[[Immagine:Bouncywikilogo.gif|140px]]
{|
|style="height:108px; width:30px;"|dà
|
{|
|{{Recordicona|RM|dim=small}}||''b''<br/>
|}
|align=center style=" width:170px;"|ossia, per averne una<br/>percezione più chiara*
|
{|style="border-style: solid; border-width: 1px; border-color: blue;"
|style="border-style: solid; border-width: 1px; border-color: red;"|{{Recordicona|RM|dim=small}}||style="border-style: solid; border-width: 1px; border-color: red;"|''b''<br/>
|}
|}
[[Immagine:Gnome-system.png|50px]]
{{Colonne fine}}
[[Immagine:Gnome-globe.svg|50]]
[[Immagine:Modern clock chris kemps 01.svg|50px]]
[[Immagine:Crystal Clear app clock.svg|50px]]
[[Immagine:Crystal Clear app clock-orange.svg|50px]]
[[Immagine:Wikipedia's W.svg|50px]]
[[Immagine:VLC icon.png|50px]]
[[Immagine:Italian traffic signs - lavori.svg|50px]]
[[Immagine:Tango style insert-signature icon.svg]]
[[Immagine:Quill-Nuvola.svg]]
[[Immagine:Kword.svg|50px]]
[[Immagine:Robot icôn.svg|50px]]
[[Immagine:600px Nero e azzurro strisciato con stella.png|65px]]
[[Immagine:Invisible Pink Unicorn black.svg|65px]]
[[Immagine:Emblem-star.svg|55px]]
[[Immagine:Crystal Clear app core.png|50px]]
[[Immagine:User-invisible.svg|50px]]
[[Immagine:History.svg|50px]]
[[Immagine:Knights Templar Cross.svg|50px]]
[[Immagine:Speech balloon.svg|50px]]
[[Immagine:The death.svg|50px]]
Oggi è {{LOCALDAYNAME}} {{CURRENTDAY}} {{CURRENTMONTHNAME}} {{CURRENTYEAR}}, e sono le {{LOCALTIME}}
{|
|* (Dove
|{{legend|#FFFFFF|è il bordo della tabella, mentre|border=solid 1px blue}}
|{{legend|#FFFFFF|quello delle singole cellette)|border=solid 1px red}}
|}
{| class=wikitable style="background:#FFFFFF"
==== 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 <code>|</code> il codice della tabella appena creata:
{{Colonne|auto}}
<source lang="html" highlight="7-10">
{| 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
|}
</source>
{{Colonne spezza}}
{|
|style="height:108px; width:10px;"|dà
|}
{{Colonne spezza}}
{| class=wikitable style="font-size: 95%;"
! Tempo !! + !! Atleta
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|1'10"11
|
{|style="border-style: solid; border-width: 1px; border-color: blue;"
|style="border-style: solid; border-width: 1px; border-color: red;"|{{Recordicona|RM|dim=small}}||style="border-style: solid; border-width: 1px; border-color: red;"|''b''<br/>
|}
|Anna Oddo<br/>Alula Nayan
|}
{{Colonne fine}}
==== 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 <code>style="padding:0px"</code>...
{| class=wikitable style="font-size: 95%;"
! Tempo !! + !! Atleta
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|1'10"11
|style="padding:0px"|
{|style="border-style: solid; border-width: 1px; border-color: blue;"
|style="border-style: solid; border-width: 1px; border-color: red;"|{{Recordicona|RM|dim=small}}||style="border-style: solid; border-width: 1px; border-color: red;"|''b''<br/>
|}
|Anna Oddo<br/>Alula Nayan
|}
...e <code>style="border-collapse:collapse"</code> (notare come porti i bordi blu e rossi a sovrapporsi fra loro).
{| class=wikitable style="font-size: 95%;"
! Tempo !! + !! Atleta
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|1'10"11
|style="padding:0px"|
{|style="border-style: solid; border-width: 1px; border-color: blue; border-collapse:collapse"
|style="border-style: solid; border-width: 1px; border-color: red;"|{{Recordicona|RM|dim=small}}||style="border-style: solid; border-width: 1px; border-color: red;"|''b''<br/>
|}
|Anna Oddo<br/>Alula Nayan
|}
==== Quarto passo: ricostruire il "padding" ====
Eliminati i bordi "illustrativi" blu e rossi...
{| class=wikitable style="font-size: 95%;"
! Tempo !! + !! Atleta
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|1'10"11
|style="padding:0px;"|
{|style="border-collapse:collapse"
|{{Recordicona|RM|dim=small}}||''b''<br/>
|}
|Anna Oddo<br/>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 <code>style="padding:"</code>, corredato dei valori in <code>px</code> 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 <code>padding-left</code> e <code>padding-right</code>.
Come sottolineato in precedenza, il ''padding'' di una cella di <code>class=wikitable</code> è di <code>5px</code> + <code>5px</code> "orizzontalmente" e di <code>2px</code> + <code>2px</code> "verticalmente".
{{Colonne|auto}}
{|
|+ '''Padding azzerato nella cella-contenitore'''
|width=230px align=center|
{|
|
{| class=wikitable style="font-size: 95%; float:left; margin-right: 1px; margin-bottom: 0;"
|+ Originale
|{{ISL}}
|}
{| class=wikitable style="font-size: 95%; float:left; margin-bottom: 0;"
|+ Replica
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="padding: 2px 5px 2px 5px;"|{{ISL}}
|}
|}
{| class="wikitable floatleft" style="font-size: 95%; margin-top: 1px;"
|+ style="caption-side:bottom;"| Replica
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="padding: 2px 5px 2px 5px;"|{{ISL}}
|}
|}
|}
|}
{{Colonne spezza}}
{|
|+ '''Padding azzerato nella nidificata'''
|width=230px align=center|
{|
|
{| class=wikitable style="font-size: 95%; float:left; margin-right: 1px; margin-bottom: 0;"
|+ Originale
|{{ISL}}
|}
{| class=wikitable style="font-size: 95%; float:left; margin-bottom: 0;"
|+ Replica
|
{|style="border-collapse:collapse;"
|style="padding: 0px"|{{ISL}}
|}
|}
{| class="wikitable floatleft" style="font-size: 95%; margin-top: 1px;"
|+ style="caption-side:bottom;"| Replica
|
{|style="border-collapse:collapse;"
|style="padding: 0px"|{{ISL}}
|}
|}
|}
|}
{{Colonne fine}}
Il ''padding'' orizzontale (spazio fra il contenuto e i bordi destro e sinistro della cella) di una tabella semplice dotata di <code>style="border-collapse:collapse;"</code> è di <code>1px</code>, quello di una tabella di <code>class=wikitable</code> è di <code>5px</code>, mentre uno spazio (sia esso "normale" o <code>&nbsp;</code>) consta di <code>4px</code>.
ottenendo così una cella per aspetto e dimensioni perfettamente identica all'originale, seppur finalmente rispondente alle esigenze di partenza.
{{Colonne|auto}}
{| class=wikitable style="font-size: 95%;"
|+ Risultato finale
! Tempo !! + !! Atleta
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|1'10"11
|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/>
|}
|Anna Oddo<br/>Alula Nayan
|}
{{Colonne spezza}}
{| class=wikitable style="font-size: 95%;"
|+ Controllo
! Tempo !! + !! Atleta
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|1'10"11
|{{Recordicona|RM|dim=small}} ''b''<br/>{{Recordicona|RM|dim=small}}
|Anna Oddo<br />Alula Nayan
|}
{{Colonne spezza}}
'''Codice della nidificata nella tabella "Risultato finale"'''
<source lang="html">
|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/>
|}
</source>
{{Colonne fine}}
<nowiki>*</nowiki> <small>A dire il vero, il metodo più pratico in assoluto sarebbe quello di evitare di inserire il comando <code>style="padding:0px"</code> 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 {{Recordicona|RM|dim=small}} e ''b'') risulterebbe dimezzato (1+1=<code>2px</code> al posto dei <code>4px</code> di un <code>&nbsp;</code> o di un colpo di barra spaziatrice).</small>
=== Dividere orizzontalmente una cella (senza bordi interni) ===
{| class=wikitable style="font-size: 95%; float:right; margin-left: 10px;"
! Tempo !! + !! Atleta !! Nazionalità !! Evento
|-
|colspan=5; bgcolor=#D0F0F0|'''Kayak'''
|-
|1'00"01
|{{Recordicona|RM|dim=small}}
|Alula Nayan<br />Anna Oddo<br />Anna Oddo
|{{IND}}<br />{{ITA}}<br />{{SMR}}
|Campionati palindromatici 2010<br />Campionati palindromatici 2016<br />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).<br/>
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 <code><br/></code> 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 <code>|-</code>), 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*:
{|
|
{| class=wikitable style="font-size: 95%; float:left; margin-right: 1px;"
! Risultato
|-
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="padding: 2px 5px 1px 5px"|{{SWE}}
|-
|style="padding: 9px 5px 13px 5px"|{{NOR}}
|}
|}
{| class=wikitable style="font-size: 95%; float:left; margin-right: 1px;"
! colspan=2 | Riferimento<br/>altezza
|-
| {{NOR}} ||{{Bandiera|NOR}}<br/>{{Bandiera|NOR}}
|}
{| class=wikitable style="font-size: 95%; float:left; margin-right: 70px;"
! Originale
|-
| {{SWE}}<br/>{{NOR}}<br/>{{NOR}}
|}
{| class=wikitable style="font-size: 95%; float:left; margin-right: 1px;"
! Risultato
|-
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="padding: 12px 5px 9px 5px"|{{JAM}}
|-
|style="padding: 2px 5px 2px 5px"|{{SCO}}
|}
|}
{| class=wikitable style="font-size: 95%; float:left; margin-right: 1px;"
! colspan=2 | Riferim. altezza
|-
| {{JAM}} ||{{Bandiera|JAM}}<br/>{{Bandiera|JAM}}
|}
{| class=wikitable style="font-size: 95%; float:left; margin-right: 10px;"
! Originale
|-
| {{JAM}}<br/>{{JAM}}<br/>{{SCO}}
|}
|}
* Regolando col comando <code>style="height:"</code> 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.
<nowiki>*</nowiki> <small>Fra le opzioni si potrebbe annoverare anche il <code><br/></code>, ma essendo questo metodo molto meno preciso e maneggevole dei due elencati, non val la pena includerlo nella lista. Il comando <code>rowspan=2</code> è 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 <code>&nbsp;</code> oppure con spazi a larghezza zero <code>&#8203;</code>.</small>
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 <code>&nbsp;</code> prima dei contenuti testuali e dopo il contenuto testuale di lunghezza maggiore.
{{Colonne|auto}}
{| class=wikitable style="font-size: 95%;"
|+ Risultato finale
! + !! Atleta !! Nazionalità
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|{{Recordicona|RM|dim=small}}
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="padding: 2px 5px 2px 5px;"|Alula Nayan
|-
|style="padding: 8px 5px 13px 5px;"|Anna Oddo
|}
|{{IND}}<br />{{ITA}}<br />{{SMR}}
|}
{{Colonne spezza}}
{| class=wikitable style="font-size: 95%;"
|+ Controllo
! + !! Atleta !! Nazionalità
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|{{Recordicona|RM|dim=small}}
|Alula Nayan<br />Anna Oddo<br />Anna Oddo
|{{IND}}<br />{{ITA}}<br />{{SMR}}
|}
{{Colonne spezza}}
'''Codice della nidificata nella tabella "Risultato finale"'''
<source lang="html">
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="padding: 2px 5px 2px 5px;"|Alula Nayan
|-
|style="padding: 8px 5px 13px 5px;"|Anna Oddo
|}
</source>
{{Colonne fine}}
==== 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 <code>style="border-collapse:collapse"</code>, 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).
{{Colonne|auto}}
{| class=wikitable style="font-size: 95%;"
|+ Metodo A: 1 tabella da 2 cellette
! + !! Atleta !! Nazionalità
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|{{Recordicona|RM|dim=small}}
|style="padding:0px;"|
{|
|style="border-style: solid; border-width: 1px; border-color: red;"|Elisabette Basile
|-
|style="height:35px; border-style: solid; border-width: 1px; border-color: green;"|Anna Oddo
|}
|{{GBR sport}}<br />{{ITA}}<br />{{SMR}}
|}
{{Colonne spezza}}
{| class=wikitable style="font-size: 95%;"
|+ Metodo B: 2 tabelle da 1 celletta
! + !! Atleta !! Nazionalità
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|{{Recordicona|RM|dim=small}}
|style="padding:0px;"|
{|
|style="border-style: solid; border-width: 1px; border-color: red;"|Elisabette Basile
|}
{|
|style="height:35px; border-style: solid; border-width: 1px; border-color: green;"|Anna Oddo
|}
|{{GBR sport}}<br />{{ITA}}<br />{{SMR}}
|}
{{Colonne fine}}
=== Dividere verticalmente una cella (con bordi interni) ===
{| class=wikitable style="font-size: 95%; text-align:center; float:right; margin-left: 10px; margin-right: 0px;"
|+ Nidificata grezza
! Cifre<br/>dispari
| 1 || 3 || 5 || 7 || 9
|-
! Cifre<br/>pari
|colspan=5 width=220px style="padding:0px;"|
{|style="border-collapse:collapse; background:#F2E0CE;"
|style="border-right:solid 1px #A2A9B1"| 2
|style="border-right:solid 1px #A2A9B1"| 4
|style="border-right:solid 1px #A2A9B1"| 6
| 8
|}
|}
{| class="wikitable floatright" style="font-size: 95%; text-align:center;"
|+ Nidificata giustificata
! Cifre<br/>dispari
| 1 || 3 || 5 || 7 || 9
|-
! Cifre<br/>pari
|colspan=5 width=220px style="padding:0px;"|
{|style="border-collapse:collapse; background:#F2E0CE;"
|style="height:44px; width:59px; border-right:solid 1px #A2A9B1"| 2
|style="width:59px; border-right:solid 1px #A2A9B1"| 4
|style="width:59px; border-right:solid 1px #A2A9B1"| 6
|style="width:59px;"| 8
|}
|}
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 <code>style="border-right:solid 1px #A2A9B1"</code> e/o analoghi (gli altri sono left, top e bottom) fra gli attributi delle singole cellette.<br/>
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ù*).<br/>
Ecco perciò che, per ottenere il risultato voluto, occorre in molti casi applicare alle cellette della nidificata i comandi <code>style="height:"</code> e <code>style="width:"</code>, 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 <code>style="width:"</code>, 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)
<nowiki>*</nowiki> <small>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".</small>
=== Dividere orizzontalmente una cella (con bordi interni) ===
{| class=wikitable style="font-size: 95%; float:right; margin-left: 10px; margin-right: 0px; text-align:center;"
|+ Nidificata giustificata
! width=80px| Cifre dispari !! width=80px| Cifre pari
|-
| 1
|rowspan=5 style="padding:0px;"|
{|style="border-collapse:collapse; background:#F2E0CE; float:left; margin-left:0px;"
|style="height:29px; width:88px; border-bottom:solid 1px #A2A9B1;"| 2
|-
|style="height:30px; border-bottom:solid 1px #A2A9B1;"| 4
|-
|style="height:30px; border-bottom:solid 1px #A2A9B1;"| 6
|-
|style="height:29px;"| 8
|}
|-
| 3
|-
| 5
|-
| 7
|-
| 9
|}
{| class=wikitable style="font-size: 95%; float:right; margin-left: 10px; margin-right: 0px; text-align:center;"
|+ Nidificata grezza
! width=80px| Cifre dispari !! width=80px| Cifre pari
|-
| 1
|rowspan=5 style="padding:0px;"|
{|style="border-collapse:collapse; background:#F2E0CE; float:left; margin-left:0px;"
|style="border-bottom:solid 1px #A2A9B1;"| 2
|-
|style="border-bottom:solid 1px #A2A9B1;"| 4
|-
|style="border-bottom:solid 1px #A2A9B1;"| 6
|-
| 8
|}
|-
| 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 ====
{{Colonne|auto}}
{{legend|#F8F9FA|Cella-contenitore|border=dashed 2px red}}
{{Colonne spezza}}
{{legend|#F2E0CE|Tabella nidificata|border=solid 1px #A2A9B1}}
{{Colonne spezza}}
{{legend|#CEF2D4|2ª tabella nidificata|border=solid 1px #A2A9B1}}
{{Colonne spezza}}
{{legend|#CECEF2|3ª tabella nidificata|border=solid 1px #A2A9B1}}
{{Colonne spezza}}
{{legend|#F2F2CE|4ª tabella nidificata|border=solid 1px #A2A9B1}}
{{Colonne fine}}
{{Colonne|auto}}
{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.1
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|bgcolor=#F2E0CE style="padding:0px; border:dashed 2px red"|
{|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
|}
|}
{{Colonne spezza}}
{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.2
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px; border:dashed 2px red"|
{|bgcolor=#F2E0CE style="border-collapse:collapse;"
|style="border-right:solid 1px #A2A9B1; width:35px;" align=center|Gian||style="width:70px;"| Franco<br/> Maria
|}
{|bgcolor=#CEF2D4 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
|}
|}
{{Colonne spezza}}
{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.3
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px; border:dashed 2px red"|
{|bgcolor=#F2E0CE 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
|}
{|bgcolor=#CEF2D4 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
|}
|}
{{Colonne spezza}}
{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.4
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px; border:dashed 2px red"|
{|bgcolor=#F2E0CE style="border-collapse:collapse; float:left;"
|style="height:42px; width:35px; border-bottom:solid 1px #A2A9B1;" align=center|Gian
|}
{|bgcolor=#CEF2D4 style="border-collapse:collapse;"
|style="width:70px; border-bottom:solid 1px #A2A9B1; border-left:solid 1px #A2A9B1;"| Franco<br/> Maria
|}
{|bgcolor=#CECEF2 style="border-collapse:collapse; float:left;"
|style="height:63px; width:35px;" align=center|Pier
|}
{|bgcolor=#F2F2CE style="border-collapse:collapse;"
|style="border-left:solid 1px #A2A9B1;"| Francesco <br/> Giorgio<br/> Mario
|}
|}
{{Colonne fine}}
* '''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 <code>&nbsp;</code> prima dei contenuti testuali e dopo i contenuti testuali di lunghezza maggiore.
: <code>{{Font color||#FFFFCC|Cella-contenitore + tabella/e nidificata/e}}</code>
{{Colonne|auto}}
'''Tabella 1.1'''
<source lang="html" highlight="6-11">
{| 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
|}
|}
</source>
{{Colonne spezza}}
'''Tabella 1.2'''
<source lang="html" highlight="6-12">
{| 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
|}
|}
</source>
{{Colonne fine}}
{{Colonne|auto}}
'''Tabella 1.3'''
<source lang="html" highlight="6-16">
{| 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
|}
|}
</source>
{{Colonne spezza}}
'''Tabella 1.4'''
<source lang="html" highlight="6-18">
{| 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
|}
|}
</source>
{{Colonne fine}}
=== 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 <code>style="height:"</code>, ma anche variando le dimensioni percentuali del testo in esse contenuto (in questo caso un <code>&nbsp;</code>).
{{Colonne|auto}}
{{legend|#FFEEEE|Cella-contenitore|border=dashed 2px #E6E6FF}}
{{Colonne spezza}}
{{legend|#F2E0CE|Celle singole nidificate|border=solid 1px #A2A9B1}}
{{Colonne fine}}
{{Colonne|auto}}
{| class=wikitable style="font-size: 95%;"
|+ Tabella 1
! style="width:402px;"|Celle nidificate e intestazione a sbalzo per sondaggi al volo
|-
|bgcolor=#FFEEEE style="padding:0px; border-right:dashed 2px #E6E6FF; border-bottom:dashed 2px #E6E6FF;"|
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE style="border-right:solid 1px #A2A9B1; width:180px"| Uva|| '''45%'''
|}
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:340px"| Mele|| '''85%'''
|}
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE style="border-right:solid 1px #A2A9B1; width:60px"| Fragole|| '''15%'''
|}
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:260px"| Arance|| '''65%'''
|}
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE style="border-right:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:100px"| Albicocche|| '''25%'''
|}
|}
{{Colonne spezza}}
{| class=wikitable style="font-size: 95%;"
|+ Tabella 2
! Celle nidificate e intestazione a capitello per grafici a stalattite
|-
|bgcolor=#FFEEEE align=center style="padding:0px; border-left:dashed 2px #E6E6FF; border-right:dashed 2px #E6E6FF; border-bottom:dashed 2px #E6E6FF;"|
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE align=center style="border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:190px"|Uva||
|}
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE align=center style="border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; width:150px"|Mele||
|}
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE align=center style="border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1; border-bottom:solid 1px #A9A9A9; width:270px"|Fragole||
|}
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE align=center style="border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:120px"|Arance||
|}
{|style="border-collapse:collapse;"
|bgcolor=#F2E0CE align=center style="border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:70px"|Albicocche||
|}
|}
{{Colonne fine}}
{{Colonne|auto}}
{| class=wikitable style="font-size: 95%;"
|+ Tabella 3.1
! colspan=3| Esito del sondaggio
|-
|align=right|Sì<br/>No<br/>Non so
|style="padding:0px; width:302px;"|
{|style="border-collapse:collapse;"
|bgcolor=green style="border-right:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:72px"|
|}
{|style="border-collapse:collapse;"
|bgcolor=red style="border-right:solid 1px #A2A9B1; width:33px"|
|}
{|style="border-collapse:collapse;"
|bgcolor=yellow align=right style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1; width:195px"|
|}
|24%<br/>11%<br/>65%
|-
! Totale !! !! style="text-align:left;"| 100%
|}
{{Colonne spezza}}
{| class=wikitable style="font-size: 95%;"
|+ Tabella 3.2
! colspan=3| Esito del sondaggio
|-
|align=right|Sì<br/>No<br/>Non so
|style="padding:0px; width:302px;"|
{|style="border-collapse:collapse;"
|bgcolor=#007FFF style="border-right:solid 1px #A2A9B1; width:62px; font-size: 46%;"|
|}
{|style="border-collapse:collapse;"
|bgcolor=#FFC0CB style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:82px; font-size: 46%;"|
|}
{|style="border-collapse:collapse;"
|bgcolor=#007FFF style="border-right:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:54px; font-size: 46%;"|
|}
{|style="border-collapse:collapse;"
|bgcolor=#FFC0CB style="border-right:solid 1px #A2A9B1; width:12px; font-size: 46%;"|
|}
{|style="border-collapse:collapse;"
|bgcolor=#007FFF style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1; border-bottom:solid 1px #A2A9B1; width:201px; font-size: 46%;"|
|}
{|style="border-collapse:collapse;"
|bgcolor=#FFC0CB style="border-right:solid 1px #A2A9B1; width:189px; font-size: 46%;"|
|}
|24%<br/>11%<br/>65%
|-
! Totale
! {{Colonne|auto}}<small>{{legend|#007FFF|Maschi - 52,8%|border=solid 1px #A2A9B1}}</small>{{Colonne spezza}}<small>{{legend|#FFC0CB|Femmine - 47,2%|border=solid 1px #A2A9B1}}</small>{{Colonne fine}}
! style="text-align:left;"| 100%
|}
{{Colonne fine}}
==== Istogramma verticale ====
{|
|
{| class=wikitable style="font-size: 95%; float:left; margin-right:25px"
|+ style="caption-side:bottom;"| Numero di volte al mese in cui la tal cosa si verifica, su base 30
|bgcolor=#FFEEEE style="border-left:solid 1px #FFEEEE; border-right:solid 1px #FFEEEE; border-bottom:solid 1px #FFEEEE; border-top:solid 2px #FFEEEE; padding:0px;"| <!-- Attributi cella-contenitore colonne tacche -->
{|style="border-collapse:collapse; float:left; margin-left:0px;" <!-- Colonna valori tacche -->
|style="height:97px; width:5px; border-top:solid 1px #FFEEEE;" valign=top| 30
|-
|style="height:97px; border-top:solid 1px #FFEEEE;" valign=top| 20
|-
|style="height:99px; border-top:solid 1px #FFEEEE; border-bottom:solid 1px #FFEEEE;" valign=top| 10
|}
{|style="border-collapse:collapse; float:left; margin-left:0px;" <!-- Colonna tacche -->
|style="height:0px; width:3px;"|
|-
|style="height:97px; border-top:solid 1px black;"|
|-
|style="height:97px; border-top:solid 1px black;"|
|-
|style="height:99px; border-top:solid 1px black; border-bottom:solid 1px black;"|
|}
|bgcolor=#FFEEEE colspan=12 style="height:305px; padding:0px; border-left:solid 1px #FFEEEE; border-right:solid 1px #FFEEEE; border-top:solid 2px #FFEEEE;"| <!-- Attributi cella-contenitore grafico -->
{|style="border-collapse:collapse; float:left; margin-left:0px;" <!-- Gennaio -->
|style="height:210px; width:34px;" align=center valign=bottom| '''9'''
|-
|bgcolor=yellow style="height:90px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Febbraio -->
|style="height:230px; width:34px;" align=center valign=bottom| '''7'''
|-
|bgcolor=yellow style="height:70px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Marzo -->
|style="height:120px; width:34px;" align=center valign=bottom| '''18'''
|-
|bgcolor=yellow style="height:180px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Aprile -->
|style="height:140px; width:34px;" align=center valign=bottom| '''16'''
|-
|bgcolor=yellow style="height:160px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Maggio -->
|style="height:80px; width:34px;" align=center valign=bottom| '''22'''
|-
|bgcolor=yellow style="height:220px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Giugno -->
|style="height:30px; width:34px;" align=center valign=bottom| '''27'''
|-
|bgcolor=yellow style="height:270px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Luglio -->
|style="height:50px; width:34px;" align=center valign=bottom| '''25'''
|-
|bgcolor=yellow style="height:250px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Agosto -->
|style="height:90px; width:34px;" align=center valign=bottom| '''21'''
|-
|bgcolor=yellow style="height:210px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Settembre -->
|style="height:190px; width:34px;" align=center valign=bottom| '''11'''
|-
|bgcolor=yellow style="height:110px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Ottobre -->
|style="height:110px; width:34px;" align=center valign=bottom| '''19'''
|-
|bgcolor=yellow style="height:190px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Novembre -->
|style="height:0px; width:34px;" align=center valign=bottom|
|-
|bgcolor=yellow style="height:300px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top| '''30'''
|}
{|style="border-collapse:collapse; float:left; margin-left:2px;" <!-- Dicembre -->
|style="height:160px; width:34px;" align=center valign=bottom| '''14'''
|-
|bgcolor=yellow style="height:140px; border-left:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center valign=top|
|}
|bgcolor=#FFEEEE style="border-left:solid 1px #FFEEEE; border-right:solid 1px #FFEEEE; border-bottom:solid 1px #FFEEEE; border-top:solid 2px #FFEEEE; padding:0px;"| <!-- Attributi cella-contenitore colonne tacche -->
{|style="border-collapse:collapse; float:left; margin-left:0px;" <!-- Colonna tacche -->
|style="height:0px; width:3px;"|
|-
|style="height:97px; border-top:solid 1px black;"|
|-
|style="height:97px; border-top:solid 1px black;"|
|-
|style="height:99px; border-top:solid 1px black; border-bottom:solid 1px black;"|
|}
{|style="border-collapse:collapse; float:left; margin-left:0px;" <!-- Colonna valori tacche -->
|style="height:97px; width:5px; border-top:solid 1px #FFEEEE;" valign=top| 30
|-
|style="height:97px; border-top:solid 1px #FFEEEE;" valign=top| 20
|-
|style="height:99px; border-top:solid 1px #FFEEEE; border-bottom:solid 1px #FFEEEE;" valign=top| 10
|}
|-
|bgcolor=#FFEEEE style="border-left:solid 1px #FFEEEE; border-bottom:solid 1px #FFEEEE; border-top:solid 1px #FFEEEE;"| <!-- Zeppa col.tacche sn -->
! width=27px| Gen !! width=27px| Feb !! width=27px| Mar !! width=27px| Apr !! width=27px| Mag !! width=27px| Giu !! width=27px| Lug !! width=27px| Ago !! width=27px| Set !! width=27px| Ott !! width=27px| Nov !! width=27px| Dic
|bgcolor=#FFEEEE style="border-right:solid 1px #FFEEEE; border-bottom:solid 1px #FFEEEE; border-top:solid 1px #FFEEEE;"| <!-- Zeppa col.tacche dx -->
|}
Note:
* Lo spazio di <code>2px</code> che separa le colonne, oltre che a migliorare l'estetica, serve a far sì che abbiano tutte la stessa larghezza e lo stesso aspetto, dato che fra le colonne di gennaio e di dicembre e il margine esterno dello "zoccolo" su cui poggiano c'è uno scarto ineliminabile di <code>1px</code> (si tratta dei bordi della cella-contenitore "cancellati" conferendo loro il colore dello sfondo).
* All'occorrenza anche queste colonne possono essere divise in due o più, per rappresentare magari le variazioni su base annua.
* Volendo, con poche e abbastanza semplici modifiche questo istogramma può diventare un grafico a punti (●), in cui ciascuno di essi può contenere un link alla cosa o alla persona a cui si riferisce ([[Punto corredato di link descrittivo|●]]).
|}
= Varie =
{| class=wikitable style="background:#FFFFFF;"
|{{Bandiera|SOM}} {{Bandiera|MUS}}<br/>{{Bandiera|TAN}} {{Bandiera|CPV}}
|{{Bandiera|NAM}} {{Bandiera|BFA}}<br/>{{Bandiera|GHA}} {{Bandiera|GAB}}
|-
|{{Bandiera|CGO}} {{Bandiera|CAF}}<br/>{{Bandiera|GAM}} {{Bandiera|BEN}}
|{{Bandiera|SEY}} {{Bandiera|COD}}<br/>{{Bandiera|RSA}} {{Bandiera|BOT}}
|}
{| class=wikitable style="font-size:125%"
|╰ ╮||⋮||❄||☃||ƕ||●||•||·||✔||✘
|'''⋮'''
|}
[[Immagine:AnimatedWreath.gif]]
<pre>
<span style="position:fixed;z-index:-1000;left:0px;top:350px">
<imagemap>
File:Jimbo Peeking.gif
rect 0 0 0 0 [[Main Page]]
desc none
</imagemap>
</span>
</pre>
| 