Corso HTML e CSS (27^ lezione):Stilizzare liste e tabelle

Impariamo a costruire un sito Web

Lezione 27: CSS: Stilizzare liste e tabelle.

 

Vediamo adesso quali sono le proprietà edi rispettivi valori che permettono la stilizzazione delle liste.


list-style Ingloba tutte le proprietà stilistiche di un elemento lista. Con un’unica dichiarazione si possono dichiarare tutte le proprietà che sono:

list-style-type Con questo valore si specifica il tipo di marcatore che deve essere usato per gli elementi della lista. Vedi la descrizione di questa proprietà per i possibili valori.
list-style-position Con questo valore si specifica la posizione del marcatore degli elementi della lista. Vedi la descrizione di questa proprietà per i possibili valori.
list-style-image Usato per rimpiazzare il marcatore di default con un’immagine. Vedi la descrizione di questa proprietà per i possibili valori.
inherit Specifica che i valori di questa proprietà saranno ereditati dall’elemento padre.

I valori per ciascuna delle suddette proprietà vanno assegnati nell’ordine:

list-style-type

list-style-position

list-style-image

Se un valore non viene indicato verrà usato il valore di default.

Es d’uso:

ul {

list-style:square inside;

}

dove square è il valore di list-style-type e inside quello di list-style-position.

Per l’elenco di tutti i valori di ciascuna proprietà con relativi esempi vedi sotto.

list-style-type Specifica il tipo di marcatore che deve essere usato per gli elementi della lista.

I valori che questa proprietà può assumere sono indicati nella tabella riportata di seguito con relativo esempio a fianco relativo ad una lista di 3 elementi.

armenian
  1. elemento 1
  2. elemento 2
  3. elemento 3
circle
  1. elemento 1
  2. elemento 2
  3. elemento 3
cjk-ideographic
  1. elemento 1
  2. elemento 2
  3. elemento 3
decimal
  1. elemento 1
  2. elemento 2
  3. elemento 3
decimal-leading-zero
  1. elemento 1
  2. elemento 2
  3. elemento 3
disc
  1. elemento 1
  2. elemento 2
  3. elemento 3
georgian
  1. elemento 1
  2. elemento 2
  3. elemento 3
hebrew
  1. elemento 1
  2. elemento 2
  3. elemento 3
hiragana
  1. elemento 1
  2. elemento 2
  3. elemento 3
hiragana-iroha
  1. elemento 1
  2. elemento 2
  3. elemento 3
inherit Il valore è ereditato dall’elemento padre.
katakana
  1. elemento 1
  2. elemento 2
  3. elemento 3
katakana-iroha
  1. elemento 1
  2. elemento 2
  3. elemento 3
lower-alpha
  1. elemento 1
  2. elemento 2
  3. elemento 3
lower-greek
  1. elemento 1
  2. elemento 2
  3. elemento 3
lower-latin
  1. elemento 1
  2. elemento 2
  3. elemento 3
lower-roman
  1. elemento 1
  2. elemento 2
  3. elemento 3
none
  1. elemento 1
  2. elemento 2
  3. elemento 3
square
  1. elemento 1
  2. elemento 2
  3. elemento 3
upper-alpha
  1. elemento 1
  2. elemento 2
  3. elemento 3
upper-latin
  1. elemento 1
  2. elemento 2
  3. elemento 3
upper-roman
  1. elemento 1
  2. elemento 2
  3. elemento 3
list-style-position Specifica la posizione del marcatore degli elementi della lista.

I valori che può assumere sono:

inside Il marcatore viene indentato insieme al testo (vedi sotto l’esempio).
outside Tiene il marcatore all’esterno dell’indentazione(vedi sotto l’esempio).
inherit Specifica che il valore sarà ereditato dall’elemento padre.

Es d’uso:

In un CSS scriviamo:

.lista_inside {
   list-style-position:inside;
}

.lista_outside {
   list-style-position:outside;
}

.lista_inside li, .lista_outside li {
   border:1px solid;
}

Nel foglio html scriviamo invece:

<ul class="lista_inside">
   <li> Elemento 1</li>
   <li> Elemento 2</li> 
   <li> Elemento 3</li> 
</ul>

<ul class="lista_outside">
   <li> Elemento 1</li> 
   <li> Elemento 2</li> 
   <li> Elemento 3</li> 
</ul>

A video vedremo:

  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 1
  • Elemento 2
  • Elemento 3

Il bordo agli elementi lo abbiamo aggiunto per far risaltare la differenza tra inside ed outside.

list-style-image Usato per rimpiazzare il marcatore di default con un’immagine.

I valori che può assumere sono:

url L’url dell’immagine da usare come marcatore degli elementi della lista.
none Nessuna immagine. Il marcatore sarà definito da list-style-type. Questo è il default.
inherit Specifica che il valore di list-style-image sarà ereditato dall’elemento padre.

Es d’uso:

CSS:

ul {
list-style-image:url(‘ListBullet.png’);
}

Uso (html):

<ul>
   <li> Elemento 1</li> 
   <li> Elemento 2</li> 
   <li> Elemento 3</li> 
</ul>

Il risultato sarà:

  • Elemento 1
  • Elemento 2
  • Elemento 3

Vediamo ora le proprietà edi rispettivi valori che permettono di creare uno stile per le tabelle.

table-layout Definisce il metodo di layout di una tabella

I valori che possono essere assegnati a questa proprietà sono:

auto Il layout della tabella è determinato automaticamente. Questo è il default.

La larghezza di una colonna è determinata dal più esteso e non divisibile contenuto della cella.

Puo essere lento, perché deve leggere tutto il contenuto della tabella per poter determinare il layout.

fixed Il layout della tabella è fisso.

