Kollaborative Tags (Tabellen & Listen)
Tabellen
Es gibt eine Reihe von Tags, die "zusammenarbeiten", um komplexere Effekte zu erzielen. Ein Beispiel dafür bietet die Definition von Tabellen:
- Jede Tabelle wird durch <table> ... </table> umgrenzt.
- Innerhalb jeder Tabelle wird jede Zeile durch <tr> ... </tr> begrenzt. (tr= "table row")
- Innerhalb jeder Zeile wird jedes Feld durch <td> ... </td> umrahmt. (td = table definition)
Also beispielsweise:
<table>
<tr><td>1. Zeile, 1. Spalte </td><td>1. Zeile, 2. Spalte</td></tr>
<tr><td>2. Zeile, 1. Spalte </td><td>2. Zeile, 2. Spalte</td></tr>
</table>
was folgende Darstellung durch den Browser ergibt:
| 1. Zeile, 1. Spalte | 1. Zeile, 2. Spalte |
| 2. Zeile, 1. Spalte | 2. Zeile, 2. Spalte |
Tabellen gewinnen ein wesentlich anderes Aussehen, wenn Sie mit einem Rahmenumgeben werden. Das geschieht durch das Attribut border im table-tag, das als Wert die Dicke des Rahmens in Pixeln erwartet.
Also beispielsweise:
<table border="3">
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr>
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr>
</table>
was folgende Darstellung durch den Browser ergibt:
| Erste Zeile, Erstes Spalte | Erste Zeile, Zweite Spalte |
| Zweite Zeile, Erstes Spalte | Zweite Zeile, Zweite Spalte |
Beziehungsweise:
<table border="20">
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr>
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr>
</table>
was folgende Darstellung durch den Browser ergibt:
| Erste Zeile, Erstes Spalte | Erste Zeile, Zweite Spalte |
| Zweite Zeile, Erstes Spalte | Zweite Zeile, Zweite Spalte |
Innerhalb von Zeilen können manche Eintragungen, z.B. Überschriften, mehrere Spalten überspannen. Dies wird duch das colspan - Attribut beim td-Tag vereinbart, das als Wert die Anzahl der zu überspannenden Spalten erwartet.
Also beispielsweise:
<table border="3">
<tr><td colspan="2">Eine Überschrift</td></tr>
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr>
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr>
</table>
was folgende Darstellung durch den Browser ergibt:
| Eine Überschrift | |
| Erste Zeile, Erstes Spalte | Erste Zeile, Zweite Spalte |
| Zweite Zeile, Erstes Spalte | Zweite Zeile, Zweite Spalte |
Innerhalb von Tabelleneinträgen sind die bisher im laufenden Text besprochenen Auszeichnungen voll anwendbar.
Also beispielsweise:
<table border="3">
<tr><td colspan="2"><i><center>Eine Überschrift</center></i></td></tr>
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr>
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr>
</table>
was folgende Darstellung durch den Browser ergibt:
| Eine Überschrift | |
| Erste Zeile, Erstes Spalte | Erste Zeile, Zweite Spalte |
| Zweite Zeile, Erstes Spalte | Zweite Zeile, Zweite Spalte |
Der Tabellen-Kopf
Oft ist es sinnvoll, den Tabellenkopf (z.B. die erste Zeile) gesondert zu formatieren oder formatiert auszugeben. Dazu gibt es grundsätzliche mehrere Möglichkeiten. Eine einfache ist:
<table border="2">
<tr><th>Erste Zeile, Erstes Spalte</th><th>Erste Zeile, Zweite Spalte</th></tr>
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr>
</table>
was folgende Darstellung durch den Browser ergibt:
| Erste Zeile, Erstes Spalte | Erste Zeile, Zweite Spalte |
|---|---|
| Zweite Zeile, Erstes Spalte | Zweite Zeile, Zweite Spalte |
Weitere Informationen zum Thema Tabellen auf w3schools.
Listen
Analog zu den Tabellen arbeiten auch die Tags zum Erstellen von Nummerierungen und Aufzählungen (Listen) zusammen: So arbeitet <ol> ... </ol> mit den dazwischen liegenden <li> ... </li> (list item) Tags zusammen, um eine nummerierte Liste (ordered list) aufzubauen: HTML Code: Kategorien von Tags, die wir besprochen haben:
<ol>
<li>Tags zum Formatieren von Text</li>
<li>Tags zum Einbinden von Bildern</li>
<li>Tags zum Erzeugen von Tabellen</li>
</ol>
wird durch Browserinterpretation zu:
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
Wird <ol> ... </ol> durch <ul> ... </ul> ("unordered list") ersetzt, wird im Browser folgendes dargestellt:
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
Die meisten Tags akzeptieren innerhalb des Paares spitzer Klammern sogenannte Attribute, die immer die Form: "Attribut-Name" "Ist-gleich-Zeichen" "Attribut-Wert" (name="value") haben und ggf. durch Leerstellen voneinander getrennt sind. Sie legen Variationen der Art und Weise fest, in der ein bestimmtes Tag bearbeitet wird. Was mit Variationen gemeint ist, wird am besten durch Beispiele deutlich:
<ol type="1">
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
<ol type="1" start="3">
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
<ol type="I">
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
<ol type="I" start="57">
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
<ol type="i">
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
<ol type="A">
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
<ul type="disc">
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
<ul type="square">
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
<ul type="circle">
- Tags zum Formatieren von Text
- Tags zum Einbinden von Bildern
- Tags zum Erzeugen von Tabellen
Einen Sonderfall stellen Description Lists dar, die zu jedem Listeneintrag eine eingerückte Beschreibung ermöglichen:
- BSI
- -Basissysteme der Informationsverarbeitung
- BIT
- -Basisinformationstechnologie
<dl>
<dt>BSI</dt>
<dd>- Basissysteme der Informationsverarbeitung </dd>
<dt>BIT</dt>
<dd>- Basisinformationstechnologie</dd>
</dl>
Weitere Informationen zum Thema Listen auf w3schools.