Tutorial Tabelle, By Elidarth & Html.it

Elidarth

Posted on 15/12/2007, 12:18

Tutorial tabelle
Visto che a tanti utenti interessa l'utilizzo delle tabelle, ho pensato di iniziare a postare una sorta di tutorial per il loro utilizzo.
Per ora sono riuscito solo a scrivere due post iniziali, con poche cose di nuovo. Prometto che appena avrò tempo continuerò a postare parti più interessanti!

•Nozioni di Base
•Raggruppare Celle
•Gruppi di Righe
•Annidiare Tabelle
•Attributi del Tag Table

Piccole puntualizzazioni:

•In tutti gli attributi in cui vengono assegnati dei valori, viene visualizzato il numero tra due virgole ( width="3" ). Il forum riconosce correttamente il valore anche senza l'utilizzo delle virgole, ma è buona regola utilizzarle sempre, visto che in html sono quasi sempre necessarie.
•In qualche cella potrete vedere apparire il seguente scritto:

HTML

&nbsp

altro non è che uno spazio vuoto che non va a capo! Necessario per lasciare la tabella vuota, che richiede sempre di essere riempita con del codice!

Per postare qualsiasi cosa a proposito del suddetto tutorial, vi rimando a questo link: QUI

Edited by Ray~ - 2/1/2010, 19:34

Elidarth

Posted on 15/12/2007, 12:18

• Tabelle ~nozioni di base

La tabella, altro non è, che una griglia, formata da righe e colonne. Per creare una tabella, dunque serve conoscere come creare righe e colonne.

CITAZIONE

HTML

<table>

Serve ad aprire la vostra tabella

HTML

<tr>

"Table row" serve per aprire una riga.

HTML

<td>

"Table data" indica la creazione di una cella, all'interno di una riga.

Possiamo iniziare a creare le prime tabelle, per ora mantenendo il numero delle celle, identico per ogni singola riga.
Introduciamo immediatamente, un primo attributo fondamentale per le tabelle, il border:

CITAZIONE

HTML

<table border="1">

Servirà a specificare di quanti pixel sarà composto il bordo della tabella. Senza di esso, i bordi saranno invisibili, e poco utili in questa guida iniziale.

Ecco il primo esempio di una tabella perfettamente funzionante. Una classica 2x2

HTML

<table border="1">
<tr>
<td>Riga 1 Cella 1</td>
<td>Riga 1 Cella 2</td>
</tr>

<tr>
<td>Riga 2 Cella 3</td>
<td>Riga 2 Cella 4</td>
</tr>
</table>

Riga 1 Cella 1	Riga 1 Cella 2
Riga 2 Cella 3	Riga 2 Cella 4

Possiamo poi, specificare la larghezza e l'altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (table, tr, td). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo “%”): in questo caso la tabella si adatta secondo lo spazio a disposizione.

CITAZIONE

HTML

Specifica la larghezza della colonna a 15 px. Può essere usato anche per il table o il td.

HTML

Specifica l'altezza della cella al 50% dello spazio disponibile. Può essere usato anche per il table o il td.

Facciamo dunque un esempio: una tabella 2x2 che occuperà l'80% dello spazio disponibile, e con la seconda riga, di altezza fissa 100 px.

HTML

<table border="1" width="80%">
<tr>
<td>Riga 1 Cella 1</td>
<td>Riga 1 Cella 2</td>
</tr>

<tr height="100">
<td>Riga 2 Cella 3</td>
<td>Riga 2 Cella 4</td>
</tr>
</table>

Riga 1 Cella 1	Riga 1 Cella 2
Riga 2 Cella 3	Riga 2 Cella 4

Elidarth

Posted on 15/12/2007, 12:19

• Tabelle ~raggruppare celle

Nella prima lezione, abbiamo visto tabelle, con il numero delle celle fisso per ogni riga. è tuttavia utile, poter variare il numero delle celle rispetto righe e colonne, senza aver come risultato, tabelle sformate e mal allineate. Per far ciò, esistono due semplici attributi da aggiungere al campo cella.

