Tabelle
Le tabelle organizzano dati realmente tabulari — non vanno mai usate per impaginare una pagina, quello è compito del CSS.
<table>
<caption>Orari di apertura</caption>
<tr>
<th>Giorno</th>
<th>Orario</th>
</tr>
<tr>
<td>Lunedì</td>
<td>9:00 - 18:00</td>
</tr>
<tr>
<td>Sabato</td>
<td>9:00 - 13:00</td>
</tr>
</table>
<table>: contenitore della tabella<tr>(table row): una riga<th>(table header): cella di intestazione, in grassetto di default<td>(table data): cella di dati<caption>: titolo descrittivo della tabella, utile per l’accessibilità
Gli attributi
border,cellpaddingecellspacingesistono ma sono deprecati: lo stile delle tabelle (bordi, spaziature, colori) va gestito con il CSS, che vedremo più avanti.
Elenchi
Elenco non ordinato (<ul>, “unordered list”): l’ordine degli elementi non conta.
<ul>
<li>Latte</li>
<li>Pane</li>
<li>Uova</li>
</ul>
Elenco ordinato (<ol>, “ordered list”): l’ordine è significativo.
<ol>
<li>Preriscalda il forno</li>
<li>Prepara l'impasto</li>
<li>Inforna per 20 minuti</li>
</ol>
In entrambi i casi ogni voce è un elemento <li> (list item). Usa <ul> per liste dove l’ordine non conta (ingredienti, caratteristiche), <ol> per sequenze (istruzioni, passaggi).
Esercitazione pratica
Crea una tabella con almeno 3 righe e 3 colonne, e due elenchi (uno ordinato, uno non ordinato) su un tema a tua scelta.