test_05.html

HTML

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


<table>
   <caption>
      <p><em>Fatturato semestrale.</em> 
      Questa tabella mostra i valori di 
      fatturato semestrale e totale,
      ripartito per linea prodotto, 
      di un negozio di articoli di bricolage.
   </caption>
   <colgroup id="linea"><col>
   <colgroup id="semestrale"><col><col>
   <colgroup id="totale"><col>
   <thead>
     <tr>
      <th colspan="2">Anno di riferimento</th>
      <td colspan="2">2016</td>
     </tr>
     <tr>
      <th>Linea prodotto</th>
      <th>Primo sem.</th>
      <th>Secondo sem.</th>
      <th>Totale</th>
     </tr>
   </thead>
   <tbody>
      <tr>
         <th>Elettroutensili</th>
         <td>45.630</td>
         <td>49.570</td><td>95.200</td>
      </tr>
      <tr>
         <th>Utensili manuali</th>
         <td>37.132</td>
         <td>30.141</td><td>67.273</td>
      </tr>
      <tr>
         <th>Materiali e minuterie</th>
         <td>21.776</td>
         <td>23.111</td><td>44.887</td>
      </tr>
      <tr>
         <th>Vernici e collanti</th>
         <td>34.237</td>
         <td>36.566</td><td>70.803</td>
      </tr>  
   </tbody>
   <tfoot>
      <tr>
         <th>Totale</th>
         <td>138.775</td>
         <td>139.388</td><td>278.163</td>
      </tr>
   </tfoot>
</table>

Views

*Fatturato semestrale.* Questa tabella mostra i valori di fatturato semestrale e totale, ripartito per linea prodotto, di un negozio di articoli di bricolage.
Linea prodotto	Primo sem.	Secondo sem.	Totale
Anno di riferimento		2016
Elettroutensili	45.630	49.570	95.200
Utensili manuali	37.132	30.141	67.273
Materiali e minuterie	21.776	23.111	44.887
Vernici e collanti	34.237	36.566	70.803
Totale	138.775	139.388	278.163

Rispetto al precedente esempio, in questo vengono usati anche gli elementi tbody e tfoot e vengono dimensionati gli elementi della tabella.

I colori, ed i differenti allineamenti del testo nelle celle, mostrano alcune possibilità offerte dal CSS Table Model.

CSS

Codice css per la formattazione della tabella Fatturato semestrale.

         
table{
   border:1px solid;
   font-family:serif;
   font-size:9pt;
   position:relative;
   width:95%; 
}
caption{
   font-family:san-serif;
   font-size:12pt;
   text-align:justify;
   padding:0.5%;
}
caption em{
   font-weight:bold;
}
thead{
   background:lightgray;
}
thead td{
   background:yellow;
   font-size:12pt;
   font-weight:bolder;
   text-align:center;
}
td {
   text-align:right;
   width:20%
}
tbody th {
   text-align:left;
}
tfoot th{
   background:lightgray;
   text-align:right;
}
tfoot td{
   background:yellow;
   font-weight:bold;
}
th, td {
   border:1px solid;
}
#totale{
   background:yellow;
}
#semestrale{
   background:aqua;
}
#linea{
   background:lime;
}