Tabelle

Tabelle XHTML

Sintassi

L’elemento che identifica una tabella è :
<table>…</table>

Può avere come attributo:
summary: sintetizza una descrizione del contenuto.

All’interno di table è possibile inserire il tag :
<caption> che riporta il titolo della tabella.

Possono essere ppresenti i seguenti tab:
tr : riga
th: titolo
td: cella

Attributi colspan e rowspan

Td e th possono avere come attributi:
colspan (numero di colonne che occupa la cella)
rowspan  (numero di righe che occupa la cella)

<table>
<tr> <td>Cella 1</td> <td>Cella 2</td> <td>Cella 3</td> </tr>
<<tr> <td>Cella 4</td> <td colspan=”2”>Cella 5</td> </tr>
</table>

Tabelle CSS

Table layout e width

Il layout può avere due valori:
auto. Il layout è definito dal browser.
fixed. Le regole sono impostate dall’autore. E possibile definire la larghezza attraverso la proprietà width.

Esempio:
table {table-layout: fixed;  width. 400px;}

Border

E necessario definirlo esplicitando nello stile con la proprietà border.

Esempio:
table {border: 1px solid blackl;}
td {border: 1px dotted silver;}

I bordi della tabella  e delle singole celle sono gestiti separatamente.

Border-collapse e border-spacing

La proprietà border-collapse serve ad indicare, nel caso venga definito un  bordo per le celle, se questo dovrà essere condiviso o no

Border-collapse:collapse; bordo viene condiviso.

Border-collapse: separate; non viene condiviso(defaullt).

Se il valore è separate è possibile indicare lo spazio che deve esserci tra i bordi con la proprietà border-spacing

Table {border-collapse:separate;
border spacing: 4px;}

Empty-cells

Agisce sulle celle che non presentano al loro interno alcun tipo di markup, nemmo il cassico &nbsp;(spazio vuoto).

Può assumere due valori:
show (mostra i bordi della cella)
hide(non mostra i bordi e rimane uno spazio vuoto)

Table{empty-cells:show;}

Caption-side

Indica in quale punto deve essere visualizzato il contenuto del tag caption

Quattro valori possibili:
top
      bottom
      right
      left

Table{caption-side:bottom;}

Sfondo e Testo

Proprietà dello sfondo:
background-color
       background-image
       background-position
       background-repeat

Per il testo si possono utilizzare le relative proprietà:
(font-family, font-style…)