Tabellen

Tabellen werden benötigt für
  • Stundenpläne,
  • Sprechzeiten,
  • Öffnungszeiten,
  • Trainingspläne,
  • Speisekarten,
  • Getränkekarten usw.
Sehen Sie die Tabelle in der nachfolgend abgebildeten Webseite?
Vorgabe.jpg
Das für die Gestaltung der Tabelle genutzte table-Tag ist ein häufig verwendetes Element in HTML-Seiten. Es befindet sich innerhalb des body-Tags der HTML-Seite, da es zu den sichtbaren Elementen der Seite gehört. Wie fügt man nun so eine Tabelle in eine HTML-Seite ein?

Grundstruktur einer Tabelle

Die Grundstruktur einer Tabelle entsteht durch die Verwendung der drei Tags table, tr und td.
Was bedeuten die genannten Tags?
  • table = engl. Wort für Tabelle
  • tr = engl. Abkürzung für table row = Tabellenzeile
  • td = engl. Abkürzung für table data = Tabelleninhalt
Dann gibt es noch ein viertes Tag, welches man anstelle von td bei Bedarf für Überschriften einsetzen kann:
  • th = engl. Abkürzung für table header = Tabellenkopf

Eine leere Tabelle (2 Zeilen, 2 Spalten)

Eine Tabelle schreibt man am besten so, dass man die Anzahl der Spalten und Zeilen auf einen Blick in der HTML-Datei erkennt. Das sieht z.B. wie folgt aus:
<table>
 
  <tr>
    <td>        </td>
    <td>        </td>
  </tr>
 
  <tr>
    <td>        </td>
    <td>        </td>
  </tr>
 
</table>

Tabellen-Beispiel: Bevölkerung in Millionen, Fläche in km2

  • Wie viele Spalten und Zeilen hat die folgende Tabelle?
<table>
 
  <tr>
    <th></th>
    <th>USA</th>
    <th>Deutschland</th>
    <th>China</th>
  </tr>
 
  <tr>
    <td>Bevölkerung (Millionen)</td>
    <td>310</td>
    <td>81</td>
    <td>1366</td>
  </tr>
 
  <tr>
    <td>Fläche (Quadratkilometer)</td>
    <td>9.826.675</td>
    <td>357.168</td>
    <td>9.571.302</td>
  </tr>
 
</table>
Quellen:

Weitere Informationen zu Tabellen siehe auch hier:

Ein Beispiel zur Formatierung von Tabellen mit CSS

Eine mögliche CSS-Formatierung für die weiter unten stehenden Tabellen

Untenstehend finden Sie Beispiele zur Formatierung Ihrer Tabellen. Detaillierte Einstellungen finden Sie z.B. unter:
table.typ1
{
      border:          medium solid red;
      border-collapse: collapse;
      margin:          1em;
      border-spacing:  1em;
}
 
table.typ2
{
      border:          medium solid green;
      border-collapse: separate;
      margin:          2em;
      border-spacing:  2em;
}
 
td
{
      border:          thin solid blue;
      padding:         5px;
}

Beispiele für Tabellen in HTML

<!DOCTYPE html>
<html>
<head>
 
  <title>2 Tabellen formatiert mit CSS</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 
  <style type="text/css">
 
    /* Hier stehen Ihre CSS-Formatierungen, Beispiele siehe weiter oben! */
 
  </style>
 
</head>
<body>
 
  <table class="typ1">
 
    <tr>
      <td rowspan=2>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
 
    <tr>
      <td colspan=2>la le lu</td>
    </tr>
 
  </table>
 
  <table class="typ2">
 
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
 
    <tr>
      <td>la</td>
      <td>le</td>
      <td>lu</td>
    </tr>
 
  </table>
 
</body>
</html>

Hintergrundbilder und -farben in den td-Tags verwenden

Passend zu den td-Tags kann man sich entsprechende Klassen einfallen lassen.
td.bild1
{
  background-image: url(meinbild.png);
}
 
td.bild2
{
  background: url(index.jpeg) top left no-repeat red;
}
 
td.blau
{
  background-color: blue;
}
Die Anwendung im HTML-Teil Ihrer Seite sieht dann wie folgt aus:
<td class="blau">la le lu</td>
<td class="bild1">ja ja ja wunderbar</td>
<td class="bild2>na na</td>
Wenn Sie Ihre Hintergrundbilder skalieren möchten, dann gibt es hier ein paar brauchbare Tipps zur Eigenschaft
background-size (px, proportional, cover, contain, ...)

Beseitigen von Zwischenräumen zwischen den td-Elementen

Folgende Eigenschaften werden in CSS der Formatierung der td-Tags hinzugefügt:

Ohne Zwischenraum:
border-collapse: collapse;
Mit Zwischenraum:
border-collapse: separate;

Größe von Zellen

Mit width und height kann man für das td-Tag die Größe der Tabellenzellen festlegen:
   td
   {
     height:           100px;
     width:            100px;
     background-color: yellow;
   }
