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 diese Weise kann man definieren, wie breit die Spalten einer Tabelle sein sollen. Hier siehst Du als Beispiel das "style"-Attribut mit dem Wert "width:40%", und zwar innerhalb der html-Datei. Allerdings solltest Du diese Angaben besser in Deinem Stylesheet machen, denn dieses soll alles enthalten, was das Aussehen (im Gegensatz zum Inhalt) betrifft.

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.