[go: up one dir, main page]

Guide per esperti a utilizzi particolari delle tabelle.

Tabelle non rettangolari

modifica
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:none deve essere presente negli attributi della tabella per funzionare nelle caselle (i bordi esterni delle tabelle wikitable sono formati dalla sovrapposizione del bordo della tabella a quello delle singole caselle).
  • Parallelamente al border:none, esiste anche il comando background: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 usare style="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%; float:right; margin-left:10px; margin-right:10px"
! style="border:none; background:#ffeeee"|
! Parole in -occo
! style="border-top:1px solid #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:1px solid #f8f9fa"| Barocco || style="border:1px solid #f8f9fa"| Blocco
| Braccio ||bgcolor=#ffeeee style="border-right:1px solid #ffeeee"| Brogliaccio
|-
! Con la C
| Ciocco || Cocco || Carpaccio || Canovaccio
|-
| bgcolor=#ffeeee style="border:1px solid #ffeeee; border-right:0px"|
| Diplococco ||bgcolor=#FFEEEE style="border-bottom:1px solid #ffeeee"|  || Dispaccio
| bgcolor=#ffeeee style="border-right:1px solid #ffeeee; border-bottom:1px solid #ffeeee"|
|}

Tabelle nidificate

modifica

Le tabelle nidificate o annidate 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

modifica

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, 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"
Da nidificare
Tabella "semplice"
Senza bordi di default
Nidificata
Tabella "semplice"
Senza bordi di default
Da nidificare
Tabella "wikitable"
Con bordi di default
Nidificata
Tabella "wikitable"
Con bordi di default

Padding e border-collapse

modifica

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:

Tabella "semplice"
nidificata (e colorata)

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):

Tabella "semplice"
nidificata (e colorata)

Qui sotto il codice della tabella così modificata, con le righe contenenti i codici appena esposti in evidenza.

{|class=wikitable style="font-size: 95%;"     <!-- Attributi della tabella principale -->
|style="padding:0px"|     <!-- Attributi della cella-contenitore -->
{|bgcolor=#F2E0CE style="border-collapse:collapse"     <!-- Attributi 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 far fronte. Ultima nota: #A2A9B1 è il colore dei bordi delle tabelle di class=wikitable.

Dividere verticalmente una cella (senza bordi interni)

modifica
Tempo + Atleta Nazionalità Evento
Kayak
1'10"11 Record mondiale  b
Record mondiale 
Anna Oddo
Alula Nayan
Italia (bandiera)  Italia
India (bandiera)  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...), avendo naturalmente cura di far figurare una volta sola i dati comuni a entrambe le prestazioni.

Fra questi, Record mondiale  e b vanno inseriti nella stessa casella, ed è a questo punto che sorgono i problemi: la grammatica di Wikipedia non permette infatti di attribuire diverse configurazioni di allineamento ai vari contenuti di una stessa cella, per cui è impossibile far "galleggiare" la targhetta Record mondiale  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 Record mondiale , 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

modifica

La sintassi in questo caso è estremamente semplice (il &nbsp; nella celletta della b serve a "dare una presa" al comando <br/>).

{|
|{{Recordicona|RM|dim=small}}||''b''<br />&nbsp;
|}
Record mondiale  b
 
ossia, per averne una
percezione più chiara*
Record mondiale  b
 
* Dove

     è il bordo della tabella, mentre

     quello delle singole cellette.

Secondo passo: inserire la tabella nella cella-contenitore

modifica

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 />&nbsp;
|}
|Anna Oddo<br />Alula Nayan
|}
Tempo + Atleta
Kayak
1'10"11
Record mondiale  b
 
Anna Oddo
Alula Nayan

Terzo passo: inserire "padding" e "border-collapse"

modifica

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
Record mondiale  b
 
Anna Oddo
Alula Nayan

...e style="border-collapse:collapse" (notare come porti i bordi rossi e blu a sovrapporsi fra loro).

Tempo + Atleta
Kayak
1'10"11
Record mondiale  b
 
Anna Oddo
Alula Nayan

Quarto passo: ultimi aggiustamenti

modifica

Eliminati i bordi "illustrativi" blu e rossi...