Selbstverständlich können Sie auch mit verschiedenen Klassen (class="td1" bzw. class="td2") oder IDs (id="td3" bzw. "td4") unterschiedliche Formatierungen für verschiedene td-Tags vornehmen!

Spalten formatieren

Sobald eine Tabelle gross wird und einheitliche Formatierungen für mehrere Spalten benötigt werden, kommen die Tags colgroup und col zum Einsatz, siehe folgendes Beispiel:
...
    <style>
 
        body
        {
          text-align:       center;
        }
 
        .td1
        {
          background-color: red;
          width:            150px;
        }
 
        .td2
        {
          background-color: yellow;
          width:            100px;
        }
 
    </style>
...
    <table>
 
      <colgroup>
        <col class="td1">
        <col class="td1">
        <col class="td2">
      </colgroup>
 
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
 
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
 
       <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
 
    </table>
...
 

Das CSS Box Model

Abstände können mit CSS sehr komfortabel eingestellt werden. Voraussetzung hierfür ist das Verständnis des CSS Box Models.
Drucken Sie sich die Datei CssBoxModel.pdf aus, falls der Lehrer sie noch nicht verteilt hat.
Studieren Sie die Hinweise auf der angegebenen w3.org-Seite und machen Sie sich ggf. ergänzende Notizen auf Ihrem Ausdruck!

Kurzreferenz:
CssBoxModel.PNG

Aufgabe CCS-Box-Model 1:

Wer im Zusammenhang mit Tabellen mit den möglichen Einstellungen des Box Modells experimentiert hat, macht z.B. folgende Erfahrungen:
(NOTIEREN SIE IHRE ERFAHRUNGEN mit CSS-Einstellungen von padding, margin, border bei den Tags table und td!)
  1. ...
  2. ...
  3. ...
  4. usw.

Aufgabe CSS-Box-Model 2:
Beantworten Sie folgende Fragen!
  1. Welche Auswirkungen haben margin und padding auf die Größe einer Tabelle? Experimentieren Sie z.B. mit folgenden CSS-Einstellungen. Verändert sich z.B. die Größe der folgenden Tabelle, wenn die Werte für margin und padding verändert werden?
        table
        {
          padding:          0px;
          margin:           0px;
          background-color: yellow;
          width:            200px;
          height:           200px;
        }
  2. Welche Auswirkung haben margin und padding auf den farbigen Hintergrund eines Textes? Die folgende CSS-Klasse können Sie z.B. für Textformatierungen mit dem Tag span verwenden (Mein Text). Was passiert, wenn der Text in einem td-Tag steht? Wann ist der komplette Hintergrund des td-Tags farbig, wann ist nur der Hintergrund des Textes farbig?
        .textformat
        {
          background-color: #FF7373;
        }
  3. ...

Zusammenfassen von Tabellenzellen (TD = table data)

Übereinander liegende Zellen zusammenfassen:
<table>
 
  <tr>
    <td rowspan=2>        </td>
    <td>                  </td>
    <td>                  </td>
    <td>                  </td>
  </tr>
 
  <tr>
    <!-- die erste Spalte fehlt,
         weil rowspan=2 in vorheriger Zeile -->
    <td>        </td>
    <td>        </td>
    <td>        </td>
  </tr>
 
</table>
Nebeneinander liegende Zellen zusammenfassen:
<table>
 
  <tr>
    <td colspan=2>        </td>
 
    <!-- die zweite Spalte fehlt hier weil
         colspan=2 in erster Spalte -->
    <td>                  </td>
    <td>                  </td>
  </tr>
 
  <tr>
    <td>        </td>
    <td>        </td>
    <td>        </td>
    <td>        </td>
  </tr>
 
</table>
 
 
 
 

Tabellen auf einer HTML-Seite zentrieren

Für Ihre Lösung der obigen Aufgaben benötigen Sie ggf. eine Idee, wie man Tabellen in einer HTML-Seite zentrieren kann.
Das funktioniert wie im folgenden Link beschrieben leider nicht mittels text-align, sondern über das Setzen von margin-right und margin-left auf den Wert auto.
table
{
  margin-left:  auto;
  margin-right: auto;
}
siehe auch:


Header, Footer und Body in Tabellen

Es gibt die Möglichkeit, separate Bereiche für einen Kopf- und einen Fußbereich einer Tabelle anzulegen.
Dieses ist sinnvoll für eigene Formatierungen in CSS und für das Ansprechen von Tabellenelementen via Javascript.
Eine gute Anleitung für die Verwendung der Tags tbody, thead und tfoot finden Sie unter:

Werkzeug-Unterstützung bei der CSS-Formatierung von HTML-Tabellen

Mit dem "HTML and CSS Table Border Style Wizard" auf der folgenden Seite können Sie sich das Aussehen Ihrer Tabelle "zusammenklicken".
SomaconBorderStyleWizard.PNG




...


Weitere Informationen zur Vertiefung

z.B. warum sollten Tabellen nicht für ein Seitenlayout verwendet werden?