Tabellen

Tabellen

Für viele Daten ist die Darstellung in Tabellen sinnvoll. Auch in HTML gibt es Tags speziell für Tabellen.

Wie du später noch erfahren wirst wurden Tabellen in HTML sehr häufig auch als Element zu Ausrichtung genutzt und ganze Seiten in Tabellen ausgerichtet.

Heutzutage findet diese Technik jedoch weniger Anwendung, da für die Ausrichtung kompletter Webseiten div Tags genutzt werden sollen, die nicht wie table eine andere semantische Bedeutung haben.

Was ist eine Tabelle?

Eine Tabelle ist eine Strukturmöglichkeit um komplizierte Dinge einfach zu visualisieren.

Eine Tabelle besteht aus Zeilen (englisch rows), und aus Spalten (englisch cols).

Man kann sich eine Tabelle auch wie ein Regal mit mehreren horizontalen und vertikalen Fächern vorstellen.

Aber erstmal müssen wir wissen wie wir dem Browser beibringen können das eine Tabelle beginnt.

Das geschieht mit dem Tag <table>. Beendet wird die Tabelle mit dem Endtag </table>.

Zeilen in HTML - Tabellen

Eine Zeile beginnt mit dem <tr> Tag (table row). Diese Zeile kann mehrere Zellen enthalten und wird mit </tr> beendet.

Zellen in HTML Tabellen

In den verschiedenen Zeilen kann man mit (table data) eine neue Zelle beginnen.

muss nicht beendet werden, sollte es aber (bei XHTML erstrecht).

Die einfachste Tabelle mit einer Zeile und einer Zelle würde in HTML also so aussehen:

 

<table>
   <tr>
      <td>Meine Tabelle </td>
   </tr>
</table>



Wie würde eine Tabelle mit einer Reihe aber zwei Zellen aussehen?

<table>
   <tr>
      <td>Zelle 1 </td>
      <td>Zelle 2 </td>
   </tr>
</table> 

Und einer Tabelle mit zwei Zeilen und jeweils einer Zelle?

<table>
   <tr>
      <td>Zeile 1</td>
   </tr>
   <tr>
      <td>Zeile 2</td>
   </tr>
</table>


Bei Tabellen ist einer sehr komplexe verschachtelung möglich. Probier doch mal aus wie man 2 Reihen mit jeweils 2 Zellen erstellt.

<table>
   <tr>
      <td>Zeile 1 / Zelle 1</td>
      <td>Zeile 1 / Zelle 2</td>
   </tr>
   <tr>
      <td>Zeile 2 / Zelle 1</td>
      <td>Zeile 2 / Zelle 2</td>
   </tr>
</table> 



Kopfzelle

Statt dem <td> Tag kann man auch den <th> Tag verwenden. <th> bedeutet table header und ist für die Kopfzeile einer Tabelle gedacht. Zeichen innerhalb des <th> Tag werden anders dargestellt als
Zeichen in <td> Tags.

Für den <th> Tag gilt ebenfalls das ein schließender Tag nicht erfordelich, aber zu empfehlen ist.

Manchmal möchten wir aber auch Zellen in einer Tabelle verbinden. Auch daran wurde in HTML gedacht.

Zellen verbinden

Dazu gibt es mehrere Möglichkeiten. Die eine Möglichkeit ist Zellen in einer Zeile zu verbinden, die andere Zellen in einer Spalte zu verbinden.


Um das das zu realisieren gibt es für den Tag ein Attribut. Für mehrere Zellen in einer Spalten ist das Attribut "colspan" vorgesehen. Für Zellen über mehrere Zeilen das Attribut "rowspan".

 

Nachdem umschreiben hätten wir also folgenden HTML Quelltext:

<table>
   <tr>
      <td colspan="2">Die erste Zelle über zwei Spalten</td>
   </tr>
   <tr>
      <td>Zeile 2 / Zelle 1</td>
      <td>Zeile 2 / Zelle 2</td>
   </tr>
 </table> 



Was müssten wir mit dem ersten Beispiel machen, damit wir die Zellen der ersten Spalte verbinden, die 1. Zelle also über 2 Zeilen geht?

Wir würden folgenden HTML Quelltext bekommen:

<table>
   <tr>
      <td rowspan="2">Die erste Zelle über zwei Zeilen</td>
      <td>Zeile 1 / Zelle 2</td>
   </tr>
   <tr>
      <td>Zeile 2 / Zelle 2</td>
   </tr>
</table> 

Es sind noch mehr Kombinationen möglich und wie man sicher sieht kann es kompliziert werden, wenn man so eine Tabelle im Kopf nachvollziehen möchte. Auch hier ist es ein guter Tipp, wenn man das ein oder andere einfach mal ausprobiert.


Bis jetzt sind wir zwar schon in der Lage unseren Text bunt zu machen, aber es wäre ja auch schön wenn wir Bilder in unsere HTML Seite einbauen könnten.
Wie wir schon gelernt haben kann CSS genutzt werden um webseiten visuell ansprechend zu gestalten. Neben semantischen HTML Element die wir bislang kennengelernt haben kennt HTML auch tags, die zur logischen Gruppierung dienen. Diese sind div and span.

Im nächsten Abschnitt wird erklärt, wie div and span genutzt werden können um deine Webseite logisch zu gruppieren und mittels CSS zu stylen.

Navigation