TOC

This article has been localized into German by the community.

Tabellen:

Spaltenbreite ändern

Nun, da wir alles semantisch korrekt beschrieben haben, könnten wir auf die Idee kommen die Spaltenbreiten anzupassen, da bisher ja jede Spalte 33,3% breit ist. Aber was, wenn wir jetzt eine Spalte 40% breit haben möchten und die beiden weiteren Spalten jeweils 30% (da 40% + 30% + 30% = 100%)?

Damit wir dies tun können nutzen wir das <col> Element. Dieses Element wird zwischen dem <table> Tag und dem <thead> Tag platziert und wir nutzen das style Attribut um die Breite der Spalten zu definieren. Das <col> Element ist ein selbst schließendes Element und man benötigt eins für jede Spalte der Tabelle. Lasst uns ein Beispiel anschauen:

<table border="1" width="100%">
	<col style="width:40%">
	<col style="width:30%">
	<col style="width:30%">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>
		<th>Vitamin C</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>Apples</th>
		<td>98 ui</td>
		<td>8.4 mg</td>
	</tr>
	<tr>
		<th>Oranges</th>
		<td>295 ui</td>
		<td>69.7 mg</td>
	</tr>
	<tr>
		<th>Bananas</th>
		<td>76 ui</td>
		<td>10.3 mg</td>
	</tr>
	</tbody>
</table>

Auf diesem Weg kann man definieren wie breit die Spalten einer Tabelle sein sollen. Ich habe das style Attribut und den Wert "width:40%" als Beispiel genommen, aber idealerweise sollte man sie in seiner Stylesheet Datein machen, da dies alles nur für die Optik ist und nicht für die Funktion.

Wenn man ein Stylesheet verwendet könnte man drei Klassen erstellen auf denen man die Breite jeder Spalte festlegt. Das sähe dann im Endeffekt so aus:

<table border="1">
	<col class="column-one">
	<col class="column-two">
	<col class="column-three">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>

Was wir gelernt haben

  • Jede Tabelle beginnt und endet mit dem <table> Element
  • Man benutzt colspan und rowspan um Zellen zusammenzuführen / zu verbinden
  • Eine Tabelle ist geteilt in einen Kopfbereich (<thead> Element) und einen Körper- oder Datenbereich (das <tbody> Element)
  • Innerhalb des Kopf- und Datenbereichs ist die Tabelle in Reihen aufgeteilt die mittels des <tr> Elements definiert werden.
  • In HTML Tabellen werden keine Spalten definiert, stattdessen nutzt man <td> Elemente um individuelle Daten-Zellen zu definieren.
  • Wenn man eine Überschriftenzelle definieren muss, nutzt man das <th> Element statt des <td> Elementes.
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!