Tabelle

flexlex

Posted on 27/2/2014, 19:35

+2

.

Group: Mod

Posts: 3,751

Reputation: +53

Location: bolzano/bozen

Status: Offline

Tabelle

Introduziome
Il vecchio layout di forumfree (anche conosciuto come quirks mode) era basato si tabelle. Perfino browser antichi come vecchie versioni di Netscape sopportavano tabelle e riuscivano a visualizzare correttamente forumfree. Però c'è un motivo se siamo passati al nuovo layout (standard mode), ovvero il rendering dei browser (già mi ci vedo Rory e mille che si spaccano la testa chiedendosi cosa intendo con "rendering dei browser"). Semplice, è come il browser interpreta e visualizza il sito. I browser giorno d'oggi hanno la capacità di visualizzare le pagine prima che siano state caricate del tutto. Però questa cosa non è possibile farla con tabelle, visto che i browser devono sapere l'intera struttura della tabella, prima di poterla realizzare. In parole povere: le tabelle fanno sembrare il download delle pagine più lento. Quindi è meglio evitare tabelle per strutturare un sito, ma di usarle solo per rappresentare qualcosa come una tabella.

Ma le tabelle non sono contenitori?
Se vi state chiedendo perché le tabelle non le ho inserite nel topic dei contenitori, il motivo è semplice. Perché semplicemente sono più complesse e hanno alcune differenze dai normali div e span. Anche le tabelle hanno una loro proprietà css come i div (display:block) e gli span (display:inline) ovvero display:table e display:table-cell. (Si i display sono tanti, vi spiegherò ancora display:inline-block e display:flex in futuro).

Iniziamo
Per definire una tabella possiamo usare il tag "table", per renderla subito visibile aggiungiamo gli attributi border="1" e width="100%" (di solito si usa il css, ma per questo esempio useremo l'attributo deprecato)

HTML

<table border="1" width="100%"></table>

Fino ad ora non dovremmo vedere molto, solo una linea.
Andiamo ad aggiungere una riga alla nostra tabella con l'attributo "tr".

HTML

<table border="1" width="100%"><tr></tr></table>

dovremmo vedere che lo spazio tra i bordi è aumentato. Ed infine aggiungiamo una colonna con l'attributo "td"

HTML

<table border="1" width="100%"><tr><td>A</td></tr></table>

A

Ecco la nostra prima tabella con una riga ed una colonna. Per aggiungere una nuova colonna, ci basta affiancare un altro "td" a quello già esistente.

HTML

<table border="1" width="100%"><tr><td>A</td><td>B</td></tr></table>

A

B

Ora aggiungiamo una seconda riga con altre due colonne (il numero di colonne deve essere uguale per ogni riga, altrimenti vedremo degli spazi inutilizzati nella nostra tabella), anche qui affiancando un "tr" a quello già esistente.

HTML

<table border="1" width="100%">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>

A	B
C	D

Ed ecco la tabella 2x2.

Abbiamo la possibilità di colorare una cella con l'attributo "bgcolor" e come valore il colore.

HTML

<table border="1" width="100%">
<tr><td bgcolor="purple">A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>

A	B
C	D

Tabelle "eccezionali"
Possiamo creare delle tabelle eccezionali, nelle quali una cella può occupare più righe o/e colonne. Su forumfree andavano di moda per costruire le così dette "bacheche".

Il nostro obbiettivo sarà quello di creare un tabella simile a questa.

A		B	C
D	E
F
G		H	I
J	K	L	M

Ho fatto una riga con tutte e quattro le colonne così il browser divide lo spazio in modo equo

Si parte sempre analizando la tabella (che abbiamo in mente), pensiamo il numero massimo di colonne e righe che possiamo trovare nella nostra bellissima tabella immaginaria. Nel esempio sarebbero 5 righe e 4 colonne).

A	A	B	C
D	E	E	C
F	E	E	C
G	G	H	I
J	K	L	M

Questa sarebbe la nostra "tabella d'esempio". Il codice è il seguente

SPOILER (clicca per visualizzare)

CODICE

Ho nominato le celle che andremo ad unire con la stessa lettera. Per unirle useremo gli attributi colspan e rowspan che indicano quante righe o colonne devono "prendersi". Le prime due celle (le due celle con "A") le andremo ad unire con l'attributo colspan="2" che dirà alla cella A₁ di occupare due celle.

Quindi se aggiungiamo sto attributo, la prima riga sarà più o meno così.

CODICE

E otteniamo

A		A	B	C
D	E	E	C
F	E	E	C
G	G	H	I
J	K	L	M

