HTML-Tabellen
Man kann in HTML Tabellen definieren, um tabellarische Daten darzustellen, oder um Text und Grafik schön anzuordnen. Allerdings sollte man auf die Layoutgestaltung mit Tabellen verzichten (siehe barrierefreies Webdesign).
Beispiel:
<table>
<tr>
<td>Print</td>
<td>Digital</td>
</tr>
</table>
Erläuterung
Wie in HTML üblich gibt es bei dem Tabellenaufbau einen Start- und einen End-Tag mit dem der Beginn und das Ende beim auslesen der Datei beschrieben werden.
<table> Start-Tag
</table> End-Tag
Diese Tabelle hat normalerweise einen Rahmen (border), will man diesen unsichtbar machen muss man border="0" angeben. Möchte man einen dickeren Rahmen kann man natürlich auch Werte eingeben (1= normaler Rahmen, 2, 3, ...) Ohne Rahmen sähe es eingebunden dann folgendermaßen aus:
<table border="0">
tr-Tag
<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert <td>Print</td> (td = table data = Tabellendaten). Am Ende einer Tabellenzeile wird ein abschließendes Tag notiert </tr> .
td-Tag oder/und th-Tag
Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten.
Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet).
<th> leitet eine Kopfzelle ein (th = table header = Tabellenkopf)
<td> leitet eine normale Datenzelle (td = table data = Tabellendaten)
Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert (in diesem Beispiel "Print" und "Digital")
Obwohl die zugehörigen End-Tags </th> bzw. </td> offiziell optional sind, ist dringend zu empfehlen, sie immer und in jedem Fall zu notieren (in XHTML beispielsweise sind Schluss-Tags generell vorgeschrieben).
Aufbaubeispiel (s.o. nur diesmal mit zwei Zeilen)
Das unten stehende Beispiel siehtT wie folgt aus:
Eine Tabelle mit einem normalen Rahmen, in der ersten Zeile stünden Print & Digital in fett (als Überschrift/Header <th>) und darunter in normaler Schrift (<td>) CMYK und RGB:
Print Digital
CMYK RGB
<table border="1">
<tr>
<th>Print</th>
<th>Digital</th>
</tr>
<tr>
<td>CMYK</td>
<td>RGB</td>
</tr>
</table>
Desweiteren lassen sich natürlich auch Größe der Tabelle sowie Textanordnung in der Tabelle definieren siehe Quelle: http://de.selfhtml.org/html/tabellen/aufbau.htm
Colspan & Rowspan
Durch Colspan (Anzahl der Spalten) lässt sich erreichen, dass sich eine Zelle über mehrere Spalten hinweg erstreckt (colspan = column span = Spalten spannen).
In unserem Beispiel sähe das so aus, wenn die Überschrift "Farbräume" über beiden Spalten ("CMYK" und "RGB") stehen soll.
Farbräume
CMYK RGB
<table border="1">
<tr>
<th colspan="2">Farbräume</th>
</tr>
<tr>
<td>CMYK</td>
<td>RGB</td>
</tr>
</table>
Durch colspan="2" geben wir an über wieviele Spalten sich die Zeile "Farbräume" erstrecken soll. Da wir 2 Spalten haben, also die 2.
Durch Rowspan (Anzahl der Zeilen) lässt sich erreichen, dass eine Zelle in einer Spalte sich über mehrere Zeilen erstreckt (rowspan = Zeilen spannen).
Zurück zu unserem Beispiel:
CMYK
Farbräume
RGB
<table border="1">
<tr>
<th rowspan="2">Farbräume</th>
<td>CMYK</td>
</tr>
<tr>
<td>RGB</td>
</tr>
</table>
Wie man sieht, wird immer der Zelle, die sich über andere Spalten oder Zeilen erstrecken soll, das jeweilige Attribut zugeschrieben.
Quelle: http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm
Kommentare
Hallo,
habe den Beitrag mal in die Wikiseite selbst übernommen. Kann jede/r Nutzer/in selbst machen über "Bearbeiten".
Viele Grüße
Thomas
Projektmitarbeiter "Mediencommunity 2.0"