Appunti sulle tabelle in HTML

Materie:	Appunti
Categoria:	Informatica
Voto:	1 (2)
Download:	98
Data:	31.01.2001
Numero di pagine:	3
Formato di file:	.doc (Microsoft Word)

Manuale Tabelle
Le pagine seguenti illustrano, attraverso semplici lezioni, come realizzare tabelle per le tue pagine Web.
zatrabeoj
I tre tag principali sono:

E' il tag principale. Dice al browser "questa è una tabella", si può completare inserendo attributi quali la dimensione, l'ampiezza del bordo, ecc.

Definisce una riga orizzontale della tabella.

Specifica una cella o una sezione di una riga.
In altre parole: Una tabella è costituita da righe le quali possono essere suddivise in celle.








cella


cella


cella
Bene, ora sei pronto per realizzare tu stesso delle tabelle!
Apri il programma Notepad (si proprio Notepad!) e segui le mie indicazioni. Copia e incolla la pagina seguente:
Joe è un ragazzo simpatico

Salva il file come table1.html in una cartella qualsiasi (chi utilizza Win3.x la salvi come table1.htm). Apri con il tuo browser [plug Netscape], l'immagine che hai appena salvato: table1.html. Tieni aperti entrambi i programmi: Notepad e Netscape in modo da poter apportare le modifiche e nello stesso tempo controllarne il risultato.
Digita queste semplici tag per creare la tabella.
Joe è un ragazzo simpatico

Ciascuna tabella necessita almeno di una riga.
Joe è un ragazzo simpatico

Naturalmente ciascuna riga deve contenere almeno un elemento della tabella.
Joe è un ragazzo simpatico

Per chiarire meglio il concetto, qui di seguto verrà riportata la descrizione di ciascun tag della tabella. Tralascerò la descrizione dei tag head, body, title, etc.

Ora è necessario inserire dei contenuti nella tabella. Inserisci Ed nella cella .
Ed

Bene hai realizzato la tua prima tabella! Visualizzala con il browser! Se hai inserito tutto correttamente, la tabella dovrebbe apparire come questa:
Manuale Tabelle- Lezione 2
Ed

Lavoriamo con:
Ed
Per prima cosa inseriamolo all'interno di una tabella con bordo. Ciascun cambiamento che attui puoi visualizzarlo cliccando sul bottone Reload del tuo browser. Se il tuo browser non ha il bottone reload, utilizzane un altro.
Ed

Ed
Se vogliamo inserire un bordo più grande?
Ed

Ed
E per un bordo "smisuratamente" grande?
Ed

Ed
Perchè non appaia nessun bordo?
Ed

Ed
Come puoi vedere il valore di default è nessun bordo.
Ora inserisci un piccolo bordo.
Ed

Ed
Se non si è specificata alcuna dimensione la tabella si autodetermina le proprie dimensioni.
Ed, Rick e Tom

Ed, Rick e Tom
Specificando le dimensioni di una tabella ecco cosa appare.
Ed, Rick e Tom

Ed, Rick e Tom
E ora?
Ed, Rick e Tom

Ed, Rick e Tom
Cancelliamo per ora gli amici di Ed.
Ed

Ed
Riduciamo le dimensioni della tabella al 50% per la visualizzazione nella finestra del browser.
Ed

Ed
Ora specifichiamo un'ampiezza di 50 invece di 50%.
Ed

Ed
Ora 100.
Ed

Ed
Come vedi ci sono due modi per specificare le dimensioni della tabella ed ognuno segue propri parametri.
Ora modifichiamo l'altezza.
Ed

Ed
Cito le parole di Steven Wright ...
"The other day, I was walking my dog around my building...on the ledge. Some people are afraid of heights. Not me, I'm afraid of widths."
Ora vediamo come viene visualizzato.
Ed

Ed
Ed

Ed
Ed

Ed
Il valore di default è ALIGN=LEFT. Come probabilmente sai il valore di default è quello che il browser visualizza in caso non sia indicato alcun dato specifico.
Vediamo come appaiono i dati verticalmente in una cella.
Ed

Ed
Ed

Ed
Ed

Ed
Il valore di default è a metà.
Si possono anche inserire immagini all'interno di una cella. Nella cartella contenete il documento troverai anche una piccola immagine chiamata ed.gif. Copiala nella cartella dove stai lavorando (dove hai inserito tables1.html). Sostituisci un tag IMG con Ed.

Questo è un classico esempio che dimostra l'utilità di inserire gli attributi di dimensione. Senza scendere nei particolari è bene applicare gli attributi per evitare brutte sorprese e per avere una migliore visualizzazione da parte del browser.