Come creare una tabella html - Abbonizio.com

abbonizio.com
Grafica Web e dintorni
Vai ai contenuti
COME CREARE UNA TABELLA "Table html"
Dedicato a tutti coloro che trattano per la prima volta il linguaggio HTML

Di seguito i codici per creare una tabella con relative spiegazioni.

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 style="border:1px solid #990099" width="300" height="80" border="1"
cellpadding="2" cellspacing="2">
  <tr>
    <td>cella 1</td>
    <td>cella 2</td>   </tr>
</table>

Il risultato è questo:


cella 1
cella 2


Attributi:
"width" determina la larghezza in pixel, se omesso la tabella si allargherà o restringerà a seconda del contenuto.
"height", determina l'altezza.
"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.
"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.
"bgcolor" seguito da un valore esadecimale per il colore, in questo modo: bgcolor="#xxxxxx", e la tabella si colorerà tutta con quel colore.
"bordercolorlight" seguito da un valore esadecimale per il colore, bordo chiaro.
"bordercolordark" per il bordo scuro.
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 style="border:1px solid #990099" cellpadding="1" cellspacing="2"
width="300" height="80">
  <tr>
    <td style="display:table-cell; vertical-align:top; background-color:#FFB6C1;"top">cella 1</td>
    <td style="display:table-cell; vertical-align:middle; background-color:#ffff00;"middle">cella 2</td>
    <td style="display:table-cell; vertical-align:bottom; background-color:#E0FFFF;"bottom">cella 3</td>
  </tr>
</table>


Questo è il risultato:

cella 1 cella 2 cella 3


Grafica web e dintorni
abbonizio.com
<º))))><.·´¯`·.   -♥-   Google PageRank        CSS Valido!         sito protetto         Licenza Creative Commons   -♥-   ¸.·´¯`·.¸><((((º>
www.Abbonizio.com è on-line dal 30.04.2013, grazie a tutti gli amici che sono passati a trovarci!
E' vietata la riproduzione totale o parziale senza espressa autorizzazione. Copyright © 2012- www.abbonizio.com
Torna ai contenuti