Tempo + Atleta
Kayak
1'10"11
Record mondiale  b
 
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 il comando style="padding:", corredandolo dei valori in px (uno per ciascun lato) propri delle tabelle di class=wikitable, e cioè 5px a destra, 5px a sinistra, 2px sopra e 2px sotto (questo fino ai primi di maggio del 2018, quando il padding "orizzontale" è stato aumentato a 5.5px). L'ordine in cui questi valori andranno inseriti è lo stesso di ogni altro comando simile, ossia sopra, destra, sotto, sinistra (top, right, bottom, left, da mezzogiorno in senso orario). Partendo da questi presupposti basterà perciò inserire fra gli attributi delle singole cellette nidificate il comando style="padding: 2px 5px 2px 5px;", e si riconferirà alla cella-contenitore il suo aspetto originario.

Naturalmente, quando - come in questo caso - la nidificata consta di due cellette affiancate, i cui contenuti vanno fatti figurare come se fossero separati da un colpo di barra spaziatrice, occorrerà assegnare al "padding destro" della celletta di sinistra e al "padding sinistro" della celletta di destra valori tali per cui la loro somma risulti di 4px, ampiezza che solitamente* corrisponde a quella di uno spazio. I codici di padding dovranno perciò essere aggiustati in questo modo: style="padding: 2px 2px 2px 5px;" per la celletta di sinistra e style="padding: 2px 5px 2px 2px;" per quella di destra.

Completato quest'ultimo passaggio si otterrà una cella per aspetto e dimensioni perfettamente identica all'originale, seppur finalmente rispondente alle esigenze di partenza.

Risultato finale
Tempo + Atleta
Kayak
1'10"11
Record mondiale  b
 
Anna Oddo
Alula Nayan
Controllo
Tempo + Atleta
Kayak
1'10"11 Record mondiale  b
Record mondiale 
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 />&nbsp;
|}

* Misura riferita a valori di style="font-size:" del 100% (parametro di default) o poco inferiori, e anche in questi casi ci può talvolta essere una variazione di 1px in più o in meno a seconda degli "oggetti" che lo spazio si trova a separare, o a causa di altre variabili.

Alternativa spicciola

modifica

"Perché azzerare il padding, se poi tocca ricostruirlo?", verrebbe da chiedersi a questo punto, e questa in effetti è - finché resta circoscritta all'ambito delle nidificate senza bordi interni - un'obiezione per certi versi sensata. Come si può infatti facilmente verificare dando un'occhiata agli esempi qui sotto, le differenze sarebbero davvero contenute (2px in più sia in altezza che in larghezza), anche se in effetti si tratterebbe di scarti cumulativi. Un altro aspetto sfavorevole riguarderebbe lo spazio fra i contenuti di due cellette adiacenti, che a meno di interventi su altri parametri risulterebbe di 2px invece che di 4px, dato che il padding delle tabelle "semplici" dotate di style="border-collapse:collapse;" è di 1px su ciascuno dei quattro lati. Per ovviare a ciò bisognerebbe dotare le due cellette in esame dei comandi style="padding-right:2px" e style="padding-left:2px" (o 0px e 4px, o 1px e 3px, nel qual caso basterebbe inserire solo quest'ultimo, perché l'altro sarebbe già 1px di default), ma a quel punto il risparmio in termini di tempo e righe di codice non sarebbe più così netto, e la resa grafica resterebbe in ogni caso inferiore rispetto all'applicazione della procedura completa.

Padding azzerato e ricostruito
Originale
Islanda (bandiera)  Islanda
Replica
Islanda (bandiera)  Islanda
Replica
Islanda (bandiera)  Islanda
Padding né azzerato né ricostruito
Originale
Islanda (bandiera)  Islanda
Imitazione
Islanda (bandiera)  Islanda
Imitazione
Islanda (bandiera)  Islanda

Dividere orizzontalmente una cella (senza bordi interni)

modifica
Tempo + Atleta Nazionalità Evento
Kayak
1'00"01 Record mondiale  Alula Nayan
Anna Oddo
Anna Oddo
India (bandiera)  India
Italia (bandiera)  Italia
San Marino (bandiera)  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 da 1,5 (un <br/> e mezzo), e in effetti, giocando col comando style="line-height:%;", una buona approssimazione - qui sotto il codice della cella - la si riesce effettivamente ad ottenere.

