Appunti di HTML_6 Appunti di HTML_6

Incontro    1  -  2  -  3  -  4  -  5  -  6  -  7  -  8  -  9  -  10  -   11  - 12  


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 .... macchina infame! ... 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! per volare alto è necessario voler spiccare il primo volo !

Se nel leggere il codice di questa pagina troverai dei segni che nn conosci clika sull'immagine   ---  >>> Alè,      alè,    alè,     alè,     alèèèèè, ..... datte 'na mossa, clikka e troverari ciò che cerchi!







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 e tre colonne    
     

 

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!

logo 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
Tavola
Ho usato il <td rowspan="2"> per espanderlo a 2 righe
Tavola

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

Incontro    1  -  2  -  3  -  4  -  5  -  6  -  7  -  8  -  9  -  10  -   11  - 12  


<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ù