Tabelle con CSS: bordi, linee e larghezza

Nel generare tabelle con CSS si definiscono 2 cose: l’aspetto esteriore del bordo ed il colore o l’immagine di sfondo.

Bordo: la prima e più importante proprietà è "border-collapse" che descrive il comportamento del bordo. Ci sono due possibilità: con il valore "collapse" due bordi vicini vengono uniti in uno (non c’è spazio tra i due bordi). Con il valore "separate" ogni cella come ogni tabella prende un determinato spazio.

Esempio:

<style type="text/css">
<!-
table, td { border: solid 1px red; }
table { border-collapse: separate; border-spacing:3px;}
->
</style>

Come si può vedere c’è anche la proprietà "border-spacing", con la quale si definisce lo spazio tra i bordi (quando "border-collapse" è impostato su separate).

Immagine o colore di sfondo: le proprietà "background-image" e "background-color". Come valore si prende l’URL o il codice del colore. In CSS gli URL vengono impostati all’interno di url().

Esempio:

<style type="text/css">
<!-
th { background-color: white; font-weight: bold; }
table { background-image: url (backgroung.gif); width: 400px;}
->
</style>

Si possono anche disattivare le celle vuote con la proprietà "empty-cells". Come valore: "hide" (per nasconderle) o "show".

Esempio:

<style type="text/css">
<!-
table, td, th { border: solid 1px red; }
table { border-collapse: separate; border-spacing:3px; empty-cells: show;}
->
</style>

Con la propietà "caption" (poco usata) si hanno dei titoli per la tabella. Con "caption-side" si definisce la posizione del testo. Proprietà: "top", "bottom", "left" e "right".

Esempio:

<table style="caption-side: bottom;" border="1">
<caption>firma</caption>
<tr>
<td> ... </td>
</tr>
</table>

Allineamento del testo: si ha con la proprietà "text-align": destra, sinistra, centrato o giustificato.

Con la proprietà CSS table-layout: fixed non è più il contenuto della colonna che ne determina la larghezza. Con questa proprietà il browser controlla la larghezza che si è data nel valore di width del CSS. In questo caso la larghezza della colonna non è più calcolata automaticamente.

Comments are Disabled