[HTML] Creazione di una tabella

[HTML] Creazione di una tabella

  luglio 06, 2014    portaletecnologico

---

Per creare una tabella che contiene le celle che struttureranno le griglie, abbiamo bisogno del tag <table>. Sia le tabelle che le celle sono delimitate da un bordo che indicheremo con l'attributo border. Per indicare l'apertura di una riga usiamo il tag <tr>. La presenza di una cella all'interno di una riga sarà data dal tag <td>.

Creiamo quindi la nostra prima tabella:

<table border="2">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>

La visualizzazione sarà questa:

cella 1	cella 2
cella 3	cella 4

E' possibile modificare sia lo spessore del bordo che le dimensioni della tabella. Per modificare lo spessore del bordo sostituire in table border la dimensione -in pixel- preferita (in rosso la parte da sostituire):

<table border="6">

cella 1	cella 2
cella 3	cella 4

Per modificare le dimensioni dell'intera tabella (che possono essere espresse sia in percentuale -ma non è visualizzata allo stesso modo per tutti i browser- che in pixel), usiamo gli attributi witdh e height (larghezza e altezza) nel tag <table>:

<table width="200" height="100" border="2">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>

cella 1	cella 2
cella 3	cella 4

Per modificare la dimensione delle celle, agiamo sul tag <td>

<table width="300" height="200" border="2">
<tr>
<td width="80">cella 1</td>
<td width="120">cella 2</td>
</tr>
<tr>
<td width="80">cella 3</td>
<td width="120">cella 4</td>
</tr>
</table>

cella 1	cella 2
cella 3	cella 4