Tabelle

Auf Internetseiten nutzt man Tabellen um Seiten oder Daten strukturiert anzuzeigen.

HTML-Codes zum erstellen einer Tabelle

Um eine Tabelle in einer HTML-Seite zu ertellen braucht man die folgenden Tags:

Tag	Bedeutung
notwendig
<table>	Tabelle
<tr>	Tabellenzeile
<td>	Tabellenzelle
optional
<th>	Tabellen-Überschrift
<thead>	Tabellen-Kopf
<tbody>	Tabellen-Körper
<tfoot>	Tabellen-Fuß

Der Aufbau einer Tabelle in HTML kann so aussehen:

 <table border="1" style="border-collapse:collapse;">
    <tr>
      <th>
        Spaltenüberschrift 1
      </th>
      <th>
        Spaltenüberschrift 2
      </th>
    </tr>
    <tr>
      <td>
        Text in Zelle 1
      </td>
      <td>
        Text in Zelle 2
      </td>
    </tr>
    <tr>
      <td>
        Text in Zelle 3
      </td>
      <td>
        Text in Zelle 4
      </td>
    </tr>
  </table>

<table> und </table> umschließen die gesamte Tabelle. Von <tr> bis </tr> geht jeweils eine Zeile, also alles was nebeneinander steht. Tabellenüberschriften stehen dann jeweils direkt zwischen <th> und </th>. Normale Zellen werden genauso definiert wie Tabellenüberschriften. Verwendet wird hier nur <td> und </td> statt <th> und </th>. Gruppen von Zeilen (tr) kann man dann noch in thead, tbody oder tfoot zusammenfassen, was man aber zumindest für den Anfang noch nicht braucht, da es auch optisch keinen Unterschied macht (für XML/XHTML, Javascript und/oder CSS unter Umständen von Bedeutung). Die Angaben border="1" und style="border-collapse:collapse;" bewirken den Rahmen, der hier nur zur Verdeutlichung dienen soll. Man kann sie auch weglassen wenn man keinen Rahmen will.

Die Tabelle würde dann so aussehen:

Spaltenüberschrift 1	Spaltenüberschrift 2
Text in Zelle 1	Text in Zelle 2
Text in Zelle 3	Text in Zelle 4

Tabellen im Wk-Chat

Im Chat kommen an mehreren Stellen Tabellen vor. Zum Beispiel die Smilies oder auch die Topliste werden in Tabellen dargestellt. Auch die User in der Onlineliste und die gesendeten Texte im Chatstream stehen in Tabellen, was man aber äußerlich nicht sieht. Interesannter ist allerdings die Ausrichtung eigener Inhalte in Tabellen, wie zum Beispiel die Eingabefelder auf einer eigenen Loginseite. So können trotz unterschiedlich langer Beschreibungen der Felder (Name, Passwort, Gast) die Eingabefelder auf einer Linie untereinander angezeigt werden.

Tabellen im Wiki

Hier im Wiki kann man auch Inhalte strukturiert in Tabellen anzeigen, wie zum Beispiel die obige Übersicht der möglichen HTML-Tags für eine Tabelle. Ein recht umfangreiches Anwendungsbeispiel ist der Artikel Inhalt. Die gesamte Tabelle wird durch {| und |} umschlossen (Vergleich <table> und </table> bei HTML).

Tabellenzeilen (Vergleich <tr> und </tr>) werden jeweils durch |- eingeleitet.

Eine Tabellenzelle (Vergleich <td> und </td>) beginnt immer jeweils mit | am Zeilenanfang des Codes oder || ohne Zeilenumbruch.

Tabellenüberschriften (Vergleich <th> und </th>) können statt | durch (normale Zelle) ! am Zeilenanfang, bzw. !! in der gleichen Codezeile eingeleitet werden.

Damit sieht der Wiki-Code für die obige Beispieltabelle so aus: {| border="1" style="border-collapse:collapse;" |Text in Zelle 1 |Text in Zelle 2 |- |Text in Zelle 3 |Text in Zelle 4 |}

Mehr dazu auch unter WKwiki:Hilfe.