CITAZIONE

HTML

Serve a specificare, che la cella in considerazione, occuperà lo spazio di due celle, sulla stessa riga.

HTML

Serve a specificare, che la cella occuperà lo spazio di tre celle, rispetto alla colona.

CITAZIONE

HTML

<table border="1">

Servirà a specificare di quanti pixel sarà composto il bordo della tabella. Senza di esso, i bordi saranno invisibili, e poco utili in questa guida iniziale.

Ora possiamo creare tabelle con un numero di celle variabili rispetto alle righe e alle colonne. Proviamo a creare una tabella con due celle sulla prima riga, e una solamente sulla seconda.

HTML

<table border="1">
<tr>
<td>R 1 C 1</td>
<td>R 1 C 2</td>
</tr>

<tr>
<td colspan="2">Riga 2 Cella 3</td>
</tr>
</table>

R 1 C 1	R 1 C 2
Riga 2 Cella 3

Il risultato è ottimo! Proviamo dunque a creare un unica cella su una colonna. Creiamo una tabella con tre celle sulla prima colonna, una sulla seconda, e due sulla terza!

HTML

<table border="1">
<tr>
<td>R 1 C 1</td>
<td rowspan="3">R 1 C 2</td>
<td>R 1 C 3</td>
</tr>
<tr>
<td>R 2 C 4</td>
<td rowspan="2">R 2 C 5</td>
</tr>
<tr>
<td>R 3 C 6</td>
</tr>
</table>

R 1 C 1	R 1 C 2	R 1 C 3
R 2 C 4		R 2 C 5
R 3 C 6

In tutte queste tabelle, possiamo sempre usare i vari parametri visti nella prima lezione, come il width per esempio, e creare così un infinità di tabelle diverse tra loro.

Elidarth

Posted on 15/12/2007, 13:07

• Tabelle ~raggruppamento righe

Grosse tabelle hanno il problema di essere invase da tag td e tr. Serve dunque un espediente per ridurre la possibilità di scambiare le stesse, e allo stesso tempo di ordinare il codice, per facilitarne anche l'intervento di modifica o manutenzione.
Sono stati introdotti alcuni tag per raccogliere varie righe assieme:

CITAZIONE

HTML

<caption>

è l’intestazione, il titolo con un commento esplicativo sulla tabella

HTML

<thead>

è l'intestazione, la parte iniziale della tabella, quella che contiene ad esempio indicazioni sul contenuto delle celle

HTML

<tfoot>

è il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme

HTML

<tbody>

è il corpo, la parte centrale con il contenuto vero e proprio della tabella

thead, tfoot, tbody sono tag che consentono di individuare gruppi di righe (“row group”).

Da notare che, il tag tfoot, ovvero ciò che indica la conclusione della tabella, è anteposto rispetto al tbody. L’idea di base è che il browser nell’eseguire la "conversione" del codice tenga conto della parte iniziale e della parte finale della tabella, e il corpo vero e proprio sia sviluppato nella sua interezza tra le due estremità.

Un’altra particolarità è che le celle all’interno del tag thead possono essere indicate con:

CITAZIONE

HTML

<th>

“table header”, al posto del consueto td “table data”, in questo caso il contenuto delle celle è automaticamente formattato in grassetto e centrato.

HTML

<table width="75%" border="1">

<caption><div align="center">Conto corrente Elidarth</div></caption>

<thead>
<tr>
<th width="20%">Mesi di controllo</th>
<th width="40%">Entrate (in euro)</th>
<th width="40%">Uscite (in euro)</th>
</tr>
</thead>

<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td >Totale</td>
<td >450.000</td>
<td >45.000</td>
</tr>
</tfoot>

<tbody>
<tr>
<td >gen</td>
<td >10.000</td>
<td >1.000</td>
</tr>

<tr>
<td >feb</td>
<td >20.000</td>
<td >2.000</td>
</tr>

<tr>
<td >mar</td>
<td >30.000</td>
<td >3.000</td>
</tr>

