Tabelle html

Lelouchx

Posted on 4/12/2011, 21:19

+1

.

User deleted

Creare una tabella è estremamente semplice:

Creare la tabella:

Per prima cosa iniziate scrivendo:

CODICE

"table" Indica il punto da dove inizierà la vostra tabella e border="1" indicherà lo spessore che avrà la vostra tabella:

Aggiungete un

CODICE

<tr>

per aprire una riga:

CODICE

Poi aggiungete un

CODICE

<td>

oppure un:

CODICE

<th>

(L'unica differenza è che Th vi scriverà tutto in miuscolo quello che scriverete dentro quella colonna)

per ogni colonna che volete creare, scrivete sotto il testo e chiudete il tutto con:

CODICE

</td>

o, se avete aperto la colonna con th

CODICE

</th>

La " / " (slash) indica il punto dove finisce una determinata cosa, in questo caso la colonna.

Se ad esempio volessimo creare una tabella a tre colenne faremmo così:

CODICE

Però per finire una tabella bisogna chiudere alla fine con una / (slash) i passaggi aperti prima, nel nostro caso "table" all'inizio e "tr" subito sotto:

(Prima dovete chiudere gli elementi che appaiono dopo, nel nostro caso, tr era sotto a table, di conseguenza la chiudiamo per prima:

CODICE

</tr>
</table>

La nostra tabella risulterà essere così:

Bla Bla Bla 1

Bla Bla Bla 2

Bla Bla Bla 3

CODICE

Se ad esempio volessi una tabella con due righe, basterà aggiungere sotto la chiusura di tr:

CODICE

</tr>

Cioè subito sopra a:

CODICE

</table>

Un' altro "tr" e altri tre "td" chiudendo alla fine di ogni td con

CODICE

</td>

alla fine di tutti i td bisorrà chiudere la riga:

CODICE

</tr>

ed infine la tabella:

CODICE

</table>

Ecco la nostra tabella:

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

------------------------------------------

Personalizzare la tabella:
Potete personalizzare la vostra tabella aggiungendo degli attributi; ad esempio

CODICE

border="1" è un attributo che specifica una determinata cosa; ne esistono moltissimi e possono essere usati in diverse parti.

Alcuni tra i più utilizzati attributi sono:
Colspan

Aggiungendo l'attributo colspan ad un Td esso prenderà un numero determinato di colonne, in base al numero che mettete tra virgolette.
Se mettessimo:

CODICE

Quella casella occuperà due colonne.
Per farlo bisorrà levare un TD nella stessa riga, poichè questa casella varrà appunto come due TD.
Esempio:

Bla Bla Bla 1		Bla Bla Bla 2
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

Rowspan
Con analogo procedimento questa funzione permette ad una casella di prendere due righe.
Per farlo nella riga sotto dovrete scrivere solo 2 TD poichè uno sarà occupato dalla casella sopra che arriva sotto.

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 2
Bla Bla Bla 1	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

Width/Height
Sono rispettivamente la larghezza e l'altezza e vi serviranno per modificare le misure della vostra tabella in pixel, saranno da mettere in table.
Height/Altezza.

CODICE

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

Width /Larghezza.

CODICE

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

----------
Align
Con align la tabella si sposterà nella parte dello schermo che volete.
per farlo dopo, table border="1" mettete align="right/center/left" scegliendo in questo modo se mettere la tabella a destra, al centro, a sinistra.

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

---

Bgcolor
Con il comando bgcolor modificherete il colore della vostra tabella, basterà scrivere:

CODICE

Questo processo è possibile applicarlo anche nelle colonne TD e TH

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

Oppure potrete scrivere il colore in un altro modo:

CODICE

Questo: FF0000 indica quali colori ci sono di RedGreenBlu scritto in numerei esadecimali
I numeri esadecimali utilizzabili sono:
0
1
2
3
4
5
6
7
8
9
A (Che equivale a 10)
B (Che equivale a 11)
C (Che equivale a 12)
D (Che equivale a 13)
E (Che equivale a 14)
F (Che equivale a 15)

RossoVerdeBlu
Di conseguenza, scrivendo #FF0000 Le prime due FF staranno ad indicare un rosso forte.
Lo 00 Indicheranno che non c'è il verde.
Lo 00 Indicherannno che non c'è il blu.
Di conseguenza il vostro colore sarà un rosso forte.

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

---
Bordercolor
Utilizzando border color, si segue lo stesso procedimento di bgcolor, ma questo vi modificherà Solamente il bordo della vostra tabella.

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

---
Cellpadding
Con il comando Cellpadding potrete modificare la distanza delle parole dal bordo della tabella in pixel (px), sarà da mettere in table:

CODICE

In questo caso la distanza sarà di 10 px.

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

---
Cellspacing
Cellspacing è la distanza in pixel tra una cella e l'altra della tabella.

CODICE

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

---
Style
Con Style modificherete lo stile della tabella, sarà da mettere in table.
Esempio:

CODICE

Dopo style, si sceglie il bordo che volete abbia il vostro stile, prendiamo come esempio 20 e poi scrivete il nome dello stile che volete mettere (il tutto tra virgolette " .... "

Ecco alcuni stili che potrete dare alla vostra tabella:
none
solid
hidden
inset
outset
dotted
ridge
dashed
groove
double

Bla Bla Bla 1	Bla Bla Bla 2	Bla Bla Bla 3
Bla Bla Bla 4	Bla Bla Bla 5	Bla Bla Bla 6

CODICE

---

IN AGGIORNAMENTO

Edited by Lelouchx - 6/12/2011, 09:05

.

Pikachu 96

Posted on 5/12/2011, 15:12

+1

.

User deleted

Aggiungete un

CODICE

<td>

per aprire una riga:

In verità è <tr>, errore di battitura sicuramente :sisi:

Corretto sisi Per il resto, bella guida :sisi:

.

Lelouchx

Posted on 5/12/2011, 15:17

.

User deleted

Sì, ti ringrazio per la correzione

.

Pokemonflame Staff

Posted on 5/12/2011, 19:08

+1

.

User deleted

ok, però potresti arricchirle un pò. Ad esempio mancano tutti gli attributi...ce ne sono moltissimi e sono nel 99,9% dei casi fondamentali

.

Lelouchx

Posted on 5/12/2011, 19:10

.

User deleted

Sì, potrei aggiungerne qualcuno, questo topic voleva semplicemente mostrare come creare una tabella, ma se volete posso metterli v_v

.

Pikachu 96

Posted on 5/12/2011, 19:55

.

User deleted

Colspan, rowspan sono abbastanza importanti per esempio sisi

.

BOH

Posted on 5/12/2011, 20:05

+2

.

User deleted

border, width, height, align, valign, bgcolor, background, bordercolor, cellspacing, cellpadding e style, oltre a quelli citati da pika, sono tutti abbastanza indispensabili se si usano le tabelle

.

~Megan Fox

Posted on 5/12/2011, 20:16

.

Group: Polizia Intergalattica

Posts: 22,971

Location: e se poi te ne penti

Status: Anonymous

ti prego basta tabelle html la mia prof di ECDL web starter diceva che tutto internet e l'html era basato su tabelle e all'esame non c'era neanche una domanda su quello D:

.

BOH

Posted on 5/12/2011, 21:13

.

User deleted

in realtà il grosso di internet (dal punto di vista grafico penso intendesse) è basato sulle divisioni, che sono più leggere delle tabelle...anche se a me piacciono di più le tabelle perchè so esattamente che forma avranno

.

Lelouchx

Posted on 5/12/2011, 21:20

.

User deleted

CITAZIONE (BOH @ 5/12/2011, 20:05)

border, width, height, align, valign, bgcolor, background, bordercolor, cellspacing, cellpadding e style, oltre a quelli citati da pika, sono tutti abbastanza indispensabili se si usano le tabelle

Se aggiungessi alcuni di quegli attributi citati da te sopra diventerebbe una guida Html in generale e non più solo tabelle v_v

.

BOH

Posted on 5/12/2011, 22:53

.

User deleted

no, quelli sono attributi tutti legati alle tabelle. se poi possono essere usati anche per altri tag non vuol dire nulla. la tua guida senza gli attributi è utile solo nello 0,1% dei casi, perchè come ho detto prima, nel 99,9% dei casi servono gli attributi per usare le tabelle.

.

Lelouchx

Posted on 6/12/2011, 09:06

.

User deleted

Aggiornata con nuovi attributi!

.

Pokemonflame Staff

Posted on 6/12/2011, 12:26

.

User deleted

molto bene

.