|
Gentili Colleghe e
Colleghi,
mi è
sembrato di percepire che il ns ultimo incontro vi ha lasciato un po' disorientati.
Probabilmente sono stati sorvolati particolari importanti ... la fretta è
cattiva consigliera, il tempo a disposizione è scarso, la stanchezza di noi tutti
gioca il suo ruolo ....  ... e il PC non collabora !!!
Cmq l'uso
delle tabelle, a prima vista, può apparire difficoltoso ... diciamo che
per tabelle molto complesse, quali possono essere quelle delle home pages
dei portali + grandi (i webmasters professionisti impiegano programmi specifici
tipo FrontPage e Dreamweaver, preferisco il secondo, ... si studia la struttura
e poi si depurano i codici dai fronzoli ...) ma anche per noi estimatori
dell'HTML puro nn dovrebbero rappresentare difficoltà insormontabili,
visto l'uso amatoriale che intendiamo fare delle nostre conoscenze. Di seguito
troverai una serie di esempi, in ordine crescente di complessità,
che dovrebbero consentirti di orientarti meglio. Dimenticavo: usando in
maniera creativa combinazioni di + tabelle separate si ottengono risultati
simili a quelli dei migliori webmasters. Termino. Prima di fare i codici
è buona norma disegnare la tabella su un foglio (carta e penna!,
hai capito bene.) scrivere i TAGS e poi aprire il PC.
Buon lavoro!
Se nel leggere il codice di questa pagina troverai dei segni che nn conosci clika sull'immagine --- >>>
|
|
TABELLA
CLASSICA: una riga e una colonna:
si
applicano tutti gli attributi che troverai di seguito. Di solito si nidificano
altre tabelle. Può essere usata per contenere il logo del sito,
i banner pubblicitari ...
|
| Una
riga, due colonne |
variando
opportunamente percentuali o pixel si può costruire ad es. un menù
di navigazione a sx e i testi e foto a dx |
| Links, foto ... |
Una riga, tre colonne: testo al centro menù sx e dx |
Link, foto ... |
| Menù
>>>> |
link |
link |
link |
link |
link |
link |
link |
| Due
righe, tre colonne.
Ho usato il <td colspan="3"> per espandere il <td>,dove sto scrivendo, a tre colonne |
| |
|
|
| due
righe |
Ho
usato il <td rowspan="2"> per espanderlo a 2 righe |
|
| tre colonne |
|
Per complicarmi
la vita:
|
Ho usato il <td colspan="3"> per espanderlo a 3colonne
|
| Ho usato il <td colspan="2"> per espanderlo a 2 colonne |
|
| |
Ho
usato il <td rowspan=2; per espanderlo a 2 righe |
|
| |
|
| |
Ho usato il <td colspan=2 per espanderlo a 2 colonne
|
|
Ho usato il <td colspan="2"> per espanderlo a 3colonne
|
Esempio
di applicazione per masochisti:
vai nel codice e prova
a fare un portalino. Buon divertimento!
Ho usato il <td colspan="3"> per espanderlo a 3colonne
|
|
Ho usato il <td colspan="2"> per espanderlo a 2 colonne link link link link
|
|
|
|
Ho
usato il <td rowspan="2"> per espanderlo a 2 righe |
|
|
Immagine
|
Immagine
|
|
Testo
|
Ho usato il <td colspan="2"> per espanderlo a 2 colonneTestoTestoTestoTestoTesto
|
|
Ho usato il <td colspan="3"> per espanderlo a 3colonne
|
Spero che questa "aggiunta"
servirà a rendere l'argomento meno infame ..
. cmq verrà ripreso nel prox incontro.
|
Appunti di HTML_6
Appunti di HTML_6
|
|
<TABLE><TR><TD>|____|</TD></TR></TABLE>
Si usano per le tabelle: si iniziano con <TABLE> e si terminano con </TABLE> .
Le tabelle sono formate da righe e colonne.
Per ogni riga si usa <TR> e </TR> ,
e per ogni colonna <TD> e </TD> .
Vanno nidificate.
Esempio:
<TABLE WIDTH=60% BORDER=1>
<TR>
<TD WIDTH=20%>
face
</TD>
<TD WIDTH=40%>
per il tipo di carattere.
</TD>
</TR>
<TR>
<TD>
size
</TD>
<TD>
per la grandezza
</TD>
</TR>
<TR>
<TD>
color
</TD>
<TD>
per il colore
</TD>
</TR>
</TABLE>
Ecco il risultato:
|
face
|
per il tipo di carattere
|
|
size
|
per la grandezza.
|
|
color
|
per il colore.
|
ALIGN all'interno di <TABLE>: viene allineata tutta la tabella,
dentro <TD> viene allineato il testo nella parte della tabella corrispondente.
ALIGN con VALIGN: il testo viene allineato sia in altezza che in larghezza.
Si puo' aggiungere in <TABLE> e <TD>
anche HEIGHT, CELLPADDING, CELLSPACING, BGCOLOR e BACKGROUND.
Tra <TABLE> e </TABLE> puo' essere inserito <CAPTION> .
Per impedire che il testo venga visualizzato su più righe: NOWRAP.
VALIGN: TOP, MIDDLE, BOTTOM
allineano in altezza il testo dentro le tabelle:
VALIGN=TOP in alto
VALIGN=MIDDLE in mezzo
VALIGN=BOTTOM in basso
BORDER
dentro <TABLE> , o <IMG> , dà il bordo alla tabella o all'immagine.
La misura del bordo è data da un numero. Le tabelle senza bordi possono servire
per mettere scritte in posizioni particolari.
Per esempio questa pagina contiene una una tabella senza bordi per tenere in ordine i contenuti.
WIDTH HEIGHT
Possono essere messi dentro a vari tag e indicano le dimensioni della parte del
documento corrispondente: WIDTH la larghezza e HEIGHT l'altezza.
Le dimensioni possono essere espresse in pixel (punti nello schermo) o in percentuale della pagina.
Alcuni tag in cui si possono inserire le dimensioni sono:
<TABLE>
<TR>
<TD>
Esempio: <TABLE WIDTH="50"> indica che la tabella e' larga 50 pixel.
Se invece si scrive WIDTH="50%" la tabella viene larga il 50%, quindi larga metà pagina.
CELLPADDING CELLSPACING
Vanno messi dentro <TABLE>, e aggiungono spazio a quello occupato dal testo dentro la tabella.
La quantita' di spazio in piu' si indica con un numero.
CELLPADDING dà lo spazio dentro la tabella, e CELLSPACING vicino al bordo.
Da queste due tabelle si vede la differenza tra CELLPADDING e CELLSPACING.
Lo spazio di CELLPADDING è questo:
|
numero=5
|
weweeewewewewwew
|
|
numero=15
|
wewewew wew w wewew
|
quello di CELLSPACING è questo:
|
numero=5
|
weweweweweweww we we w we
|
|
numero=15
|
wewewe we wewewewe
|
<CAPTION>
Serve per mettere il titolo alle tabelle.
Si scrive dopo <TABLE>, e prima del primo tag <TD>.
Ecco il risultato:
titolo della tabella
|
<caption> </caption>
|
tra questi due tag inserisci il titolo
|
<COLSPAN>
Serve per espandere il numero delle colonne.
Si scrive dentro <TD>.
<ROWSPAN>
Serve per espandere il numero delle righe.
Si scrive dentro <TD>.
|
torna sù
| |