Le tabelle

Il layout

Per definire il layout della tabella dobbiamo usare la proprietà table-layout che può avere due valori: auto (la tabella si posiziona automaticamente in base al suo contenuto) o fixed (la tabella viene posizionata in base ai valori settati con la proprietà width).

table {
	table-layout: auto;
}

I bordi delle celle

Per definire come devono comportarsi i bordi tra due celle o tra una cella e l'intera tabella (se sono stati impostati con la proprietà border) dobbiamo usare la proprietà border-collapse che può avere due valori: collapse (un bordo singolo divide due celle) o separate (ogni cella ha il suo bordo, separato da quello delle altre). Nell'esempio le singole celle condividono il bordo ma la tabella ha un suo proprio bordo separato.

table{ 
    border: 1px solid black;
	border-collapse: separate; 
} 
td{ 
    border: 1px solid black;
	border-collapse: collapse; 
}

Per definire lo spazio tra i bordi quando la proprietà border-collapse è impostata a separate dobbiamo usare la proprietà border-spacing.

table {
    border: 1px solid black;
	border-spacing: 5px;
}

Le celle vuote

Per definire come devono essere trattate le celle vuote dobbiamo usare la proprietà empty-cells che può avere due valori: show (i bordi delle celle vuote vengono mostrati) o hide (i bordi delle celle vuote vengono nascosti).

td {
	empty-cells: hide;
}

La didascalia

Per definire come deve essere posizionata la didascalia inserita nel tag <caption> rispetto alla tabella che lo contiene dobbiamo usare la proprietà caption-side che può avere due valori, top o bottom.

caption {
	caption-side: bottom;
}

<table>
	<caption>Orario</caption>
	<thead>
	<tr>
		<th>Lunedì</th>
		<th>Martedì</th>
		<th>Mercoledì</th>
		<th>Giovedì</th>
		<th>Venerdì</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Italiano</td>
		<td>Geografia</td>
		<td>Filosofia</td>
		<td>Chimica</td>
		<td>Matematica</td>
	</tr>
	<tr>
		<td></td>
		<td>Storia</td>
		<td>Latino</td>
		<td></td>
		<td>Italiano</td>
	</tr>
	<tr>
		<td>Matematica</td>
		<td></td>
		<td></td>
		<td></td>
		<td>Fisica</td>
	</tr>
	<tr>
		<td>Fisica</td>
		<td>Italiano</td>
		<td></td>
		<td>Educazione fisica</td>
		<td>Geografia</td>
	</tr>
	</tbody>
</table>

table {
	table-layout: auto;
  border: 1px solid black;
  border-collapse: separate; 
  border-spacing: 5px;
}

td{ 
  border: 1px solid black;
	border-collapse: collapse; 
  empty-cells: hide;
}

caption {
	caption-side: bottom;
}

// no js