Lavorare con le tabelle

Transcript

Creazione di tabelle.
Argomenti trattati:
- Premessa:
Cosa sono le tabelle in HTML.
- Costruiamo una tabella:
Come realizzare semplici tabelle con i tag principali ed i loro attributi.
- Personalizziamo una tabella:
Come personalizzare le tabelle con determinati attributi.
Premessa
Definire una tabella in ambito HTML ha un approccio diverso rispetto la sua definizione
generica.
La tabella HTML rappresenta uno spazio suddiviso in righe e colonne dove in ognuno dei
singoli spazi isolatamente assume tutte le caratteristiche tipiche di una pagina web, nel
senso che tutto ciò che viene inserito e formattato in una singola cella della tabella vale
solo per il suo spazio e non per il resto della tabella e della pagina in generale.
L'utilizzo delle tabelle in HTML avviene in maniera quasi esclusiva per ordinare i contenuti
in quanto la possibilità di poter dividere in sezioni un sito rappresenta un ottimo metodo di
layout.
Costruiamo una tabella
Per inserire una tabella in una pagina HTML si utilizza il tag <TABLE> all'interno del corpo
del programma ed i suoi attributi ne permettono la forma. Il tag necessita di chiusura per
poter così essere strutturata nella pagina.
<TABLE>
</TABLE>
In questo esempio di codice la tabella necessita della definizione delle righe e delle
colonne, oltre ai già citati attributi.
A proposito di queste ultime, una tabella non permette l'implementazione diretta delle
colonne: in pratica si possono definire solo righe ed elementi.
I tag che ci permetteranno di visualizzare una tabella sono: <TR>, per la definizione di
ogni singola riga, e <TD> per definire ogni singolo elemento della riga, ed
automaticamente della colonna.
Il linguaggio HTML - prof. Maurizio Gambino | 07 Creazione di tabelle.
Un esempio:
<TABLE>
<TR>
<TD>prova</TD>
<TD>prova</TD>
<TD>prova</TD>
</TR>
</TABLE>
Il precedente codice genera la tabella di una riga e tre elementi qui descritta in seguito:
prova
prova
prova
Anche le tabelle, come del resto la quasi totalità dei tag HTML, hanno degli attributi che ne
definiscono le proprietà; i primi che analizzeremo sono: WIDTH, per definire la larghezza,
riferita sia alla tabella che ad ogni elemento della stessa; HEIGHT per l'altezza, riferita per
tabella, riga ed elemento e BORDER per definire l'ampiezza dei bordi di una tabella.
I valori che possono assumere i primi due attributi possono essere espressi in pixel o in
percentuale. Per esempio, se la risoluzione video è 1024 pixel di larghezza e 768 di
altezza (la nota 1024x768), ed impostiamo un valore della larghezza (WIDTH) pari al 50%
l'utente vedrà una tabella larga 512 pixel.
Se si dichiara una certa larghezza per la tabella e si vuole ripartire tale misura tra gli
elementi che ne compongono le righe, è errato usare:
<TABLE BORDER=1 WIDTH=200>
<TR>
<TD WIDTH=100>prova</TD>
</TR>
</TABLE>
in quanto la tabella ignorerà l'attributo della tabella (<TABLE WIDTH=200>), ed utilizzerà
la larghezza dichiarata per le singole colonne (3x100=300), in quanto si dà precedenza
agli attributi degli elementi.
L'attributo BORDER , definito dai valori 0 e 1 definisce se i bordi di una tabella devono
essere visualizzati o meno.
La mancanza di questo attributo definisce il valore 1, di default, al bordo della tabella.
E' sempre consigliato mantenere un adeguato controllo della grandezza delle tabelle
adottando la misurazione che si ritiene più opportuna, anche se i valori in pixel
garantiscono una perfetta visibilità del layout da noi programmato in qualsiasi condizione
di risoluzione e solitamente non generano problemi di scrolling nella visualizzazione.
Altri importanti attributi appartenenti al tag <TABLE> possono essere riassunti nella
sottostante tabella:
Attributi
align
Tag
Descrizione
TABLE
TR
TD
Allineamento della tabella
a sinistra;
al centro;
a destra;
bgcolor
=#000000
="color"
TABLE
TR
TD
Sfondo colorato
Colore espresso in notazione RGB;
Colore espresso in lingua inglese;
background
=filename
TABLE
TD
Sfondo con immagine
Percorso e nome del file di sfondo;
TABLE
TR
TD
Allineamento verticale del contenuto
in alto;
al centro;
in basso;
TABLE
Proprietà dei bordi della tabella
elimina tutti i bordi esterni;
mostra il bordo solo in alto;
mostra il bordo solo in basso;
mostra il bordo solo sul lato sinistro;
mostra il bordo solo sul lato destro;
mostra il bordo solo sui lati
orizzontali;
mostra il bordo solo sui lati verticali;
mostra il bordo esterno;
=left
=center
=right
valign
=top
=middle
=bottom
frame
=void
=above
=below,
=lhs
=rhs
=hsides
=vsides
=box
Tutti i valori degli attributi sopra riportati sono stati verificati con i browser più utilizzati
(Internet Explorer, Firefox Mozilla e Google Chrome).
In alcuni casi solo due dei tre è riuscito al visualizzare correttamente le proprietà degli
attributi. Si consiglia a questo punto, malgrado la larga diffusione, di utilizzare Chrome, il
quale ha ben supportato quasi tutti i valori provati.
Visualizziamo adesso alcuni esempi di semplici tabelle:
Codice
<TABLE BORDER=1 WIDTH=300>
<TR ALIGN="center">
<TD WIDTH=100>prova1</TD>
</TR>
<TR>
Visualizzazione
prova1
prova4
prova2
prova5
prova3
prova6
</TR>
</TABLE>
<TABLE HEIGHT=500 BORDER=1>
<TR align="center">
<TD width=100 valign=top><b>prova1 </TD>
<TD WIDTH=100 valign=bottom>prova2 </TD>
<TD WIDTH=100 valign=middle>prova3 </TD>
</TR>
</TABLE>
prova1
<TABLE HEIGHT=200 BORDER=1>
<TR>
<TD width=100 bgcolor="red">Prova </TD>
prova
<TD WIDTH=100 bgcolor="blue">Prova </TD>
<TD WIDTH=100 bgcolor="gray">Prova </TD>
</TR>
</TABLE>
prova3
prova2
prova
prova
<TABLE FRAME="box" WIDTH=200>
<TR>
<TD>prova</TD>
<TD>prova</TD>
<TD>prova</TD>
</TR>
<TR>
<TD>prova</TD>
<TD>prova</TD>
<TD>prova</TD>
</TR>
</TABLE>
Non vi sono visualizzati esempi con immagine di sfondo per motivi di spazio. Comunque si
lascia ad ognuno di voi la personalizzazione, con una propria immagine nei formati
consigliati .jpeg o .png, di una propria tabella realizzata.
Personalizziamo una tabella
Gli attributi e gli esempi sopra riportati si riferiscono alla visualizzazione grafica di una
tabella; ma se vogliamo alterarne la struttura, per esigenze di layout, vi sono altri attributi,
applicabili solo al tag <TD>, che consentono l'unione di due o più righe e/o colonne.
ROWSPAN consente l'unione di due o più elementi verticali, contigui a destra
dell'elemento, in modo da formare un unica riga per gli elementi coinvolti mentre
COLSPAN, similmente, unisce due o più elementi orizzontali, contigui in basso, per
formare un unica colonna. Vediamo come operano con alcuni esempi pratici:
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD>Elemento1</TD>
<TD colspan="2">elemento2</TD>
</TR>
<TR>
<TD>Elemento3</TD>
<TD rowspan="2">Elemento4</TD>
<TD>Elemento5</TD>
</TR>
<TR>
<TD>Elemento6</TD>
<TD>Elemento7</TD>
</TR>
</TABLE>
Elemento1
Elemento3
Elemento6
elemento2
Elemento5
Elemento4
Elemento7
<table border="1" width="50%" align="center">
<tr>
<td width="25%"><center>1</td>
</tr><tr>
<td width="50%" colspan="2" rowspan="2"><center>6</td>
</tr><tr>
</tr><tr>
</tr></table>
1
2
5
11
4
7
6
8
10
3
9
12
13
L'esempio sopra riportato vi permette di capire bene come sfruttare le potenzialità nell'uso
delle tabelle nella formattazione degli elementi di una pagina web.
Per cui, concludendo il discorso sulle finalità principali dell'utilizzo delle tabelle ed avendo
bene esaminato gli ultimi due esempi sopra riportati, ribadisco come sia semplice
immaginare una formattazione personalizzata dei contenuti delle nostre pagine web.

Lavorare con le tabelle

Transcript

Documenti analoghi

Come inserire una scrollbar in Web Designer 6 Create un rettangolo

Tavolo da pranzo, struttura allungabile in metallo

4-CHIOGGIA_Dry_Pits

NOTE OPERATIVE PER L`UTILIZZO DEL PROGRAMMA “IrfanView”

Periodic_Table.jpg (Immagine JPEG, 2864x2370 pixel)

Scheda specifiche tecniche per COLLETTO (spalla) rettangolare

N 1 ITA BIG BAG 90 x 90 x 120 omologato ONU 13H3

COMPETENZE OPERATIVE sviluppate

Guida web: HTML per principianti Introduzione