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.
Lingua | Feriali | Festivi | |||||
---|---|---|---|---|---|---|---|
Giorno 1 | Giorno 2 | Giorno 3 | Giorno 4 | Giorno 5 | Giorno 6 | Giorno 7 | |
Italiano | lunedì | martedì | mercoledì | giovedì | venerdì | sabato | domenica |
Inglese | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday |
Spagnolo | lunes | martes | mièrcole | jueves | viernes | sàbado | domingo |
Francese | lundi | mardi | mercredi | juedi | vendredi | samedi | dimanche |
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.
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;
}