Grundlagen zu Tabellen

HTML Tabellen sollten nur zum Rendern von Daten benutzt werden, die auch in eine Tabelle gehören. Ich erwähne das, da bisher Tabellen auch für das Layout von HTML Seiten verwendet wurden, obwohl das nie die Idee dahinter war. Viele Webdesigner nutzen Tabellen für das Layout, aber es gibt zwei Hauptgründe die dagegensprechen:

• Es ist semantisch inkorrekt
• Tabellen sind nicht so flexibel wie z.B. div's (oder andere semantische Elemente)

Die Elemente einer Tabelle sind sehr umfassend, aber das erste was man kennen muss ist das <table> Element. Dies ist das erste Element und definiert, dass die folgenden Elemente innerhalb einer Tabelle liegen.

Wenn man Tabellen erstellt, ist das HTML in Reihen (row) und Zellen (cell) strukturiert (es gibt kein Tag für Spalten (columns) sondern nur Zeilen.

Der Tag für Zeilen ist <tr> (Abkürzung für table row = Tabellenzeile) und der Tag für jede Zelle ist <td> (Abkürzung für table data = Tabellendaten) und dort steht der eigentliche Inhalt der Tabelle.

Bevor man anfängt seite Tabelle zu "be-"schreiben, sollte man genau wissen wie diese aussehen soll -das erleichtert einem das Leben ungemein. Wir beginnen mit einer einfachen Tabelle mit drei Spalten und vier Reihen.

<table border="1" width="100%">
	<tr>
			<td>Row 1, cell 1</td>
			<td>Row 1, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
		<tr>
			<td>Row 2, cell 1</td>
			<td>Row 2, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
		<tr>
			<td>Row 3, cell 1</td>
			<td>Row 3, cell 2</td>
			<td>Row 3, cell 3</td>
		</tr>
		<tr>
			<td>Row 4, cell 1</td>
			<td>Row 4, cell 2</td>
			<td>Row 4, cell 3</td>
		</tr>
</table>

Wie man sehen kann sind die <td> Tags in die <tr> Tags eingebettet und das heißt, dass jede einzelne Zelle in einer Reihe innerhalb des <tr> Elementes angesiedelt sein muss.

Achtung!

Wie man sieht habe ich das border-Attribut im <table> Tag verwendet, damit man im Beispiel auch die Tabelle sehen kann. Aber im richtigen Webdesign sollte man das nicht machen, da Tabellenränder ein Job für CSS ist und darüber definiert werden sollte!