Modul 5

Tabellen mit sichtbarem Rahmen

TAGESZIELIch kann eine kleine Tabelle erstellen, deren Zellen sichtbare Rahmen haben.

Eine Tabelle passt zu Angaben, die nach denselben Merkmalen verglichen werden: zum Beispiel Tag, Aktivität und Dauer. Eine waagrechte Reihe heißt Zeile, eine senkrechte Reihe Spalte. Ein einzelnes Feld ist eine Zelle.

Eine Tabelle entsteht Zeile für Zeile

Zeichne zuerst eine kleine Tabelle auf Papier. Schreibe oben die Begriffe Tag, Aktivität und Dauer. Darunter steht zum Beispiel Dienstag, Training und 45 Minuten. Jedes Feld in dieser Zeichnung wird später eine Zelle im HTML-Code. So weißt du vor dem Tippen, welche Angaben zusammengehören.

Im Code beginnt eine Zeile mit <tr>. Darin stehen die Zellen nebeneinander. In der Kopfzeile verwendest du th, in den übrigen Zeilen td. Erst wenn alle Zellen einer Zeile fertig sind, schließt du mit </tr>. Danach beginnt die nächste Zeile.

Warum der Rahmen an jede Zelle gehört

Ohne Gestaltung kann eine Tabelle wie Text ohne Linien aussehen. Die Angabe border: 1px solid black; zeichnet einen dünnen schwarzen Rahmen. Damit jedes einzelne Feld umrandet ist, steht diese Angabe an jedem th und td. Nur ein Rahmen um table reicht für die inneren Linien nicht.

border-collapse: collapse; führt benachbarte Rahmen zu einer gemeinsamen Linie zusammen. Übernimm diese Schreibweise zunächst genau. Wenn du eine Spalte ergänzt, braucht jede Zeile eine zusätzliche Zelle. Eine dritte Spalte bedeutet also drei Zellen in jeder Zeile, auch in der Kopfzeile.

table umschließt die Tabelle. tr beginnt eine Zeile. th ist eine Überschriftszelle, td eine normale Datenzelle. Die Rahmen entstehen durch style="border: 1px solid black;". Das bedeutet: eine einen Pixel breite, durchgezogene schwarze Linie. Die Angabe kommt auch auf die einzelnen Zellen.

Die Bausteine

Schreibweise	Bedeutung
<table> … </table>	Die ganze Tabelle.
<tr> … </tr>	Eine Tabellenzeile.
<th> … </th>	Eine Überschriftszelle.
<td> … </td>	Eine Datenzelle.
border: 1px solid black;	Sichtbarer schwarzer Rahmen.
border-collapse: collapse;	Benachbarte Rahmen werden zusammengeführt.

Tabelle für den body

index.html · im body

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black;">Tag</th>
    <th style="border: 1px solid black;">Aktivität</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Dienstag</td>
    <td style="border: 1px solid black;">Bauen</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Freitag</td>
    <td style="border: 1px solid black;">Testen</td>
  </tr>
</table>

Die style-Angaben sind bereits kleine CSS-Anweisungen. Heute übernehmen wir sie als fertiges Rezept. Später schreiben wir diese Regeln einmal in eine CSS-Datei, statt sie an jeder Zelle zu wiederholen. Das veraltete HTML-Attribut border brauchen wir nicht.

Deine Aufgabe

Arbeite in deinem Ordner mein-hobby weiter. Bearbeite die Schritte der Reihe nach. Verwende dein eigenes Hobby und formuliere eigene Sätze. Speichere nach jedem größeren Arbeitsschritt und sieh dir das Ergebnis im Browser an.

Plane auf Papier eine Tabelle zu deinem Hobby. Verwende drei Spalten: zum Beispiel Tag, Aktivität und Dauer. Denke dir vier passende Datenzeilen aus.
Schreibe eine h2 Mein Hobbyplan und darunter zwei erklärende Sätze. Beschreibe, ob die Tabelle eine typische Woche oder einen geplanten Ablauf zeigt.
Tippe zuerst die Beispieltabelle mit zwei Spalten ab. Ersetze die Inhalte durch deine Angaben. Behalte die Rahmen-Angaben an den Zellen.
Ergänze die dritte Spalte: eine zusätzliche th-Zelle in der Kopfzeile und eine zusätzliche td-Zelle in jeder Datenzeile. Schreibe die Dauer mit einer Einheit, zum Beispiel 30 Minuten.
Erweitere die Tabelle auf vier Datenzeilen. Jede Zeile soll drei Zellen enthalten. Füge bei jeder neuen Zelle die gleiche border-Angabe ein.
Schreibe nach der Tabelle einen Absatz mit drei Sätzen. Erkläre, auf welche Aktivität du dich besonders freust und warum.
Speichere und betrachte die Tabelle im Browser. Vergleiche sie mit deiner Zeichnung. Alle Zellen sollen sichtbar umrandet sein und die Angaben unter der richtigen Überschrift stehen.

Heute entsteht

Ein erklärter Hobbyplan mit Kopfzeile, vier Datenzeilen und drei Spalten. Jede Zelle hat einen sichtbaren Rahmen.

Zum Abschluss

Kreuzworträtsel

Sechs Begriffe aus diesem Modul. Ein Kästchen steht für einen Buchstaben. Schreibe groß, ohne Leerzeichen: Ä = AE, Ö = OE, Ü = UE, ß = SS. Fülle das Rätsel auf deinem Handout aus.

Waagrecht →

1. CSS-Eigenschaft für die Umrandung. (6 Buchstaben)
5. Sie stellt Angaben in Zeilen und Spalten dar. (7 Buchstaben)
6. Ein einzelnes Feld in der Tabelle. (5 Buchstaben)

Senkrecht ↓

2. Die sichtbare Linie um ein Feld. (6 Buchstaben)
3. Eine senkrechte Reihe in der Tabelle. (6 Buchstaben)
4. Eine waagrechte Reihe in der Tabelle. (5 Buchstaben)

Abschlussblatt als PDF

Drei Abschlussfragen

Beschreibe den Unterschied zwischen Zeile, Spalte und Zelle.
Warum reicht ein äußerer Tabellenrahmen nicht für Linien um alle Zellen?
Wie ergänzt du eine dritte Spalte?

Online-Quiz

Zehn Fragen, jeweils eine richtige Antwort. Klicke dich durch und erhalte am Ende deine Punkte mit kurzen Erklärungen. Keine Anmeldung nötig.

Online-Quiz starten · Modul 5