Con le seguenti regole css modifichiamo la rappresentazione stilistica delle tabelle
<div>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
Con questa proprietà definiamo il tipo di layout della tabella
Valori possibili:
| auto | layout predefinito dal browser |
| fixed | layout definito dalle nostre indicazioni css |
Utilizzando fixed possiamo definire la larghezza della tabella mediante la regola width
table {
table-layout: fixed;
width: 400px; }
Regola già vista ed utilizzabile all'interno della nostra tabella assieme alla sua sintassi abbreviata
table {
table-layout: fixed;
width: 400px;
border: 1px solid black; }
td, tr{
border: 1px solid black; }
Con questa proprietà possiamo stabilire in che modo trattare i bordi delle nostre tabelle
Valori possibili:
| collapse | le celle condividono i bordi |
| separate | ogni cella ha il suo bordo separato da quello delle altre celle |
table{
border-collapse: collapse; }
Questa proprietà è strettamente legata alla proprietà bordercollapse con valore separate "bordercollapse:separate" e seve a definire lo spazio tra i bordi delle varie celle
table{
table-layout:fixed;
width: 400px;
border: 1px solid black;
border-collapse:separate;
border-spacing: 15px; }
Con questa proprietà impostiamo come devono essere visualizzate le celle vuote
Valori possibili:
| show | mostra i bordi della cella anche se è vuota |
| hide | nascondi i bordi della cella vuota / spazio bianco |
table {
empty-cells: hide; }
Con questa proprietà definiamo dove visualizzare/posizione il caption (titolo/intestazione) della nostra tabella
Valori possibili:
| top | in alto |
| left | a sinistra |
| right | a destra |
| bottom | sotto |
table{
caption-side:left; }