| Alula Nayan <div style="line-height:97%;"><br />Anna Oddo<br />&nbsp; </div>

Tuttavia, soprattutto per "lasciare in eredità" codici più leggibili, la scelta migliore sarebbe ricorrere anche in questo caso alla nidificazione.

Dividere orizzontalmente una cella

modifica

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 aggiustamenti del caso.

Dopo aver assegnato alla celletta contenente il nome della prima atleta il padding "standard" inserendovi il comando style="padding: 2px 5px 2px 5px", si passerà a definire il padding "verticale" dell'altra (perché quello "orizzontale" già lo si conosce: 5px a dx + 5px a sn). Questa è una cosa che si può fare un po' a occhio, ma se uno volesse proprio strafare, potrebbe costruirsi dei sistemi di riferimento ad hoc, tipo i due riportati qui sotto.

Risultato
Svezia (bandiera)  Svezia
Norvegia (bandiera)  Norvegia
Riferimento
altezza
Norvegia (bandiera)  Norvegia Norvegia (bandiera) 
Norvegia (bandiera) 
Originale
Svezia (bandiera)  Svezia
Norvegia (bandiera)  Norvegia
Norvegia (bandiera)  Norvegia
Risultato
Giamaica (bandiera)  Giamaica
Scozia (bandiera)  Scozia
Riferim. altezza
Giamaica (bandiera)  Giamaica Giamaica (bandiera) 
Giamaica (bandiera) 
Originale
Giamaica (bandiera)  Giamaica
Giamaica (bandiera)  Giamaica
Scozia (bandiera)  Scozia

Una volta trovati i valori che portino la nidificata a riempire completamente la cella-contenitore facendo nel contempo "galleggiare" il nome della seconda atleta all'altezza desiderata, il lavoro potrà considerarsi concluso.

Risultato finale
+ Atleta Nazionalità
Kayak
Record mondiale 
Alula Nayan
Anna Oddo
India (bandiera)  India
Italia (bandiera)  Italia
San Marino (bandiera)  San Marino
Controllo
+ Atleta Nazionalità
Kayak
Record mondiale  Alula Nayan
Anna Oddo
Anna Oddo
India (bandiera)  India
Italia (bandiera)  Italia
San Marino (bandiera)  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

modifica

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 due 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).

Metodo A: 1 tabella da 2 cellette
+ Atleta Nazionalità
Kayak
Record mondiale 
Elisabette Basile
Anna Oddo
Gran Bretagna (bandiera)  Gran Bretagna
Italia (bandiera)  Italia
San Marino (bandiera)  San Marino
Metodo B: 2 tabelle da 1 celletta
+ Atleta Nazionalità
Kayak
Record mondiale 
Elisabette Basile
Anna Oddo
Gran Bretagna (bandiera)  Gran Bretagna
Italia (bandiera)  Italia
San Marino (bandiera)  San Marino

Dividere verticalmente una cella (con bordi interni)

modifica
Nidificata grezza
Cifre
dispari
1 3 5 7 9
Cifre
pari
2 4 6 8
Nidificata giustificata
Cifre
dispari
1 3 5 7 9
Cifre
pari
2 4 6 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 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ù[* 1]).

Ecco perciò che, per ottenere il risultato voluto, occorre nella maggior parte dei casi applicare alle cellette della nidificata i comandi style="height:" e style="width:" (a differenza di style="padding:" consentono di approfittare del centraggio automatico dei contenuti), 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 anche in questo caso stabilirli tramite prove ed errori (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)

  1. ^ 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 applicata di default a qualsiasi "oggetto".

Dividere orizzontalmente una cella (con bordi interni)

modifica
Nidificata giustificata
Cifre dispari Cifre pari
1
2
4
6
8
3
5
7
9
Nidificata grezza
Cifre dispari Cifre pari
1
2
4
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)

modifica

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

modifica


     Cella-contenitore


     Tabella nidificata


     2ª tabella nidificata


     3ª tabella nidificata


     4ª tabella nidificata