<tr>
<td >apr</td>
<td >40.000</td>
<td >4.000</td>
</tr>

<tr>
<td >ago</td>
<td >50.000</td>
<td >5.000</td>
</tr>

<tr>
<td >sett</td>
<td >60.000</td>
<td >6.000</td>
</tr>

<tr>
<td height="24">ott</td>
<td >70.000</td>
<td >7.000</td>
</tr>

<tr>
<td >nov</td>
<td >80.000</td>
<td >8.000</td>
</tr>

<tr>
<td height="24" >dic</td>
<td >90.000</td>
<td >9.000</td>
</tr>
</tbody>
</table>

**Conto corrente Elidarth**
Mesi di controllo	Entrate (in euro)	Uscite (in euro)

Totale	450.000	45.000
gen	10.000	1.000
feb	20.000	2.000
mar	30.000	3.000
apr	40.000	4.000
ago	50.000	5.000
sett	60.000	6.000
ott	70.000	7.000
nov	80.000	8.000
dic	90.000	9.000

Come potete osservare, il tfoot, è stato posto prima del tbody, proprio per definire per primis la parte iniziale e finale della tabella, e successivamente riempirla con il codice.
In questo modo è estremamente semplice inserire nuove righe centrali, o di intestazione.

Edited by Elidarth - 15/12/2007, 13:22

Elidarth

Posted on 15/12/2007, 13:22

• Tabelle ~annidiare tabelle

È anche possibile annidare le tabelle le une dentro le altre. Come in questo esempio:

HTML

<table width="430" border="1"> <tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td height="24"> </td>
<td>

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

</td>
</tr>
</table>

Con il seguente risultato:

Per evitare che compaiano nel layout degli spazi indesiderati è consigliabile aprire e chiudere la tabella a ridosso del tag della cella che la contiene.

Elidarth

Posted on 15/12/2007, 14:20

• Tabelle ~attributi del tag table

Per quel che riguarda il tag table, i seguenti attributi che ci permettono di regolare le distanze tra i margini della tabella (o della cella) e il contenuto:

CITAZIONE

HTML

<table border="1">

Specifica la larghezza dei bordi di una tabella (in pixel)

HTML

<table cellspacing ="1">

Specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri

HTML

<table cellpadding="1">

Indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla

La dimensione indicata nel cellpadding e dal cellspacing ha effetto su tutti i lati della cella.

Immagine esempio:

Vediamo un esempio:

HTML

<table border="1" cellspacing="10" cellpadding="20">

<tr>
<td><center>.:::.
Out in the woods, unspoken horror of
Ancient malignance awakes
Leaving its hideout to please the hunger
Following the winds of the north
.:::.</center></td>
</tr>

</table>

.:::.
Out in the woods, unspoken horror of
Ancient malignance awakes
Leaving its hideout to please the hunger
Following the winds of the north
.:::.

Passiamo ora ai possibili attributi da applicare al termine border.
è possibile modificare l’aspetto dei bordi esterni della tabella (tramite l’attributo frames) e delle righe fra le celle (tramite l’attributo rules)..

CITAZIONE

HTML

<table border="1" frame="above" >

nei vari esempi, le righe interne tra le celle sono state azzerate per facilitare la comprensione, dunque ci troveremo nella situazione in cui rules="none"

Vediamo i vari esempi. Modificherò unicamente la riga iniziale del seguente codice:

HTML

<table width="300" bordercolor=#000000 border="1" frame="above" rules="none">
<tr>
<td width="50%">cella 1</td>

<td width="50%">cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
<tr>
<td>cella 5</td>

<td>cella 6</td>
</tr>
<tr>
<td >cella 7</td>
<td>cella 8</td>
</tr>
<tr>
<td >cella 9</td>

<td>cella 10</td>
</tr>
</table>

Inziamo immediatamente! I bordi rossi sono della grossa tabella che ho usato per contenere i vari pezzi del tutorial!

HTML

<table border="1" frame="void">

Void. In nessun lato. è il valore di default

