Proprietatea empty-cells

Proprietatea empty-cells indică browserului cum să afișeze fundalul și bordura celulelor td sau celulelor th HTML tabelului goale: să le arate sau nu.

O celulă este considerată goală în următoarele cazuri: nu există niciun fel de caractere, în celulă se conține doar spațiu (unul sau mai multe), transfer de linie sau caracter de tabulare, sau proprietatea visibility este setată ca hidden.

Pentru a face o celulă negoală, dar în același timp fără text vizibil, se utilizează următoarea metodă: în celulă se scrie un spațiu neruptibil  .

Proprietatea nu funcționează, dacă este setat border-collapse cu valoarea collapse.

Sintaxă

selector {
	empty-cells: show | hide;
}

Valori

Valoare	Descriere
`show`	Fundalul și bordura sunt afișate la o celulă goală.
`hide`	Fundalul și bordura nu sunt afișate la o celulă goală.

Valoarea implicită: show.

Exemplu . Valoarea show

Acum în tabel unele celule sunt goale, dar totuși au bordură și fundal:

<table>
	<tr>
		<td>celulă</td>
		<td></td>
		<td>celulă</td>
	</tr>
	<tr>
		<td></td>
		<td>celulă</td>
		<td></td>
	</tr>
	<tr>
		<td>celulă</td>
		<td>celulă</td>
		<td>celulă</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: show;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

Exemplu . Valoarea hide

Iar acum celulele goale nu vor avea fundal și bordură:

<table>
	<tr>
		<td>celulă</td>
		<td></td>
		<td>celulă</td>
	</tr>
	<tr>
		<td></td>
		<td>celulă</td>
		<td></td>
	</tr>
	<tr>
		<td>celulă</td>
		<td>celulă</td>
		<td>celulă</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: hide;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

Vedeți și

pseudoclassa empty,
care stabilește cum va arăta un element gol