Tabella 1.1
Nomi Nomi composti
Edoardo
Filippo
Giuseppe
Simone
Valentino
Gian  Franco
 Maria
Pier  Francesco 
 Giorgio
 Mario
Tabella 1.2
Nomi Nomi composti
Edoardo
Filippo
Giuseppe
Simone
Valentino
Gian  Franco
 Maria
Pier  Francesco 
 Giorgio
 Mario
Tabella 1.3
Nomi Nomi composti
Edoardo
Filippo
Giuseppe
Simone
Valentino
Gian
Pier
 Franco
 Maria
 Francesco 
 Giorgio
 Mario
Tabella 1.4
Nomi Nomi composti
Edoardo
Filippo
Giuseppe
Simone
Valentino
Gian
 Franco
 Maria
Pier
 Francesco 
 Giorgio
 Mario
  • 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

modifica

Per non sovraccaricare il codice, il padding "orizzontale" è stato qui ottenuto collocando spazi &nbsp; prima di ogni contenuto testuale 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||&nbsp;Franco<br />&nbsp;Maria
|-
|style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center|Pier||style="border-top:solid 1px #A2A9B1"|&nbsp;Francesco&nbsp;<br />&nbsp;Giorgio<br />&nbsp;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||&nbsp;Franco<br />&nbsp;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"|&nbsp;Francesco&nbsp;<br />&nbsp;Giorgio<br />&nbsp;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;"|&nbsp;Franco<br />&nbsp;Maria
|-
|style="border-left:solid 1px #A2A9B1;"|&nbsp;Francesco&nbsp;<br />&nbsp;Giorgio<br />&nbsp;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;"|&nbsp;Franco<br />&nbsp;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;"|&nbsp;Francesco&nbsp;<br />&nbsp;Giorgio<br />&nbsp;Mario
|}
|}

Costruire grafici usando le tabelle nidificate

modifica

Alcune dimostrazioni pratiche della duttilità delle tabelle nidificate. L'idea di base è creare una cella-contenitore con una larghezza data, espressa in px. Fatto 100 questo valore, sarà poi piuttosto semplice costruire barre che rispecchino fedelmente i valori che andranno a rappresentare. (Nota: per costruire i grafici a sviluppo orizzontale è stato utilizzato il metodo descritto nella Tabella 1.2 della soprastante sezione, per l'istogramma verticale quello della Tabella 1.3)

Grafici orizzontali

modifica

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 uno spazio a larghezza zero &#8203;).


     Cella-contenitore


     Celle singole nidificate

Tabella 1
Celle nidificate e intestazione a sbalzo per sondaggi al volo
 Uva  45%
 Mele  85%
 Fragole  15%
 Arance  65%
 Albicocche  25%
Tabella 2
Celle nidificate e intestazione a capitello per grafici a stalattite
Uva
Mele
Fragole
Arance
Albicocche
Tabella 3.1
Esito del sondaggio

No
Non so
24%
11%
65%
Totale 100%
Tabella 3.2
Esito del sondaggio

No
Non so
24%
11%
65%
Totale

     Maschi - 52,8%

     Femmine - 47,2%

100%

Istogramma verticale

modifica
Numero di volte al mese in cui la tal cosa si è verificata, su base 30
30
20
10
9
7
18
16
22
27
25
21
11
19
30
14
30
20
10
Gen Feb Mar Apr Mag Giu Lug Ago Set Ott Nov Dic

