HTML

Codice html per la costruzione della tabella "Giorni della settimana".


<table>
   <caption>
      Giorni della settimana. Questa ...
   </caption>
   <colgroup id="lingua"><col>
   <colgroup id="feriali"><col><col>...<col>
   <colgroup id="festivi"><col><col>
   <thead>
      <tr>
         <th rowspan="2">Lingua</th>
         <th colspan="5">Feriali</th>
         <th colspan="2">Festivi</th>
      </tr>
      <tr>
         <th>Giorno 1</th>...<th>Giorno 7</th>
      </tr>
   </thead>
   <tr>
      <th>Italiano</th><td>lunedi</td>...
      ...<td>domenica</td>
   </tr>
   ...
   ...
   <tr>
      <th>Francese</th><td>lundi</td>...
      ...<td>dimanche</td>
   </tr>
</table>

Views

Mostrare, attraverso alcuni esempi, il funzionamento degli elementi html disponibili per la creazione di tabelle.

Giorni della settimana. Questa tabella mostra il nome dei giorni della settimana in diverse lingue.

LinguaFerialiFestivi
Giorno 1Giorno 2Giorno 3Giorno 4Giorno 5Giorno 6Giorno 7
Italianolunedìmartedìmercoledìgiovedìvenerdìsabatodomenica
IngleseMondayTuesdayWednesdayThursdayFridaySaturdaySunday
Spagnololunesmartesmièrcolejuevesviernessàbadodomingo
Franceselundimardimercredijuedivendredisamedidimanche

Queso esempio è abbastanza interessante in quanto utilizza diversi elementi di table: caption, colgroup, thead, tr, th, e td. Impiega inoltre gli attributi rowspan e colspan che consentono rispettivamente di estendere una cella su più righe e su più colonne. Restano da esaminare altri importanti elementi e proprietà. Lo faremo nei successivi esempi con tabelle più complesse.

Prossimo esempio

CSS

Codice css per la formattazione della tabella giorni della settimana.

         
table{
   background:pink;
   border:1px solid;
   font-family:serif;
   font-size:9pt;
}
caption{
   font-family:cursive;
   font-size:9pt;
   font-weight:bold;
   text-align:left;
   padding:0.5%;
}
#feriali {
    background:lime;
}
#festivi {
    background:red;
}
th{
   border:1px solid; 
   background:lightgray;
   font-weight:lighter;
}
td{
   border:1px solid blue;
}