Und weiter geht’s..

Manchmal werden sie einfach noch gebraucht, auch wenn man sie eigentlich überhaupt nicht leiden kann.. die Rede ist nicht von Frauen sondern natürlich von Tables. Im Zusammenhang mit Tables gibt es einiges zu wissen und kennen zu lernen. Neben den ganzen Elementen und Hierarchien, die man damit aufbauen kann, gibt es auch eine ganze Reihe von CSS Eigenschaften, die speziell Tables beeinflussen. Eine davon, nämlich empty-cells, stelle ich euch heute vor.

Browserunterstützung

Browser
ab Version	1.0	1.2	4.0	1.0	8.0

Eigentlich schon erstaunlich wie wenig der IE vor Version 8 überhaupt beherrscht hat, empty-cells hat jedenfalls nicht dazu gehört. Aber da es sich hier eh nur um eine kosmetische Eigenschaft geht, ist das noch vertretbar. Was macht empty-cells? Wie der Name schon andeutet, handelt es sich hier um Zellen einer Tabelle, die durch CSS ausgeblendet werden können, wenn sie leer sind.

Der dafür zuständige Wert lautet hide, um leere Zellen wieder anzuzeigen, muss der Wert auf show gestellt werden. show ist außerdem der Standardwert für empty-cells.

Beispiel

Schauen wir uns die Sache an einer Beispieltabelle an:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
	<thead>
		<tr>
			<th>Browser</th>
			<th>CSS3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Firefox</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>Chrome</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>IE</td>
			<td></td>
		</tr>
	</tbody>
</table>
<p>(..jede Menge Tags, ich weiß..)</p>

Ergebnis

Raus kommt eine normale Tabelle, eventuelle Borders und Hintergründe werden auch für leere Zellen gerendert, jetzt das Ganze mit empty-cells:hide.

1
2
3

table {
	empty-cells:hide;
}

Ergebnis

Und weg ist die leere td! Naja nicht ganz weg, aber halt versteckt. Sie bleibt immer noch im Markup vorhanden und behält ihre Ausmaße. Man muss auch keine Angst haben, dass floatende Elemente in die Lücken rutschen oder sowas in der Art.