Tabellen
Beispiel
Informationseinheiten lassen sich auch tabellarisch darstellen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>Steckbrief von Bailey</title>
</head>
<body>
<h1>Steckbrief</h1>
<p>
Ich heiße Bailey. Ich lebe in der Nähe
von Kaiserslautern.
</p>
<p>
Ich interessiere mich für Agility-Sport.
Meine Freundinnen und Freunde aus meiner Agility-Gruppe heißen:
</p>
<table border="1">
<tr>
<th>Freundinnen</th>
<td>Luna</td>
<td>Bella</td>
<td>Amy</td>
<td>Kira</td>
<td>Luna</td>
<td>Lucy</td>
</tr>
<tr>
<th>Freunde</th>
<td>Sam</td>
<td>Balu</td>
<td>Paul</td>
<td>Charly</td>
<td>Buddy</td>
<td>Max</td>
</tr>
</table>
</body>
</html>
Im Browser sieht die Webseite jetzt so aus.
Erläuterungen
-
Tabellen werden mit dem Element
<table>erstellt. -
Mit der zusätzlichen
border-Angabe in<table border="1">wird ein Rahmen festgelegt. -
Eine Tabellenzeile wird mit dem Element
<tr></tr>erzeugt. Innerhalb der Zeile werden dann die einzelnen Zellen entweder mit dem Element<th>(Fettschrift) oder mit dem Element<td>(Normalschrift) ausgezeichnet. - Weitere Gestaltungsmöglichkeiten bei Tabellen erfährst du in einem Nachschlagewerk.
Aufgabe
Ergänze deinen Steckbrief um eine Tabelle. Denkbar wäre z. B. eine Darstellung deines Stundenplans. Experimentiere mit der "border" - Zahl. Was passiert, wenn die Zellenanzahl einer Zeile kleiner ist als die der übrigen?