LINGUAROSSA.com

Cerca
Per contatti via e-mail Qui..Grazie

Vai ai contenuti

Menu principale:


Creare una table

TUTORIAL > HTML

Vota questo sito nelle Top 1000
Clikka qui!


Inserisci il nostro Sito tra i preferiti!
Clikka qui!




Share/Save/Bookmark



La vita è fatta di molti sentieri,
se non li percorri non saprai mai
dove ti porteranno ^^

Siti Amici:

Alal.it
Linguarossa.com
Alal.ilbello.com
Antonio.superweb.tv
Alal.interfree.it



Iscriviti gratis nella GOLD TOP 100 ALAL



contatore
Benvenuti su Linguarossa.com

Creare una Tabella

Le tabelle HTML consentono di disporre il testo, le immagini e altri contenuti in una struttura a righe e colonne, visibile o invisibile.
Una tabella inizierà sempre con questo elemento: <table> e finirà con </table>
La tabella può essere sia visibile che invisibile, fissa oppure adattarsi ad una pagina ed essere formattata in varie maniere; si tratta di un elemento molto flessibile.

La sintassi per creare una tabella di 1x1 celle è questa:

<table width="300" height="60" border="1"
cellpadding="2" cellspacing="2">
  <tr>
    <td>cella 1</td>
    <td>cella 2</td>   </tr>
</table>

Il risultato è questo:


cella 1 cella 2

L'attributo "width" determina la larghezza in pixel, se omesso la tabella si allargherà o restringerà a seconda del contenuto.
Invece "height", determina l'altezza. L'attributo "border" specifica la larghezza del bordo, se come valore si da zero allora la
tabella risulterà completamente trasparente però manterrà la forma e il contenuto, più si aumenta questo valore e più si otterrà
un bordo ampio. Gli attributi "cellpadding" e "cellspacing" specificano rispettivamente lo spazio che c'è fra l'interno della cella
e il proprio contenuto e lo spazio che c'è fra una cella e l'altra.
Per speficificare un colore di sfondo globale per la tabella basta aggiungere la proprietà "bgcolor" seguito da un valore esadecimale
per il colore, in questo modo: bgcolor="#0000ff", e la tabella si colorerà tutta con quel colore.
Per specificare il colore del bordo chiaro bisogna aggiungere la proprietà "bordercolorlight" seguito da un valore esadecimale
per il colore, la stessa cosa vale per il bordo scuro con la proprietà "bordercolordark"
Vediamo un esempio di codice per tutto ciò:

<table width="300" height="60" border="1" cellpadding="2" cellspacing="2" bordercolordark="#cc0000" bordercolorlight="#ffff00" bgcolor="#ccffff">
  <tr>
    <td>cella 1</td>
    <td>cella 2</td>   </tr>
</table>

Il risultato è questo:


cella 1 cella 2

Esempi tipo bordo: style="border: 1px solid #ff3300"

solid
dotted
inset
dashed
 
double
groove
outset
ridge

E' possibile inoltre specificare un'immagine di sfondo, in questo modo: background="sfondo.jpg"
Esempio pratico:

<table width="300" height="60" border="1" cellpadding="2" cellspacing="2" bordercolordark="#cc0000" bordercolorlight="#ffff00" bgcolor="#ccffff" background="sfondo.jpg">
  <tr>
    <td>cella 1</td>
    <td>cella 2</td>   </tr>
</table>


Questo è il risultato:


cella 1 cella 2

Il Tag "<tr>...</tr>" specifica l'inizio e la fine di una riga, ogni volta che avremo bisogno di una nuova riga bisognerà aggiungere
questi due Tag fra "<table>...</table>".

Il Tag "<td>...</td> specifica una colonna ed è fra questi due che vengono inseriti i contenuti: testo, immagini, o altre tabelle.

Il contenuto del Tag "<td>" può anche essere allineato verticalmente, utilizzando la proprietà "valign" assegnando i valori "top" (sopra), "middle" (centro) e "bottom" (sotto).


<table border="1" cellpadding="1" cellspacing="2"
width="300" height="80">
  <tr>
    <td valign="top">cella 1</td>
    <td valign="middle">cella 2</td>
    <td valign="bottom">cella 3</td>
  </tr>
</table>

Questo è il risultato:

cella 1 cella 2 cella 3


Speriamo vi siano utili ^_^ Ciao... Linguarossa ♥

VISITA anche le altre pagine di Linguarossa.com
Grazie e buona navigazione

Vuoi votare questo sito?
Basta in clik



Portale internet libero ed indipendente creato grazie alla passione grafica di Alessio,Luca,Antonio e Lucia, che si sono sempre impegnati nella realizzazione di lavori e richieste grafiche. Quì, trovate materiale grafico per abbellire le vostre pagine web/blog e anche risorse pronte da utilizzare per le vostre creazioni grafiche! Ci auguriamo sia per te un luogo piacevole ed ospitale dove passare un pò di tempo. Ogni frammento di esso rappresenta un'esperienza, un attimo di vita, un sorriso, una lacrima...
Buona navigazione...


Sito on-line dal 20.11.2008, grazie a tutti gli amici che sono passati a trovarci.


preleva il nostro banner
Linguarossa.com^^



Creative Commons License
Questo/a opera è
pubblicato sotto una
Licenza Creative Commons

Se ti va,Lascia un segno del tuo passaggio sul nostro libro degli ospiti:   Guestbook di Linguarossa.com    oppure via e-mail Qui..Grazie
Grazie della visita... Torna quando vuoi^^ e ricordati di lasciare un salutino, ricambieremo. Ciao alla prossima ♥




Sito ottimizzato per una risoluzione I.E. 1280x1024px

Home Page | IL SITO | TUTORIAL | GADGET WEB | RISORSE WEB | GRAFICA | APPLICATIVI | ANIMAZIONE | TUBES PSP | CARTOLINE VIRTUALI | FRASI ED AFORISMI | UTILITA' | Mappa del sito

Copyright © 2008- www.Linguarossa.com
Sito privo di dialer Certificato     CSS Valido!
Google PageRank Checker Tool
Sito Amico di ALAL.it

Torna ai contenuti | Torna al menu