Le tabelle non vengono più usati per creare layout delle pagine e per configurazione dei singoli elementi, perché questa tecnica non fornisce la flessibilità e adattabilità alla struttura del sito.

1. Come creare una tabella nel linguaggio HTML

Una tabella in html viene creata usando la coppia di tag <table> </ table>. Questo tag serve da contenitore per vari elementi della  nostra futura tabella e tutti gli elementi devono essere all'interno di questa copia di tag.  Dopo di che posiamo gia  dividere la nostra tabella in rige con atraverso il  tag tr e colonne tag td. Tag th indica le celle con il titolo della colonna.  Ad esempio, utilizzando questa struttura che vedete sotto si  può creare una tabella costituita da due righe e due colonne:

<table>
<tr><th>testo del titolo </th><th>testo del titolo </th></tr> <!--la riga con dei titoli-->
<tr><td>dati della tabella </td><td>dati della tabella</td></tr> <!--la riga con il contenuto della tabella -->
</table>

Ho aggiunto la formattazione con dei stili per rendere il nostro esempio piu compressivo

Per impostazione predefinita, le celle in una tabella html non hanno bordi visibili. I bordi possono essere definiti usando le proprietà border:

/* il bordo esterno del colore griggio  1px */
table {border: 1px solid grey;} 
/* il bordo delle celle della prima riga della tabella  */
th {border: 1px solid grey;}
/* il bordo delle celle del corpo della tabella  */
td {border: 1px solid grey;}

Gli spazi tra le celle della tabella vengono rimossi con l'aiuto della proprietà  table {border-collapse: collapse;}

La larghezza della tabella di default è uguale alla larghezza del suo contenuto interno. Per impostare la larghezza, dobbiamo impostare il valore per larghezza con la proprietà width:

/* facciamo la larghezza della tabella uguale alla larghezza del vano contenitore in cui si trova */
table {width: 100%;}
/* o per impostare la larghezza fissa per la tabella indicheremo valore preciso */
table {width: 600px;}

Video relativo alla creazione delle tabelle in html.

  Tabelle 1 parte, 9:16 minute

2. Come creare le righe nella tabella html

Righe nelle tabelle  vengono create utilizzando il tag <tr>. Il numero di righe orizzontali nella tabella è determinato dal numero di copia di tag <tr> </ tr>.

3. Come creare titoli della colonna in una cella

Elemento<th> crea titolo della colonna, è una cella speciale, dove il testo è evidenziato in grassetto. Numero di celle di intestazione è determinato dal numero di coppie di tag <th> </ th>. Per l'elemento sono disponibili seguenti attributi colspan, rowspan, headers

<table>
<tr><th>cella della intestazione</th><th>cella della intestazione</th></tr>
</table>

4. Come vengono creati semplici celle al interno della tabella.

 Le copie di tag <td> </ td>, che si trova nella stessa riga, determinano il numero di celle in una riga della tabella. Il numero di coppie di celle <td> deve essere uguale al numero di coppie di celle creati con il tag  <th> (con i titolo della colonna ). Per questi tag  sono disponibili seguenti attributi  colspan, rowspan, headers .

<table>
<tr><th>cella della intestazione</th><th>cella della intestazione</th></tr>
<tr><td>cella con contenuto</td><td>cella con contenuto</td></tr>
</table>

Video relativo alla creazione e gestione delle tabelle nel linguaggio HTML

10. Tabelle 2 parte, 5:50 minute

5. Come aggiungere un titolo alla tabella

Elemento <caption> crea una descrizione per la nostra tabella . Viene messo subito dopo il tag <table>, oltre la riga o cella.

<table>
<caption>Elenco dei prodotti</caption>
  <tr>
    <th>№ per ordine </th>
    <th>Nome del prodotto</th>
    <th>Unita  di misurazione</th>
    <th>Quantita</th>
    <th>Costo per un cilo.</th>
    <th>Costo finale </th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Pomodori freschi</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Cetrioli freschi</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>
  </tr>
  <tr>
    <td colspan="5" style="text-align:right">In totale :</td><td>1168,80</td>
  </tr>
</table>

6. Raggruppamento di righe e colonne nella tabella

