Page 29 - Guida tascabile HTML5
P. 29

<dd>Frequenza 329,63 Hz</dd>
             <dd>Frequenza 659,26 Hz</dd>
           </dl>

              Ricordate che non è consentito, all’interno di un tag <dl>, utilizzare più tag <dt>
           con lo stesso valore: ogni termine deve essere univoco, se necessario seguito da

           più descrizioni <dd>, come nell’esempio appena illustrato.




                                                 Le tabelle


              All’organizzazione dei contenuti in tabelle è dedicato un altro insieme di tag: è
           possibile distinguere righe e colonne di intestazione dai dati veri e propri, e

           intervenire in modo piuttosto sofisticato su alcune proprietà.

              ATTENZIONE Agli albori del Web, quando ancora non era possibile utilizzare fogli di
              stile  CSS  per  gestire  l’aspetto  degli  elementi,  le  tabelle  sono  state  utilizzate  dagli
              sviluppatori per creare griglie da “vestire” graficamente: questa prassi, oggi del tutto

              sorpassata, non teneva minimamente conto del valore semantico di questi elementi.
              Oggi,  grazie  alla  maturità  del  linguaggio  e  alle  possibilità  offerte  dai  tag  semantici,
              potete  utilizzare  le  tabelle  quando  appropriato:  l’eventuale  allineamento  o
              impaginazione dei contenuti deve sempre essere rimandata a regole CSS adeguate,
              associate al documento.

              Iniziamo analizzando un semplice esempio di markup con gli elementi
           indispensabili per la descrizione di una tabella.


           <table border="1">
             <tr>
               <td>Lunedì</td>
               <td>Martedì - Venerdì</td>
               <td>Sabato</td>
             </tr>
             <tr>
               <td>15:00</td>
               <td>10:00</td>
               <td>10:00</td>
             </tr>
             <tr>
               <td>19:00</td>
               <td>19:00</td>
               <td>20:00</td>
             </tr>
           </table>
              Il tag <table> racchiude la struttura della tabella, con un tag <tr> (table row) per

           ogni riga, che a sua volta contiene un tag <td> (table data) per ogni cella.


              NOTA L’attributo  border="1"  del  tag  <table>  permette  di  visualizzare  la  struttura  delle
              celle.  Come  già  sottolineato,  è  consigliabile  evitare  di  legare  il  markup  HTML  alla
              presentazione,  e  gestire  l’aspetto  degli  elementi  solo  con  i  fogli  di  stile  CSS.  Negli
              esempi sarà utilizzato solo per maggiore chiarezza.
   24   25   26   27   28   29   30   31   32   33   34