Haupt-Reiter

HTML-Tabellen

Man kann in HTML Tabellen definieren, um tabellarische Daten darzustellen. Obwohl teilweise dafür genutzt, sollte man unbedingt 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 sieht 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.

<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:

<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

Bewertung: 
0
Bisher keine Bewertung

Kommentare

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 Endtag mit dem der Beginn und das Ende beim auslesen der Datei beschrieben werden.

<table> Starttag
</table> Endtag

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> 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 </tr> notiert.

Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten.
Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet). 
<th> leitet eine Kopfzelle ein, <td> eine normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert. 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 Schlusstags generell vorgeschrieben). 

 

Dieser Aufbau sähe also wie folgt aus:

Eine Tabelle mit einem normalen Rahmen, in der ersten Zeile stünden Print & Digital und darunter CMYK und RGB:

Print      Digital
CMYK   RGB

<table border="1">

<tr>
<td>Print</td>
<td>Digital</td>
</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

Bild von Thomas Hagenhofer

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"

Bild von Martin Sedlmeier

Um vorweg Spaltenbreiten vorzugeben, kann man noch sowas machen.

<table border="1">
  <colgroup width="200" span="3"></colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

 

oder sowas

 

<table border="1">
<colgroup>
<col width="80">
<col width="100">
<col width="320">
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>

Diese Infos kann man auch in die <td>s reinschreiben. Sowas macht höchstens bei Monstertabellen mit 100 Spalten Sinn, welche dann an sich aber keinen Sinn machen.

----------------------------------------------------------------------------------------

Unterm Strich: Blödsinn, aber es gibts halt.

Bild von Martin Sedlmeier

Damit kann man per CSS die Tabellenköpfe und Füße einheitlich formatieren.

<table border="1">
<thead>
  <tr>
    <td>Berlin</td>
    <td>Hamburg</td>
    <td>M&uuml;nchen</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</tbody>
<tfoot>...</tfoot>

</table>

Ich habe das Satzfragment (Man kann in HTML Tabellen definieren, um tabellarische Daten darzustellen,)  "oder um Text und Grafik schön anzuordnen" gelöscht, da Tabellen ausschließlich für tabellarisch darzustellende Daten da sind. Grafiken oder Text "schön anzuordnen" ist eine reine Design- bzw. Layoutsache und damit Aufgabe von CSS. Tabellen sollen und dürfen für sowas nicht missbraucht werden, da hier wieder eine Mischung von Layout und Content stattfindet.

ganz meiner meinung!

Professionelles Webdesign verwendet keine Tables außer für den vorgesehen Zweck:

Eine Tabelle im Inhaltsbereich darzustellen.

 

Ich persönlich rate auch davon ab Width und Height, Text-Align, Border und Background im Table zu definieren. Also diese Styles im HTML zu definieren.

Das ist eigentlich nicht zeitgemäß und sollte über externes CSS definiert werden. Allein der Übersichtlichkeit halber. Lieber Klassen im Table vergeben.

Wichtig ist hier in erster Linie:

Das System mit Col- und Rowspan begreifen und korrekt anwenden können. Damit rechne ich in der Prüfung.