Ciao a tutti e benvenuti! 🙂

Oggi vi illustrerò come creare delle tabelle in html 5.

 

Vediamo insieme i principali tags da utilizzare:

<table>  Crea una tabella
<tr>  Crea una riga di una tabella
<td>  Crea una cella di una tabella
<thead>  Crea l’intestazione di una tabella
<th>  Crea una cella per l’intestazione di una tabella
<tbody>  Crea il corpo della tabella
<tfoot>  Crea la chiusura della tabella

 

I primi tre tags (table, tr e td) sono indispensabili per poter creare una tabella!! 😉

ATTENZIONE: Per poter rendere le tabelle graficamente più “accattivanti” ci si deve avvalere del codice CSS (Cascading Style Sheets, in italiano fogli di stile a cascata). Per il momento, concentriamoci solamente sul linguaggio HTML!

Tuttavia, per poter visualizzare i bordi della tabella ho utilizzato l’attributo border all’interno del tag <table>, dandogli come spessore il valore 1.


1

Sopra la tabella ho inserito la didascalia “Cose da fare” utilizzando il tag <caption>.

Leggendo il codice avrete sicuramente notato che ho utilizzato l’attributo scope (in inglese “raggio d’azione”) all’interno del tag <th>. Ma a che cosa serve l’attributo scope? Come ben saprete, molte tabelle possono essere molto complesse e potrebbero sorgere ambiguità su quale sia il gruppo di celle per il quale una cella th funge da intestazione. Inoltre, le celle d’intestazione possono avere relazioni con celle che si trovano in righe o colonne differenti.

Occorre allora aiutare le tecnologie a fare le giuste associazioni, specificando quali siano precisamente le relazioni tra celle d’intestazione e celle di dati.

L’attributo scope ha 4 possibili valori:

  1. row – indica che la cella corrente fornisce informazioni d’intestazione per il resto della riga di cui fa parte;
  2. col – la cella corrente fornisce informazioni d’intestazione per il resto della colonna di cui fa parte;
  3. rowgroup – la cella corrente fornisce informazioni d’intestazione per il resto del gruppo di righe di cui fa parte;
  4. colgroup – la cella corrente fornisce informazioni d’intestazione per il resto del gruppo di colonne di cui fa parte.

Vediamo ora come poter fondere due o più celle in una con gli attributi colspan e rowspan.

  1. Colspan: per ottenere una cella che occupi più colonne utilizziamo l’attributo colspan, come nel caso della cella Memorandum (vedi tabella sopra);
  2. Rowspan: per ottenere una cella che si estenda su più di una riga utilizziamo l’attributo rowspan, come nel caso dei giorni della settimana della tabella.

Per qualsiasi dubbio o chiarimento non esitate a contattarmi! 😉

Al prossimo articolo!




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.