Elemento <colgroup> crea un gruppo di colonne , mettendo in evidenza le cellule logicamente simili. Ragruppa  una o più colonne per unica formattazione, che consente di applicare gli stessi stili alle colonne invece di ripetere gli stili per ogni cella o per ogni riga. L'elemento viene inserito subito dopo il tag <table> e <caption>.

Elemento<col> forma un gruppo di colonne che dividono la tabella in sezioni non incluse nella struttura complessiva, vale a dire, che non contengono le informazioni dello stesso tipo. Permette di specificare le proprietà CSS diversi  per ogni colonna all'interno del grupo <colgroup>. Con l'aiuto di vari stili CSS posiamo modificare il colore di sfondo della cella .Per  elemento <col> è disponibile attributo <span>, che specifica il numero di colonne da unire.

<table>
  <colgroup>
    <col span="2" style="background:Khaki"><!-- Con questo  impostiamo il colore di sfondo per le prime due colonne di una tabella-->
    <col style="background-color:LightCyan"><!-- Impostiamo il colore di sfondo per la prossima (una sola ) colonna-->
  </colgroup>
  <tr>
    <th>№ </th>
    <th>Nome </th>
    <th>Prezzo in euro.</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Matita di colore </td>
    <td>20,00</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Righello di 20 см</td>
    <td>30,00</td>
  </tr>
</table>

7.Ragrupamento sezioni delle tabella.

Elemento <thead> crea un gruppo di intestazioni per le rige della tabella  per  stabilire un unico disegno. Vine utilizzato in combinazione con gli elementi <tbody> e <tfoot > per specificare  parte della tabella.

L'elemento deve essere utilizzato nel seguente ordine: come un elemento figlio del elemento  <table>, va dopo  <caption> e <colgroup> , e prima di elementi <tbody>, <tfoot>  e <tr> . In una tabella puo essere utilizzato solo una volta .

L'elemento <tbody> raggruppa intestazioni della tabella . Viene utilizzato in combinazione con gli elementi <thead> e <tfoot> .

Elemento <tfoot>  crea un gruppo di righe per fornire informazioni sugli importi o risultati  nella parte inferiore della tabella. Viene utilizzato nella tabella una sola volta. Situata dopo il tag <thead>, prima del tag <tbody> e <tr>.

<table>
 <thead>
  <tr>
    <th>№ </th>
    <th>Nome del prodotto</th>
     <th>Unita di misurazione.</th>
     <th>Quantità</th>
     <th>Prezzo per un chilo in euro.</th>
     <th>Prezzo in euro.</th>
  </tr>
 </thead>
<tfoot>
  <tr>
    <td colspan="5" style="text-align:right">Totale:</td><td>1168,80</td>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td>1.</td>
    <td>Pomodori freschi</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Cetrioli freschi</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>
  </tr>
</tbody>  
</table>

Questo raggruppamento di righe è stato pensato inizialmente per assicurare al visitatore che scorrendo la tabella mantiene sempre in vista  le intestazioni delle colonne e al momento di stampa questi elementi possono servire come intestazione di pagina.  Tuttavia i browser moderni non seguono questa struttura pensata  o quindi o semplicemente mostrano  <thead> e <tfoot>  come semplici righe con i dati o al massimo, mettono queste righe all'inizio o alla fine della tabella

8. Come faccio a unire le celle di una tabella

Attributi colspan и rowspan  combinano celle della tabella. Attributo colspan specifica il numero di celle collegate in orizzontale e rowspan - in senso verticale.

<table>
  <tr>
    <th>№ </th>
    <th>Nome del prodotto</th>
     <th>Unita di misurazione.</th>
     <th>Quntita</th>
     <th>Prezzo per un chilo in euro.</th>
     <th>Prezzo in euro.</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Pomodori freschi</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Cetrioli freschi</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>
  </tr>
  <tr>
    <td colspan="5" style="text-align:right">Totale:</td><td>1168,80</td><!-- Specifichiamo il numero di cellule in senso orizzontale per unire-->
  </tr>
</table>

9. Attributi degli elementi della tabella

Esempio della tabella e guarda anche altre cliccando qui