<h1>Le Tabelle</h1>
<p>Oggi 14 Dicembre Parliamo di Tabelle</p>
<h2>Iniziamo con le tabelle senza bordo</h2>
<p>All'inizio può sembrare complicato, ma in realtà tutto è facile e logico, proprio come ogni altra cosa in HTML.</p>
<br/>
<br/>
<h2>Esempio di tabella senza bordo:</h2>
<table>
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
<br/>
<br/>
<h2>Esempio di tabella con 3 righe e 4 colonne:</h2>
<table>
<tr> <td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td> </tr>
<tr> <td>Cella 5</td>
<td>Cella 6</td>
<td>Cella 7</td>
<td>Cella 8</td> </tr>
<tr> <td>Cella 9</td>
<td>Cella 10</td>
<td>Cella 11</td>
<td>Cella 12</td> </tr>
</table>
<p>Sempre senza bordo</p>
<br/>
<br/>
<h2>Esempio di tabella con 2 righe, 2 colonne e bordo:</h2>
<table border="1">
<tr> <td>Cella 1</td>
<td>Cella 2</td> </tr>
<tr> <td>Cella 3</td>
<td>Cella 4</td> </tr>
</table>
<p>grazie all'uso dell'attributo border e il valore in pixel</p>
<br/>
<br/>
<h2>Ovviamente aumentando il valore, cresce il bordo</h2>
<table border="4">
<tr> <td>Cella 1</td>
<td>Cella 2</td> </tr>
<tr> <td>Cella 3</td>
<td>Cella 4</td> </tr>00:00 14/12/2016
</table>
<p>valore in pixel 4</p>
<br/>
<br/>
<h2>Possiamo anche aumentare la larghezza</h2>
<p>In pixel, oppure in percentuale rispetto allo schermo</p>
<table border="4" width="30%">
<tr> <td>Cella 1</td>
<td>Cella 2</td> </tr>
<tr> <td>Cella 3</td>
<td>Cella 4</td> </tr>
</table>
<p>In questo caso, valore 30%</p>
<br/>
<br/>
<h2>Oppure controllare la posizione del contenuto nella cella</h2>
<p>con gli attributi: align e valing</p>
<table border="4" width="250" height="150">
<tr> <td align="right">Cella 1</td>
<td valign="top">Cella 2</td> </tr>
<tr> <td align="left">Cella 3</td>
<td align="right" valign="top">Cella 4</td> </tr>
</table>
<p>aling, per il controllo "a sinistra, al centro, a destra</p>
<p>valing, per il controllo "in alto, al centro, in basso</p>
<br/>
<br/>
<h2>Altri attributi: colspan e rowspan</h2>
<p>Iniziamo con Colspan, dall'inglese "column span" (colonne accoppiate)</p>
<table border="1">
<tr> <td colspan="3">Cella 1</td>
</tr>
<tr> <td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
<br/>
<br/>
<p>Se invece avessimo fissato colspan a "2"?</p>
<table border="1">
<tr> <td colspan="2">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr> <td>Cella 3</td>
<td>Cella 4</td>
<td>Cella 5</td>
</tr>
</table>
<br/>
<br/>
<h2>Adesso invece usiamo "rowspan"</h2>
<p>Rosspan specifica quante righe dovrebbero essere comprese in una cella</p>
<p>Proviamo con Rowspan "3"</p>
<table border="1">
<tr> <td rowspan="3">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr> <td>Cella 3</td>
</tr>
<tr> <td>Cella 4</td>
</tr>
</table>
<br/>
<br/>
<p>Come in precedenza per le colonne, adesso possiamo provare ad unire solo alcune righe</p>
<p>Per esempio con rowspan "2", anzichè "3"</p>
<table border="1">
<tr> <td rowspan="2">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr> <td>Cella 3</td>
</tr>
<tr> <td>Cella 4</td>
<td>Cella 5</td>
</tr>
</table>