Il layout orizzontale è determinato dalla larghezza della tabella e delle singole colonne e non dal loro contenuto.

E’ quindi più veloce del layout automatico. Inoltre il browser può iniziare il display della tabella appena determinato il layout della prima riga.

inherit Specifica che Il valore di questa proprietà sarà ereditato dall’elemento padre.

Es d’uso:

CSS:

.t1 {table-layout:auto}

.t2 {table-layout:fixed}

HTML:

<table class="t1" border="1" width="300px">
   <tr>
      <td width="10%">Questo è il contenuto della prima cella</td>
      <td width="90%">2^ Cella</td>
   </tr>
</table>
<br>

<table class="t2" border="1" width="300px">
   <tr>
      <td width="10%">Questo è il contenuto della prima cella</td>
      <td width="90%">2^ Cella</td>
   </tr>
</table>
Questo è il contenuto della prima cella 2^ Cella

 

Questo è il contenuto della prima cella 2^ Cella

Come si può vedere nel primo esempio la larghezza della prima colonna è stata determinata automaticamente sulla base della lunghezza della parola ‘contenuto’ che è la parte del contenuto non divisibile più grande.

Nel secondo esempio la larghezza l’abbiamo fissata al 10% indipendentemente dal contenuto. In questo caso resta così fissata anche se non è possibile contenere la parola ‘contenuto’.

border-collapse Definisce se il bordo delle celle debba essere unito o separato.

I valori che possono essere assegnati a questa proprietà sono:

collapse Le celle sono unite tra loro con un unico bordo che separa il contenuto.
separate Le celle sono separate tra loro. Lo spazio tra le celle è influenzato dalla proprietà border-spacing. Questo è il default.
inherit Specifica che Il valore di questa proprietà sarà ereditato dall’elemento padre.

Es d’uso:

CSS:

table {
   border-collapse:separate;
}

td, th {
   border:1px solid;
}

Nell’html:

<table>
   <tr>
      <th>Nome</th>
      <th>Cognome</th>
   </tr>
   <tr>
      <td>Mario</td>
      <td>Rossi</td>
   </tr>
   <tr>
      <td>Lucia</td>
      <td>Bianchi</td>
   </tr>
</table>

A video vedremo:

Nome Cognome
Mario Rossi
Lucia Bianchi
border-spacing Definisce la distanza tra il bordo e le celle adiacenti.

I valori accettati sono:

l1 l2 I due valori sono rispettivamente la spaziatura orizzontale tra celle adiacenti e quella verticale.Entrambi i valori sono espressi come sempre in px, cm ecc.

Se viene specificato un solo valore questo rappresenterà la spaziatura sia orizzontale sia verticale.

inherit Specifica che Il valore di questa proprietà sarà ereditato dall’elemento padre.

Se nell’esempio precedente alla proprietà della tabella aggiungiamo:

border-spacing:5px 20px;

otterremo il seguente risultato:

Nome Cognome
Mario Rossi
Lucia Bianchi
empty-cells Definisce se mostrare o meno le celle prive di contenuto.

I valori che può assumere sono:

hide Non verranno mostrati né sfondo né bordi delle celle con questa proprietà.
show La cella è mostrata con i suoi bordi e lo sfondo. Questo è il default.
inherit Specifica che Il valore di questa proprietà sarà ereditato dall’elemento padre.

Es d’uso:

Nel CSS scriviamo:

table {
   border-collapse:separate;
   empty-cells:hide;
}

td, th {
   border:1px solid;
}

Nell’html:

<table>
   <tr>
      <th>Nome</th>
      <th>Cognome</th>
   </tr>
   <tr>
      <td>Mario</td>
      <td>Rossi</td>
   </tr>
   <tr>
      <td>Lucia</td>
      <td></td>
   </tr>
</table>

A video vedremo:

Nome Cognome
Mario Rossi
Lucia
caption-side Definisce dove mostrare il titolo della tabella.

I valori che possono essere assegnati a questa proprietà sono:

top Mette il titolo sopra la tabella. Questo è il default.
bottom Mette il titolo sotto la tabella.
inherit Il valore della proprietà caption-side andrà ereditato dall’elemento padre.

Es d’uso:

caption {
caption-side:bottom;
}

Nell’html:

<table border="1">
   <caption>Tabella Users</caption> 
   <tr>
      <th>Nome</th>
      <th>Cognome</th>
   </tr>
   <tr>
      <td>Mario</td>
      <td>Rossi</td>
   </tr>
   <tr>
      <td>Lucia</td>
      <td>Bianchi</td>
   </tr>
</table>

Il risultato sarà:

Tabella Users
Nome Cognome
Mario Rossi
Lucia Bianchi

Nel CSS3 sono state definite diverse proprietà per gestire la formattazione di un blocco in colonne. Però tutte queste proprietà non sono supportate da Internet Explorer ed alcune anche da altri browsers. Ne consegue che l’uso di queste proprietà è sconsigliato sintanto che non saranno supportate da tutti i browsers. Forniamo comunque l’elenco per completezza d’informazione:

column-count Specifica il numero di colonne in cui un elemento può essere suddiviso
column-fill Specifica come riempire le colonne (ad esempio come deve essere suddiviso un testo tra le diverse colonne).
column-gap Specifica il gap tra le colonne
column-rule Permette di impostare tutte le proprietà della colonna in un’unica dichiarazione
column-rule-color Specifica il colore delle colonne
column-rule-style Specifica la larghezza della riga che separa le colonne
column-rule-width Specifica lo stile della riga che separa le colonne
column-span Specifica quante colonne un elemento debba raggruppare
column-width Specifica la larghezza delle colonne
columns Permette di impostare larghezza e numero delle colonne in un’unica dichiarazione

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.