cella 1	cella 2
cella 3	cella 4
cella 5	cella 6
cella 7	cella 8
cella 9	cella 10

HTML

<table border="1" frame="above">

Above. Solo nel lato superiore.

cella 1	cella 2
cella 3	cella 4
cella 5	cella 6
cella 7	cella 8
cella 9	cella 10

HTML

<table border="1" frame="below">

Below. Solo nel lato inferiore.

cella 1	cella 2
cella 3	cella 4
cella 5	cella 6
cella 7	cella 8
cella 9	cella 10

HTML

<table border="1" frame="hsides">

Hsides. Solo nei lati superiori e inferiori.

cella 1	cella 2
cella 3	cella 4
cella 5	cella 6
cella 7	cella 8
cella 9	cella 10

HTML

<table border="1" frame="vsides">

Vsides. Solo a sinistra e destra.

cella 1	cella 2
cella 3	cella 4
cella 5	cella 6
cella 7	cella 8
cella 9	cella 10

HTML

<table border="1" frame="lhs">

lhs. Solo sul lato sinistro.

cella 1	cella 2
cella 3	cella 4
cella 5	cella 6
cella 7	cella 8
cella 9	cella 10

HTML

<table border="1" frame="rhs">

rhs. Solo sul lato destro.

cella 1	cella 2
cella 3	cella 4
cella 5	cella 6
cella 7	cella 8
cella 9	cella 10

HTML

<table border="1" frame="box">

Box. in tutti e quattro i lati.

cella 1	cella 2
cella 3	cella 4
cella 5	cella 6
cella 7	cella 8
cella 9	cella 10

Ora passiamo ad analizzare i vari attributi per modificare i bordi presenti tra le righe della tabella:

CITAZIONE

HTML

<table border="1" rules="rows">

nei vari esempi i bordi esterni della tabella sono stati azzerati per facilitare la comprensione, dunque ci troveremo nella situazione in cui frame="void"

Vediamo i vari esempi. Modificherò unicamente la riga iniziale del seguente codice:

HTML

<table width="300" border="1" frame="void" rules="groups">
<thead>
<tr>
<th width="50%">intestazione 1</th>

<th width="50%">intestazione 2</th>
</tr>
</thead>

<tfoot>
<tr>
<td>chiusura 1</td>
<td>chiusura 2</td>
</tr>

</tfoot>

<tbody>
<tr>
<td>corpo 1</td>
<td>corpo 2</td>
</tr>
<tr>
<td >corpo 3</td>

<td>corpo 4</td>
</tr>
<tr>
<td >corpo 5</td>
<td>corpo 6</td>
</tr>
</tbody>
</table>

Inziamo immediatamente! I bordi rossi sono della grossa tabella che ho usato per contenere i vari pezzi del tutorial!

HTML

<table border="1" rules="none">

None. In nessun lato. è il valore di default

intestazione 1	intestazione 2
chiusura 1	chiusura 2
corpo 1	corpo 2
corpo 3	corpo 4
corpo 5	corpo 6

HTML

<table border="1" rules="groups">

Groups. Le righe separano i gruppi.

intestazione 1	intestazione 2
chiusura 1	chiusura 2
corpo 1	corpo 2
corpo 3	corpo 4
corpo 5	corpo 6

HTML

<table border="1" rules="rows">

Rows. le righe separano i vari tr

intestazione 1	intestazione 2
chiusura 1	chiusura 2
corpo 1	corpo 2
corpo 3	corpo 4
corpo 5	corpo 6

HTML

<table border="1" rules="cols">

Cols. le righe separano le colonne

intestazione 1	intestazione 2
chiusura 1	chiusura 2
corpo 1	corpo 2
corpo 3	corpo 4
corpo 5	corpo 6

HTML

<table border="1" rules="all">

All. le righe separano tanto i tr, quanto le colonne

intestazione 1	intestazione 2
chiusura 1	chiusura 2
corpo 1	corpo 2
corpo 3	corpo 4
corpo 5	corpo 6

5 replies since 15/12/2007, 12:18 2259 views