Come vediamo si è aggiunta una quinta colonna e abbiamo ancora due celle "A" , appunto per mettere le cose in ordine, dobbiamo cancellare la tabella ora inutile. Ora come ora le due celle "A" occupano 3 colonne, A₁ ne consuma due e A₂ ne consuma 1. La cella A₂ non è più necessaria e possiamo eliminarla.

Nuovo codice:

CODICE

Nuovo risultato:

A		B	C
D	E	E	C
F	E	E	C
G	G	H	I
J	K	L	M

Facciamo la stessa cosa con le celle "C" a usando il rowspan="3" (visto che occupa 3 righe). La prima riga assomiglia poi a questa.

CODICE

A		B	C
D	E	E		C
F	E	E		C
G	G	H	I
J	K	L	M

Indovinate cosa.. Colonne Extra! Non ci piace. Per rimuoverle, basta eliminare una cella nelle righe incriminate (io di solito cancello quelle alla stessa "posizione" della cella che sta occupando più spazio, ovvero l'ultima)

SPOILER (clicca per visualizzare)

CODICE

A		B	C
D	E	E
F	E	E
G	G	H	I
J	K	L	M

Arriviamo ora alla cella "E" che occupa 4 celle in tutto. 2 * 2 = 4. quando aggiungeremo rowspan="2" colspan="2" avremmo un gran macello come potete vedere qui sotto.

A		B	C
D	E			E
F	E			E	E
G	G	H	I
J	K	L	M

Questo perché dobbiamo eliminare 1 cella sulla destra e ben 2 celle nella riga che segue.

A		B	C
D	E
F	E
G	G	H	I
J	K	L	M

Ora basta unire le due celle G e abbiamo la nostra bella bacheca

A		B	C
D	E
F
G		H	I
J	K	L	M

Wow, penso che se riuscite a padroneggiare le tabelle, siete già a buonissimo punto e avete i requisiti per imparare tutte le tecnologie più moderne. Insomma le tabelle sono pesanti da digerire per i browser, ma offrono molto controllo sulla struttura. (anche se poi impariamo a fare queste strutture anche con div nel capitolo float e clear).

Ultima chicca
I bordi sono sempre distanti tra loro, esistono due attributi che possono cambiare il "comportamento" delle celle e delle tabelle.
Uno è cellpadding e l'altro cellspacing
Il primo non è molto interessante, è solo la distanza tra "bordi" e "contenuto delle celle".
Invece il secondo vi garba di sicuro

Come cellspacing va aggiunto al tag table anche in questo caso è un valore numerico, ma definisce gli spazi tra i bordi.
Esempio di prima senza cellspacing:

A		B	C
D	E
F
G		H	I
J	K	L	M

Adesso con cellspacing, modificando la dichiarazione della tabella in

CODICE

A		B	C
D	E
F
G		H	I
J	K	L	M

Fa decisamente un effetto più figo

Poi quando facciamo il CSS vi insegno come colorare i bordi con un piccolo trucchetto (consigliato da forumfree stesso, potete controllare nel wiki xD)

Vi lascio con un bell'esercizio.... ah già, il sottotitolo figo.
http://jsbin.com/sigoyiri/1/edit
Esercizio^{*da leggere con voce fonda e da narratore... anche se vi esce quella di batman va bene*}

Il vostro compito sara quello di creare questa tabella e di inserirla tra i commenti

5A3P0u8

Edited by .:Milla:. - 27/2/2014, 22:34

Web

.

Rory

Posted on 27/2/2014, 20:34

.

Senior Member

Group: Admin

Posts: 12,556

Reputation: +140

Status: Offline

+1 alla it's over 9000!

.

.:Milla:.

Posted on 27/2/2014, 22:56

.

User deleted

A	B	C	D	E
F	G		H
			I	L
	M	N
	O	P		Q

Lol XD Flex, pensavo fosse decisamente più difficile da quel che dicevi.. E' una cazzata! ouo Però spiegami perchè se scrivo qualcosa all'interno si sballa tutta....

SPOILER (clicca per visualizzare)

A	B...lurick=	C...icorie	D	E
F(lex puzza)	G		H
			I	L
	M come Milla	N
	O	P		Q

.

Stratego

Posted on 28/2/2014, 00:21

.

Tutto comincia da un risveglio

Group: MAW User

Posts: 2,425

Reputation: +38

Status: Anonymous

Molto utile, grazie Lex!

SPOILER (clicca per visualizzare)

1	1	1	1	1
1	1		1
			1	1
	1	1
	1	1		1
1

Milla puzza	Rory puzza	Golden puzza	Carna puzza	Blur puzza
Ci sono 3 modi per farsi nemici gli staffer del MAW	fare una tabella		ella
			ella ella	ella ella ella
	ricordargli quanto puzzano	e puzzano molto...
	fare una tabella in cui gli ricordi quanto puzzano	ti scanneranno vivo		ma allora perché ho fatto questa tabella? o_o
Supercalifragilistiblurickfinocchioso!

Nooooooooooooo, Milla mi ha fregato l'idea! :gni:

CITAZIONE (.:Milla:. @ 27/2/2014, 22:56)

Però spiegami perchè se scrivo qualcosa all'interno si sballa tutta....

Devi calibrare bene il testo che scrivi con lo spazio a tua disposizione nelle celle; se superi lo spazio la tabella si adatterà di conseguenza per contenere il testo...

.

.:Milla:.

Posted on 28/2/2014, 00:42

.

User deleted

CITAZIONE

Supercalifragilistiblurickfinocchioso!

Questa è la parte più bella :asd:

CITAZIONE

Devi calibrare bene il testo che scrivi con lo spazio a tua disposizione nelle celle; se superi lo spazio la tabella si adatterà di conseguenza per contenere il testo...

Ma scusa, se alla B aggiungo poche lettere per formare Blurick, perchè si allarga così tanto la cella? la scritta ci entrerebbe benissimo lo stesso :omg:

capisco se dovesse toccare i bordi, ma così.. D:

.

Stratego

Posted on 28/2/2014, 00:49

.

Tutto comincia da un risveglio

Group: MAW User

Posts: 2,425

Reputation: +38

Status: Anonymous

CITAZIONE (.:Milla:. @ 28/2/2014, 00:42)

Ma scusa, se alla B aggiungo poche lettere per formare Blurick, perchè si allarga così tanto la cella? la scritta ci entrerebbe benissimo lo stesso :omg:

capisco se dovesse toccare i bordi, ma così.. D:

Questo può avvenire per due motivi: o perché hai modificato le celle sottostanti o soprastanti con testi troppo lunghi (anche se non mi sembra il tuo caso), oppure perché la tabella cerca di compensare ed equilibrare gli spazi (in pratica dà maggiore spazio al testo più lungo, mentre a quello più corto [le lettere] lo sottrae); prova a mettere qualche frase anche nelle ultime 2 colonne

.

.:Milla:.

Posted on 28/2/2014, 00:57

.

User deleted

A	B...lurick=	C...icorie	Deeeee	Ehehehehehe
F(lex puzza)	G		Hehehehe
			I Colori sono belli~	L'Unicorn on the rainbow <3
	M come Milla	N
	O	Puzzapuzzapuzza		Qhe puzza D:

Non c'è un modo per dare una dimensione fissa ad ogni cella? o comunque dirgli che ogni cella occupa 1/5 dello spazio, poi quando le unici saranno 2/5 e così via, anche se scrivi dentro qualcosa

.

Stratego

Posted on 28/2/2014, 01:21

+1

.

Tutto comincia da un risveglio

Group: MAW User

Posts: 2,425

Reputation: +38

Status: Anonymous

CITAZIONE (.:Milla:. @ 28/2/2014, 00:57)

Non c'è un modo per dare una dimensione fissa ad ogni cella? o comunque dirgli che ogni cella occupa 1/5 dello spazio, poi quando le unici saranno 2/5 e così via, anche se scrivi dentro qualcosa

Certo che c'è ragazza mia, ma non mi sembra il caso di rovinare un così bel topic con dei meschini post di pignoleria (che sicuramente Lex conoscerà già), quindi appena hai letto cancella il mio spoiler! ù_ù

SPOILER (clicca per visualizzare)

devi lavorare sulle celle, in pratica modificarle "manualmente"; puoi modificare e personalizzare ogni cella a tuo piacimento!
Per stabilire la grandezza della cella, devi aggiungerla nel codice della stessa cella

CODICE

<td>Avevo un Blur nero</td>

cod. modificato

CODICE

<td width="30%">Avevo un Blur nero</td>

Prova a metterlo nelle tue celle (modifica la % a tuo piacimento!).

.

Rory

Posted on 28/2/2014, 11:50

.

Senior Member

Group: Admin

Posts: 12,556

Reputation: +140

Status: Offline

L'ho fatta un po' più semplice perché mi fa male la testa. :3

I'm happy, Bro	Up, 'cause it's the way	Essere	o non essere
Stupidi come	Stratego trolololo <3
Lollai	comunque basta così altrimenti viene amnesiac		facciamo le
persone serie			e ci permabanna