Note:

  • Lo spazio di 2px 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 1px (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 ().

Nidificate "a francobollo"

modifica

Qui di seguito sono illustrate le tecniche per nidificare una tabella in corrispondenza di un angolo di una cella-contenitore, facendo contemporaneamente in modo che la parte restante di essa possa essere interamente occupata da un qualsiasi inserimento testuale.

In questa sezione, diversamente dalle precedenti, occorre che le tabelle da nidificare siano di class=floatleft o class=floatright. Queste classi, a differenza di class=wikitable o class=toccolours (a cui fra l'altro possono essere abbinate, scrivendo ad esempio class="wikitable floatleft"), si limitano a conferire alle tabelle a cui vengono applicate esclusivamente il corrispondente parametro di allineamento (oltre ai margini esterni - invisibili - inferiore e destro, oppure sinistro), lasciandole per il resto del tutto inalterate. In pratica (margini a parte) si comportano come i comandi style="float:left" e style="float:right", con la differenza che mentre le tabelle dotate di style="float:left" (o right) si dispongono automaticamente sulla stessa riga, quelle contrassegnate class=floatleft (o right) vanno invece a "impilarsi" sulla stessa colonna.

Costruire la tabella

modifica

La procedura ricalca quella consueta: creare la "nidificanda" (qui un semplice specchietto), dotarla di collapse e inserirla in una cella-contenitore a cui sia stato azzerato il padding. Poi (o prima, è uguale) aggiungerci class=floatleft (o right), e fornire di bordi i due lati che guardano verso l'interno della cella. Infine, ricostruirne il padding seguendo le procedure illustrate nelle sezioni precedenti, o adottando gli accorgimenti che si riterranno più opportuni (negli esempi sottostanti: cellette di altezza e larghezza impostate manualmente associate al comando style="text-align:center").

Ripristinato il padding della nidificata, bisognerà dedicarsi a quello della cella-contenitore. Non potendo agire direttamente su di esso, pena il distacco della nidificata "a francobollo" dai bordi della cella-contenitore, occorrerà ripristinarlo inserendo in quest'ultima altre due nidificate (in verde negli esempi), vuote, a cui si dovranno assegnare altezze in px tali per cui tutte le righe di testo ne risultino "coperte". Nota: queste due nidificate, l'una di class=floatleft e l'altra di class=floatright, sono larghe 2px ciascuna, e hanno entrambe per default un margine (rivolto verso l'interno) di 7px. Ciò significa che, per ricreare il padding "orizzontale" proprio delle celle di class=wikitable (5px + 5px), sarà necessario aggiungere alle rispettive tabelle i comandi style="margin-right: 3px;" e style="margin-left: 3px;", da collocare nella riga di intestazione. Anche la nidificata "a francobollo" dovrà poi essere "adeguata" allo stesso modo, assegnando però in quel caso al margine la larghezza di 5px.

Quanto detto fin qui vale per le tabelle 3 e 4. Le tabelle 1 e 2, invece, necessitano di due passaggi ulteriori:

  1. Dato che in questi casi le nidificate "a francobollo" devono poggiarsi sul fondo della cella, è necessario privarle del margine inferiore, inserendo il comando style="margin-bottom: 0;" nella riga di intestazione.
  2. Dato che in questi casi le nidificate "a francobollo" devono poggiarsi sul fondo della cella senza però "sfondarlo", ecco che bisognerà prestare particolare attenzione ad assegnare alle nidificate vuote poste sopra di esse (in rosso negli esempi) l'altezza esatta - sempre in px - che consenta loro di farlo.

Naturalmente nulla vieta di inserire una nidificata in più di un angolo di una stessa cella, o di far aderire una o più tabelle (munendole poi di un terzo bordo) ai lati destro e/o sinistro, a qualsiasi altezza dal fondo o distanza fra loro.

Quattro varianti

modifica


     Nidificate "a francobollo"

Nidificate con funzione di padding
Nidificate con funzione di padding e di posizionamento
Tabella 1
Cane e
gatto

Gli animali domestici più diffusi in Italia e nel mondo. A partire dal neolitico accompagnano le vite di alcuni di noi, e recentemente si è scoperto che la loro presenza ha effetti benefici quando non addirittura terapeutici sulla psiche umana.

Tabella 3
Cane e
gatto

Gli animali domestici più diffusi in Italia e nel mondo. A partire dal neolitico accompagnano le vite di alcuni di noi, e recentemente si è scoperto che la loro presenza ha effetti benefici quando non addirittura terapeutici sulla psiche umana.

Tabella 2
Cane e
gatto

Gli animali domestici più diffusi in Italia e nel mondo. A partire dal neolitico accompagnano le vite di alcuni di noi, e recentemente si è scoperto che la loro presenza ha effetti benefici quando non addirittura terapeutici sulla psiche umana.

Tabella 4
Cane e
gatto

Gli animali domestici più diffusi in Italia e nel mondo. A partire dal neolitico accompagnano le vite di alcuni di noi, e recentemente si è scoperto che la loro presenza ha effetti benefici quando non addirittura terapeutici sulla psiche umana.

I codici delle quattro varianti

modifica

Qui i codici delle quattro tabelle, privi dei colori "illustrativi" e degli accorgimenti necessari per disporle l'una a 10px dall'altra.

(Tabelle nidificate evidenziate)

Tabella 1

{| class=wikitable style="font-size: 95%; width:25%;"
|+ Tabella 1
|style="padding:0px"|
{| class=floatleft style="border-collapse:collapse"     <!--- Nidificata funz. padding --->
|style="height:145px;"|
|}
{| class=floatright style="border-collapse:collapse"     <!--- Nidificata funz. padding + posizionamento --->
|style="height:89px;"|
|}
{| class=floatright style="border-collapse:collapse; margin-bottom: 0;"     <!--- Nidificata "a francobollo" --->
|style="height:60px; width:65px; text-align:center; border-top:solid 1px #A2A9B1; border-left:solid 1px #A2A9B1;"| '''Cane e<br />gatto'''
|}
Gli animali domestici più diffusi in Italia e nel mondo. A partire dal neolitico accompagnano le vite di alcuni di noi, e recentemente si è scoperto che la loro presenza ha effetti benefici quando non addirittura terapeutici sulla psiche umana.
|}

Tabella 2

{| class=wikitable style="font-size: 95%; width:25%;"
|+ Tabella 2
|style="padding:0px;"|
{| class=floatleft style="border-collapse:collapse"     <!--- Nidificata funz. padding + posizionamento --->
|style="height:89px;"|
|}
{| class=floatright style="border-collapse:collapse"     <!--- Nidificata funz. padding --->
|style="height:145px;"|
|}
{| class=floatleft style="border-collapse:collapse; margin-bottom: 0;"     <!--- Nidificata "a francobollo" --->
|style="height:60px; width:65px; text-align:center; border-top:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1;"| '''Cane e<br />gatto'''
|}
Gli animali domestici più diffusi in Italia e nel mondo. A partire dal neolitico accompagnano le vite di alcuni di noi, e recentemente si è scoperto che la loro presenza ha effetti benefici quando non addirittura terapeutici sulla psiche umana.
|}

Tabella 3

{| class=wikitable style="font-size: 95%; width:25%;"
|+ style="caption-side:bottom;"| Tabella 3
|style="padding:0px"|
{| class=floatright style="border-collapse:collapse"     <!--- Nidificata "a francobollo" --->
|style="height:60px; width:65px; text-align:center; border-bottom:solid 1px #A2A9B1; border-left:solid 1px #A2A9B1;"| '''Cane e<br />gatto'''
|}
{| class=floatleft style="border-collapse:collapse"     <!--- Nidificata funz. padding sn --->
|style="height:145px;"|
|}
{| class=floatright style="border-collapse:collapse"     <!--- Nidificata funz. padding dx --->
|style="height:75px;"|
|}
Gli animali domestici più diffusi in Italia e nel mondo. A partire dal neolitico accompagnano le vite di alcuni di noi, e recentemente si è scoperto che la loro presenza ha effetti benefici quando non addirittura terapeutici sulla psiche umana.
|}

Tabella 4

{| class=wikitable style="font-size: 95%; width:25%;"
|+ style="caption-side:bottom;"| Tabella 4
|style="padding:0px"|
{| class=floatleft style="border-collapse:collapse"     <!--- Nidificata "a francobollo" --->
|style="height:60px; width:65px; text-align:center; border-bottom:solid 1px #A2A9B1; border-right:solid 1px #A2A9B1;"| '''Cane e<br />gatto'''
|}
{| class=floatright style="border-collapse:collapse"     <!--- Nidificata funz. padding dx --->
|style="height:145px;"|
|}
{| class=floatleft style="border-collapse:collapse"     <!--- Nidificata funz. padding sn --->
|style="height:75px;"|
|}
Gli animali domestici più diffusi in Italia e nel mondo. A partire dal neolitico accompagnano le vite di alcuni di noi, e recentemente si è scoperto che la loro presenza ha effetti benefici quando non addirittura terapeutici sulla psiche umana.
|}