inf-schule | Textbereich » Tabellen im Textbereich

Tabellen im Textbereich

Tabellen sind ein zentrales Element um Daten auf einer Website ansprechend darzustellen. Die Tabellen auf inf-schule.de passen sich ihrem Inhalt bis zur maximalen Seitenbreite an und stehen zentriert im Text.

Eine einfache Tabelle ohne Klasse:

<table>
	<thead>
		<tr>
			<th>Eins</th>
			<th>Zwei</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Inhalt in Spalte 1, Zelle 1</td>
			<td>Zelle (1,2)</td>
		</tr>
		<tr>
			<td>Zelle (2,1)</td>
			<td>Zelle (2,2)</td>
		</tr>
	</tbody>
</table>

Eins	Zwei
Inhalt in Spalte 1, Zelle 1	Zelle (1,2)
Zelle (2,1)	Zelle (2,2)

Eine Tabelle mit zentriertem Text:

Es ist möglich den Inhalt von Tabellen zu zentrieren. Dazu muss die CSS-Klasse textZentriert verwendet werden. Die Klasse kann an jeder Stelle innerhalb einer Tabelle verwendet werden um einzelne Zeilen, einzelne Zellen, alle Tabellenköpfe oder alle Inhaltszellen sowie die ganzen Tabelleninhalte zentriert auszurichten.

Ganze Tabelleninhalte zentriert:

<table class="textZentriert">
	<thead>
		<tr>
			<th>Eins</th>
			<th>Zwei</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Inhalt in Spalte 1, Zelle 1</td>
			<td>Zelle (1,2)</td>
		</tr>
		<tr>
			<td>Zelle (2,1)</td>
			<td>Zelle (2,2)</td>
		</tr>
	</tbody>
</table>

Eins	Zwei
Inhalt in Spalte 1, Zelle 1	Zelle (1,2)
Zelle (2,1)	Zelle (2,2)

Tabellenköpfe zentriert:

<table>
	<thead class="textZentriert">
		<tr>
			<th>Eins</th>
			<th>Zwei</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<tr>
				<td>Inhalt in Spalte 1, Zelle 1</td>
				<td>Zelle (1,2)</td>
			</tr>
			<tr>
				<td>Zelle (2,1)</td>
				<td>Zelle (2,2)</td>
			</tr>
		</tr>
	</tbody>
</table>

Eins	Zwei
Inhalt in Spalte 1, Zelle 1	Zelle (1,2)
Zelle (2,1)	Zelle (2,2)

Tabellenzellen (ohne Köpfe) zentriert:

<table>
	<thead>
		<tr>
			<th>Eins</th>
			<th>Zwei</th>
		</tr>
	</thead>
	<tbody class="textZentriert">
		<tr>
			<tr>
				<td>Inhalt in Spalte 1, Zelle 1</td>
				<td>Zelle (1,2)</td>
			</tr>
			<tr>
				<td>Zelle (2,1)</td>
				<td>Zelle (2,2)</td>
			</tr>
		</tr>
	</tbody>
</table>

Eins	Zwei
Inhalt in Spalte 1, Zelle 1	Zelle (1,2)
Zelle (2,1)	Zelle (2,2)

Tabellenzelle (2,1) zentriert (einzelne Zelle):

<table>
	<thead>
		<tr>
			<th>Eins</th>
			<th>Zwei</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<tr>
				<td>Inhalt in Spalte 1, Zelle 1</td>
				<td>Zelle (1,2)</td>
			</tr>
			<tr>
				<td class="textZentriert">Zelle (2,1)</td>
				<td>Zelle (2,2)</td>
			</tr>
		</tr>
	</tbody>
</table>

Eins	Zwei
Inhalt in Spalte 1, Zelle 1	Zelle (1,2)
Zelle (2,1)	Zelle (2,2)