Discuti il tutorial sul forum !

Le tabelle in html

Obiettivo
In questo articolo tratteremo come gestire le tabelle con html.

Articolo
Le tabelle in html servono per presentare i dati in modo ordinato tramite diciamo una griglia. Alcuni usano le
tabelle per creare dei layout per i propri siti.
Il tag che server per creare una tabella ,e’ il tag <TABLE>

Primo esempio

<TABLE>

<TR>
<TD>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>

<TR>
<TD>colonna 4</TD>
<TD>colonna 5</TD>
<TD>colonna 6</TD>
</TR>

</TABLE>

In questo piccolo esempio abbiamo creato una tabella con due righe e 3 colonne. Per creare una nuova riga, dobbiamo utilizzare
il tag <TR> mentre per creare una colonna dobbiamo usare il tag <TD>.

E’ possibile personalizzare la tabella impostando la larghezza dei bordi , la larghezza e l’altezza oppure la distanza tra le celle.Gli attributi da usare sono:

BORDER specifica la larghezza in pixel dei bordi
CELLSPACING specifica la larghezza in pixel dello spazio tra le celle
CELLPADDING specifica la larghezza in pixel dello spazio interno alle celle
WIDTH specifica la larghezza in pixel o in percentuale della tabella
HEIGHT specifica l’altezza in pixel o in percentuale della tabella

<TABLE BORDER=”1″ CELLSPACING=”2″ CELLPADDING=”5″ WIDTH=”100%” HEIGHT=”25%”>
<TR>
<TD>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>
</TABLE>

Posizionamento

Per posizionare il testo contenuto nelle celle della tabella, possiamo utilizzare un posizionamento orizzontale e uno verticale.

Nel primo caso utilizziamo l’attributo ALIGN che puo’ essere LEFT, RIGHT o CENTER.

Nel secondo caso utilizziamo l’attributo VALIGN che puo’ essere LEFT, RIGHT o CENTER.

<TABLE BORDER=”1″ CELLSPACING=”2″ CELLPADDING=”5″ WIDTH=”100%” HEIGHT=”25%”>
<TR>
<TD VALIGN=”LEFT”>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>
</TABLE>

Colori e sfondi
Possiamo modificare il colore di sfondo di una cella tramite l’attributo BGCOLOR.
Se vogliamo modificare il colore di una singola cella, mettiamo questo attributo nella cella corrispondente

<TABLE BORDER=”1″ CELLSPACING=”2″ CELLPADDING=”5″ WIDTH=”100%” HEIGHT=”25%”>
<TR>
<TD BGCOLOR=”#cecece”>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>
</TABLE>

Se vogliamo modificare il colore di una intera riga, mettiamo questo attributo nella riga corrispondente

<TABLE BORDER=”1″ CELLSPACING=”2″ CELLPADDING=”5″ WIDTH=”100%” HEIGHT=”25%”>
<TR BGCOLOR=”#cecece”>
<TD>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>
</TABLE>

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati


April 30, 2006 | Scritto in html, tutorials  Letto:973 volte

Correlati


Commenti

Scrivi un commento





Commenti recenti:


Ultimi dal forum

Selezionando contrassegno si aggiungono spese al totale
Ho inserito postepay come pagamento
Inserire metakeywords
Problemi di installazione
Scaricare correttore ortografico italiano
Vari problemi
Installazione su server remoto
Installazione
Problema aggiornamento quantità prodotti carrello
Info
Bug utente + suggerimento formattazione
Problema cancellazione dalla mailing list
Problemi login
Problemi di visualizzazione nella home page
Fireworks appiattisce livelli quando salvo in png