Linguaggio HTML

Html - Inserire tabelle TABLE

User Rating:  / 0
PoorBest 

 


 

A cura di: www.tutorialpc.it 

Nota: E' permessa la pubblicazione di questa guida su altri siti lasciando intatto il contenuto, questa nota e il link al nostro sito.

 

Le tabelle sono molte utilizzate all'interno dei siti web perché permettono di dare una struttura e un ordine al contenuto anche a pagine molto complesse.

Le tabelle vengono aperte e chiuse con l'attributo <TABLE> </TABLE>. Le dimensioni vengono definite con WIDTH(larghezza) e HEIGHT (altezza) e possono essere espresse in pixel o in percentuale della pagina:

<TABLE WIDTH=200>
</TABLE>


In questo caso la larghezza della tabella viene espressa in pixel, quindi se si sceglie questa opzione, a qualsiasi risoluzione venga vista la pagina, la misura della tabella rimarrà' invariata, cioè di 200 pixel.

  

Mentre se si sceglie una grandezza in percentuale della pagina la tabella sarà diversa a seconda della risoluzione video utilizzata esempio:

 

<TABLE WIDTH=50%>
</TABLE>

 


<TR><TD>

L'attributo <TABLE> genera la tabella mentre con <TR>e<TD>si definiscono i campi presenti all'interno di tale tabella.

Vediamo un esempio:

<table border="1"  width="400">

<tr>

<td>TutorialPc</td>

<td>La guida</td>

</tr>

<tr>

<td>All'informatica</td>

<td>Qui impari</td>

</tr>

</table>

 

Ecco il risultato che si ottiene

  

TutorialPc La guida
All'informatica Qui impari

 

 

Riepilogando il Tag <TR> costruisce una riga e il tag <TD> una colonna e così via.

 

Lo spazio tra i vari campi di una tabella e' definito all'interno del comando <TABLE> con CELLSPACING=X e CELLPADDING=X (dove X e' la distanza in pixel):

<TABLE CELLPADDING=10 CELLSPACING=10>
</TABLE>


La posizione del testo all'interno di una tabella o di una immagine può essere modificata all'interno dei vari campi esempio:

<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 VALIGN=TOP>
TutorialPc </TD>

<TD WIDTH=100 VALIGN=BOTTOM>
La Guida </TD>

<TD WIDTH=100 VALIGN=MIDDLE>
All'informatica </TD>

</TABLE>

<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 ALIGN=RIGHT>
TutorialPc <TD>

<TD WIDTH=100 ALIGN=CENTER>
La Guida </TD>

<TD WIDTH=100 ALIGN=LEFT>
All'informatica </TD>

</TABLE>


 


Ogni campo può avere un colore di sfondo cioè background diverso dagli altri o ancora uno sfondo con un'immagine.

 

TABLE WIDTH=300 HEIGHT=200>

<TD width=100 BGCOLOR="green">
TutorialPc </TD>

<TD WIDTH=100 BGCOLOR="yellow">
La guida </TD>

<TD WIDTH=100 BGCOLOR="red">
All'informatica </TD>

</TABLE>



Stesso discorso dei colori vale anche per aggiungere un'immagine allo sfondo ecco un esempio:

 

<TABLE WIDTH=400 HEIGHT=200>

<TD width=100 BACKGROUND="nomesfondo.jpg">
Testo </TD>

</TABLE>


 

<BACKGROUND>

Ogni campo può avere un colore di sfondo cioè background diverso dagli altri o ancora uno sfondo con un'immagine.

 

TABLE WIDTH=300 HEIGHT=200>

<TD width=100 BGCOLOR="green">
TutorialPc </TD>

<TD WIDTH=100 BGCOLOR="yellow">
La guida </TD>

<TD WIDTH=100 BGCOLOR="red">
All'informatica </TD>

</TABLE>



Stesso discorso dei colori vale anche per aggiungere un'immagine allo sfondo ecco un esempio:

 

<TABLE WIDTH=400 HEIGHT=200>

<TD width=100 BACKGROUND="nomesfondo.jpg">
Testo </TD>

</TABLE>

 {loadposition adsense}

Statistiche

Articles View Hits
1195745

Area riservata

Chi è online

We have 10 guests and no members online