Elenchi e Tabelle

Liste

Sono utili a sintetizzare e organizzare concetti per punti, le varie tipologie sono:
elenchi 
ordinatiol è il tag per questo tipo di lista mentre l’attributo type serve per specificarne il tipo:

  • 1, numeri interi arabi;
  • a, alfabeto minuscolo;
  • A, alfabeto maiuscolo;
  • i, numeri romani minuscoli;
  • I, numeri romani maiuscoli;

Possiamo anche decidere da quale valore partire tramite start oppure value per modificare solo un valore.
esempio di lista ordinata:

  1. Primo
  2. Secondo
    1. Secondo uno
    2. Secondo due
    3. Secondo tre
  3. Terzo
  4. Quarto
<ol type=”a”>
<li>Primo</li>
<li>Secondo</li>
<ol type=”1”>
<li>Secondo uno</li>
<li>Secondo due</li>
<li>Secondo tre</li>
</ol>
<li>Terzo</li>
<li>Quarto</li>
</ol>

Elenchi non ordinatiul è il tag per questo tipo di lista mentre l’attributo type per scegliere il simbolo da usare dall’HTML 5 è deprecato.

  • Primo
  • Secondo
    • Carne
    • Pesce
  • Frutta
  • Dolce

<ul type=”disc”>
<li>Primo</li>
<li>Secondo</li>
<ul type=”circle”>
<li>Carne</li>
<li>Pesce</li>
</ul>
<li>Frutta</li>
<li>Dolce</li>
</ul>

Gli elenchi di definizione sono utili quando è necessario associare ad ogni voce un testo descrittivo, il tag da usare è dl. Con dt indichiamo il testo descrittivo mentre con dd la descrizione.

Gatto siamese
gatto di origine asiatica

gatto persiano
gatto dell’asia minore

gatto soriano
gatto proveniente dalla siria

<dl>
<dt>gatto siamese</dt>
<dd>gatto di origine asiatica</dd>
<dt>gatto persiano</dt>
<dd>gatto dell’asia minore</dd>
<dt>gatto soriano</dt>
<dd>gatto proveniente dalla Siria</dd>
</dl>

Tabelle

In passato usate per gestire i layout grafici, grazie ai css sono ritornati a svolgere il ruolo che gli spetta rappresentare informazioni. Il tag per utilizzare una tabella è table. Con il tag tr indichiamo la riga mentre con td la cella e quindi l’informazione.
Ora vediamo alcuni tag all’interno della tabella:

  • caption, una descrizione aggiuntiva alla tabella;
  • thead, intestazione della tabella;
  • th, una cella che contiene un’intestazione;
  • tbody, raggruppa le righe che contengono il corpo della tabella;
  • tfoot, raggruppa le righe che utilizziamo come footer;
  • border, larghezza del bordo;
  • cellspacing e cellpadding, specifica la distanza tra le celle e tra il contenuto e il bordo;

Esempio di tabella:

Titolo Tabella

Dato A Dato B Dato C Dato D
Valore A1 Valore B1 Valore C1 Valore D1
Valore A2 Valore B2 Valore C2 Valore D2
Valore A3 Valore B3 Valore C3 Valore D3
Totale A4 Totale B4 Totale C4 Totale D4

<table>
<caption>Titolo Tabella</caption>
<thead>
<tr>
<th>Dato A</th><th>Dato B</th><th>Dato C</th><th>Dato D</th>
</tr>
</thead>
<tbody>
<tr>
<td>valore A1</td><td>valore B1</td><td>valore C1</td><td>valore D1</td>
</tr>
<tr>
<td>valore A2</td><td>valore B2</td><td>valore C2</td><td>valore D2</td>
</tr>
<tr>
<td>valore A3</td><td>valore B3</td><td>valore C3</td><td>valore D3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Totale A</td><td>Totale B</td><td>Totale C</td><td>Totale D</td>
</tr>
</tfoot>
</table>

 

Il tag th prevede l’attributo scope per specificare a quali valori si riferisce

  • row, valori della riga;
  • col, valori della colonna;
  • rowgroup, valori del gruppo di righe;
  • colgroup, valori del gruppo di colonne;
  • auto, viene selezionato dal contesto

Possiamo decidere di raggruppare alcune celle con l’attributo

  • colspan, raggruppa alcune celle della stessa riga;
  • rowspan, raggruppa alcune celle della stessa colonna;
Orario Lezioni

Ora Lunedì Martedì Mercoledì Giovedì Venerdì
I Materia A Materia B Materia C Materia D
II Materia E Materia F Materia G
III Materia H
IV Materia I Materia L Materia M Materia N Materia O

<table>
<caption>Orario Lezioni</caption>
<thead>
<tr>
<th>Ora</th><th>Lunedì</th><th>Martedì</th><th>Mercoledì</th>
<th>Giovedì</th><th>Venerdì</th>
</tr>
</thead>
<tbody>
<tr>
<
th>I</th><td rowspan=”3″>Materia A</td><td>Materia B</td>
<td>Materia C</td><td colspan=”2″>Materia D</td>
</tr>
<tr>
<th>II</th><td rowspan=”2″>Materia E</td>
<td rowspan=”2″>Materia F</td><td colspan=”2″>Materia G</td>
</tr>
<tr>
<th>III</th><td colspan=”2″>Materia H</td>
</tr>
<tr>
<th>IV</th><td>Materia I</td><td>Materia L</td>
<td>Materia M</td><td>Materia N</td><td>Materia O</td>
</tr>
</tbody>
</table>

Please follow and like us:

Lascia un commento