HTML/Tutorials/Einstieg/Kapitel3

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Preistabelle

So, das nächste, was Herr Meier sich notiert hatte, war die Preisliste. Wir bitten hier um große Nachsicht, denn wir gehören nicht zu den Menschen, die sich maßgeschneiderte Möbel kaufen können und wählen folglich einfach Phantasiepreise für diese Beispieltabelle – denn genau darum geht es: Wir erstellen eine Tabelle für die Preise.

Das englische Wort für "Tabelle" ist table und so heißt dann auch die HTML-Tabelle:

<table></table>

Wenn man das nur so notiert, wird der Browser erstmal nichts anzeigen, denn es gibt ja auch nichts anzuzeigen. Wenn man etwas in die Tabelle eintragen möchte, dann braucht man wiederum Elemente innerhalb von anderen Elementen: Die Elemente werden also wieder ineinander „verschachtelt“. Ganz außen ist natürlich das table-Element, das die ganze Tabelle umfasst:

Aufbau einer HTML-Tabelle

Darin gibt es das Element tr, das jeweils für eine Zeile der Tabelle (englisch table row – daher tr) steht. Da es mehrere Zeilen in der Tabelle gibt, gibt es folglich auch mehrere tr-Elemente.

Im ersten tr-Element ist das th-Element enthalten, das für die Kopfzeile steht. Das sind sozusagen die Überschriften für die Tabellenspalten (table header), damit man beim Betrachten auch weiß, was denn da eigentlich in der jeweiligen Spalte überhaupt drin steht.

In den folgenden tr-Elementen ist dann endlich das enthalten, weswegen wir die Tabelle überhaupt erstellen: Die Daten im td-Element (table data)!

Jetzt ist ein kleines Beispiel angebracht:

Beispiel: für eine Tabelle
<table>
  <tr>
    <th>Produkt</th>
    <th>Preis</th>
  </tr>
  <tr>
    <td>Schrank</td>
    <td>70 €</td>
  </tr>
  <tr>
    <td>Bett</td>
    <td>100 €</td>
  </tr>
</table>

Im Browser könnte diese Tabelle etwa so dargestellt werden:

Produkt Preis
Schrank 70 €
Bett 100 €

Nun, das ist eine recht einfache Tabelle. Natürlich kann man Tabellen mit riesigen Ausmaßen erstellen, wenn man möchte. Wir aber wollen es jetzt nicht zu kompliziert machen, deswegen bleiben wir lieber bei einer kleinen, übersichtlichen Tabelle. Viele weitere Details zur Arbeit mit Tabellen in HTML erhalten Sie übrigens unter HTML/Tabellen.

eine zweite Seite

Wenn Sie jetzt mit Ihrem Texteditor eine neue Seite für die Schreinerei Meier schreiben wollen, müssen Sie natürlich wieder von vorne anfangen, also:

  • Dokumenttyp (<!doctype html>)
  • html-Element
  • Kopf (head)
  • Zeichenkodierung (<meta charset="utf-8">)
  • Titel (title)
  • Körper (body)
  • Überschrift (hier: h1)
  • und dann endlich die Tabelle!

Hier also das ganze Dokument, dem wir den Namen preise.html geben:

Beispiel: für die Preistabelle der Schreinerei Meier So sieht's aus
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Preistabelle</title>
  </head>
  <body>
    <h1>Unsere nur zu Beispielzwecken erdachten Phantasie-Preise</h1>
    <table>
      <tr>
        <th>Produkt</th>
        <th>Preis</th>
      </tr>
      <tr>
        <td>Tisch</td>
        <td>50 €</td>
      </tr>
      <tr>
        <td>Schrank</td>
        <td>70 €</td>
      </tr>
      <tr>
        <td>Bett</td>
        <td>100 €</td>
      </tr>
    </table>
  </body>
</html>

Vielleicht ist Ihnen schon aufgefallen, dass wir inzwischen den Titel der Seite geändert haben. Das ist, wenn man mehrere Seiten anbietet, sehr sinnvoll, denn dann weiß der Nutzer mit einem Blick auf die Titelzeile des Browsers, wo er ist.

Ja, nun haben wir schon zwei Seiten. Doch bevor wir uns daran machen, eine dritte Seite zusammenzubasteln, nehmen wir eine kleine Auszeit und besprechen ein paar ganz grundsätzliche Dinge. Bitte umblättern!