Come creare e gestire tabelle in HTML

Tabelle  servono per ordinare e visualizzare i dati utilizzando righe o colonne. Le tabelle  sono costituiti da colonne e righe che formano celle . Le celle nelle tabelle possono contenere diversi elementi HTML,  titoli, elenchi, testo, immagini,  così come anche altre tabelle al suo interno. Ad ogni tabella si può aggiungere un titolo associato, ponendolo sopra  o sotto la tabella

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>

testo del titolo testo del titolo
dati della tabella dati della tabella


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

video prevui

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

Come creare un atabella nel HTML

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>

Elenco dei prodotti
№ per ordine Nome del prodotto Unita di misurazione Quantita Costo per un cilo. Costo finale
1. Pomodori freschiкг15,2069,001048,80
2. Cetrioli freschiкг2,5048,00120,00
In totale :1168,80

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>

Nome Prezzo , euro.
1 Matita di colore 20,00
2 Righello di 20 см 30,00

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>

Nome del prodotto Unita di misurazione. Quantita Prezzo per un chilo in euro. Prezzo in euro.
1. Pomodori freschiкг15,2069,001048,80
2. Citrioli freschiкг2,5048,00120,00
Totale:1168,80

9. Attributi degli elementi della tabella

Tabella 1. Attributi degli elementi della tabella
Attributo Descrizione,valore che puo assumere
colspan Il numero di celle nella riga da unire in orizzontale.
<td colspan="3">
Possibili valori : numero da 1 a 999.
headers Specifica un elenco di celle di intestazione che contengono le informazioni di intestazione della cella corrente. Sono pensati per i browser vocali.
<th id="identificatore">...</th>
<th headers="identificatore">...</th>

I valori accettati: un elenco di nomi di celle separati da spazi; Questi nomi devono essere assegnati alle cellule attraverso il loro attributo id.
rowspan Il numero di celle di una colonna per la loro unione in verticale.
<td rowspan="2">
I valori possibili: numero da 1 a 999.
span Numero di colonne unite per attribuire un unico stile, il valore predefinito è 1.
<col span="2">
I valori accettati: qualsiasi numero intero positivo.

Esempio della tabella e guarda anche altre cliccando qui

 

Letto 968 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso