Guide

Corso HTML – Lezione 5 : Gli elenchi e le tabelle

HTML

È possibile organizzare il testo , o comunque il contenuto di una pagina , in elenchi e/o tabelle . Per realizzare un elenco testuale è necessario utilizzare il tag <ul> e inserire ogni singola voce dell’elenco all’interno del tag <li> .

Il seguente codice crea una pagina contenente un elenco di tre voci :

<!doctype html>
<html>
   <head>
      <title> Esempio di Elenco </title>
   </head>
   <body>
      <p> Elenco : </p>
      <ul>
         <li> prima voce dell'elenco </li>
         <li> seconda voce dell'elenco </li>
         <li> terza voce delle'elenco </li>
      </ul>
   </body>
</html>

che il browser visualizza nel seguente modo :

screen1Le tabelle sono organizzate per righe e colonne e si costruiscono utilizzando il tag <table> . Il numero di colonne della tabella è dato dal numero di celle inserite in ogni riga , perciò il numero di celle  – e quindi il numero di colonne – dovrà essere lo stesso in ogni riga . Le righe sono individuate dal tag <tr> ( table row) , mentre le celle sono definite dal tag <td> ( table data ) .

Per esempio una tabella di due righe per due colonne può essere definita mediante il seguente codice :

<body>
   <table>
      <tr>
         <td> contenuto cella [ 1 , 1 ] </td>
         <td> contenuto cella [ 1 , 2 ] </td>
      </tr> 
      <tr>
         <td> contenuto cella [ 2 , 1 ] </td>
         <td> contenuto cella [ 2 , 2 ] </td>
      </tr>
   </table>
</body>

[box type=”info” ]Con le precedenti versioni del linguaggio HTML le tabelle venivano spesso usate per strutturare graficamente l’intera pagina . Si tratta di un modo errato di formattare il layout grafico che deve invece essere sempre realizzato con l’uso dei CSS ( Cascading Style Sheet ) del quale parleremo forse nelle prossime lezioni .[/box]

Le celle della tabella destinate a contenere l’intestazione di una colonna , o di una riga , devono essere manrcate con il tag <th> invece che con il tag <td> . Il codice HTML che definisce una tabella di due righe per due colonne con le celle della prima riga contenenti i titoli delle rispettive colonne è così strutturato :

<!doctype html>
   <html>
      <head>
         <title> Pagine con tabella 2x2 </title>
      </head>
      <body>
         <table>
            <tr>
               <th> titolo colonna 1 </th>
               <th> titolo colonna 2 </th>
            </tr>
            <tr>
               <td> contenuto cella [ 2 , 1 ] </td>
               <td> contenuto cella [ 2 , 2 ] </td>
            </tr>
         </table>
      </body>
   </html>

La tabella viene visualizzata dal browser in questo modo :

screen 2Talvolta risulta utile suddividere la tabella in tre sezioni : una sezione iniziale di intestazione (detta header ) , una sezione centrale che costituisce il corpo della tabella (detto body ) e una sezione terminate costituita normalmente dalle ultime righe ( detto footer ) : in HTML è possibile definire le sezioni utilizzando rispettivamente i tag <thead> , <tbody> , <tfoot> . 

Per realizzare una tabella come la seguente , suddivida in uno header con l’intestazione delle colonne , in un footer riportante la somma totale e il body con l’elenco dei prodotti :

screen 3

è necessaria una pagina HTML così impostata :

<!doctype html>
   <html>
      <head>
         <title> Web Hosting - Prezzi </title>
      </head>
      <body>
         <table>
            <thead>
               <tr>
                  <th> Prodotto </th>
                  <th> Prezzo </th>
               </tr>
            <thead>
            <tfoot>
               <tr>
                  <td>Totale </td>
                  <td> &euro ; 75 </td>
               </tr>
               <tr>
                  <td> Web Hosting </td>
                  <td> &euro ; 60 </td>
               <tr>
            </tbody>
         </table>
      </body>
   </html>

[box type=”info” ]Come è evidente dall’esempio precedente , il corretto ordinamento delle sezioni della tabella viene effettuato automaticamente dal browser in fase di visualizzazione .[/box]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Le guide più interessanti