 |  | |
|
| | |
|
| |
ALTRI DOCUMENTI
|
|||
Manuale Tabelle
Le pagine seguenti illustrano, attraverso semplici lezioni,
come realizzare tabelle per le tue pagine Web.
zatrabeoj
I tre tag principali sono:
<TABLE>
E' il tag principale. Dice al browser "questa è una tabella", si può completare inserendo attributi quali la dimensione, l'ampiezza del bordo, ecc. 656g65g
<TR>
Definisce una riga orizzontale della tabella.
<TD>
Specifica una cella o una sezione di una riga.
In altre parole: Una tabella è costituita da righe le quali possono essere suddivise in celle.
|
|
|
|
|
|
|
<--Questa--- |
----è una---- |
-----riga---- |
---della-- |
----Tabella--> |
|
|
|
|
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:
<HTML>
<HEAD>
<TITLE>Joe è un ragazzo simpatico</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
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.
<HTML>
<HEAD>
<TITLE>Joe è un ragazzo simpatico</TITLE>
</HEAD>
<BODY>
<TABLE> </TABLE>
</BODY>
</HTML>
Ciascuna tabella necessita almeno di una riga.
<HTML>
<HEAD>
<TITLE>Joe è un ragazzo simpatico</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR> </TR>
</TABLE>
</BODY>
</HTML>
Naturalmente ciascuna riga deve contenere almeno un elemento della tabella.
<HTML>
<HEAD>
<TITLE>Joe è un ragazzo simpatico</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
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.
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
Ora è necessario inserire dei contenuti nella tabella. Inserisci Ed nella cella <TD>
<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
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
<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
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.
<TABLE
BORDER=1>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
Ed |
Se vogliamo inserire un bordo più grande?
<TABLE
BORDER=5>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
Ed |
E per un bordo "smisuratamente" grande?
<TABLE
BORDER=25>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
Ed |
Perchè non appaia nessun bordo?
<TABLE
BORDER=0>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
Ed |
Come puoi vedere il valore di default è nessun bordo.
Ora inserisci un piccolo bordo.
<TABLE
BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
Ed |
Se non si è specificata alcuna dimensione la tabella si autodetermina le proprie dimensioni.
<TABLE
BORDER=3>
<TR>
<TD>Ed, Rick e Tom</TD>
</TR>
</TABLE>
|
Ed, Rick e Tom |
Specificando le dimensioni di una tabella ecco cosa appare.
<TABLE
BORDER=3 WIDTH=100%>
<TR>
<TD>Ed, Rick e Tom</TD>
</TR>
</TABLE>
|
Ed, Rick e Tom |
E ora?
<TABLE
BORDER=3 WIDTH=75%>
<TR>
<TD>Ed, Rick e Tom</TD>
</TR>
</TABLE>
|
Ed, Rick e Tom |
Cancelliamo per ora gli amici di Ed.
<TABLE
BORDER=3 WIDTH=75%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
Ed |
Riduciamo le dimensioni della tabella al 50% per la visualizzazione nella finestra del browser.
<TABLE
BORDER=3 WIDTH=50%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
Ed |
Ora specifichiamo un'ampiezza di 50 invece di 50%.
<TABLE
BORDER=3 WIDTH=50>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
Ed |
Ora 100.
<TABLE
BORDER=3 WIDTH=100>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
Ed |
Come vedi ci sono due modi per specificare le dimensioni della tabella ed ognuno segue propri parametri.
Ora modifichiamo l'altezza.
<TABLE
BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
|
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.
<TABLE
BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Ed</TD>
</TR>
</TABLE>
|
Ed |
<TABLE
BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Ed</TD>
</TR>
</TABLE>
|
Ed |
<TABLE
BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Ed</TD>
</TR>
</TABLE>
|
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.
<TABLE
BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Ed</TD>
</TR>
</TABLE>
|
Ed |
<TABLE
BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Ed</TD>
</TR>
</TABLE>
|
Ed |
<TABLE
BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD>
</TR>
</TABLE>
|
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
<TABLE
BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG
SRC="ed.gif" WIDTH=32 HEIGHT=32></TD>
</TR>
</TABLE>
|
|
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.
|
Privacy |
Articolo informazione
Commentare questo articolo:Non sei registratoDevi essere registrato per commentare ISCRIVITI |
Copiare il codice nella pagina web del tuo sito. |
Copyright InfTub.com 2024
