ifwp.net-schulbuch.deTabellen
In diesem Kapitel wird dargestellt, wie man eine Tabelle auf einer Webseite darstellen kann.
Ausgangspunkt ist der Kontext des vorherigen Kapitels. Auf einem Klassentreffen wird über das Reiseziel der nächsten Klassenfahrt abgestimmt. Das Ergebnis der Abstimmung soll auf einer Webseite veröffentlicht werden.
Hier eine Notiz vom Klassentreffen:
Webseite mit einer Tabelle
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Projekt1.css" />
<title>Reiseziele</title>
</head>
<body>
<h3>Klassenfahrt in der Jahrgangsstufe 10</h3>
<table>
<caption>
<h3>Abstimmung über Reiseziele</h3>
</caption>
<th>Reiseziel</th>
<th>Schwerpunkt</th>
<th>Kosten</th>
<th>Stimmen</th>
<tr>
<td>Paris</td>
<td>Fremdsprache</td>
<td>450 €</td>
<td>7</td>
</tr>
<tr>
<td>Rom</td>
<td>Geschichte</td>
<td>519 €</td>
<td>6</td>
</tr>
<tr>
<td>Seefeld</td>
<td>Sport</td>
<td>680 €</td>
<td>5</td>
</tr>
</table>
<script src="Projekt1.js"></script>
</body>
</html>
Darstellung im Browser
Info:HTML-Elemente für Tabellentable Tabellendefintion
caption Überschrift der Tabelle
th Kopfzeilenzelle (table head)
td Tabellenzelle (table data)
tr Tabellenzeile (table row)
Die Bedeutung der Zeilen 6 und 39 werden in den nächsten Kapiteln erklärt.
Zur Erinnerung:
Tags werden in spitzen Klammern geschrieben. Es gibt Anfangs- und End-Tags.
Auftrag 1:
Durch das vorliegende HTML-Projekt wird ein Stundenplan in einer Tabelle dargestellt. Das Projekt besteht erst einmal nur aus einer HTML-Datei.
Ändere die Datei so ab, dass dein persönlicher Stundenplan angezeigt wird.
(Das Projekt wurde am 04.12.2024 von ChatGPT erzeugt.)
Detaillierte Aufgabenstellung:
- Ändere die Tabellenüberschrift. Hier soll die Bezeichnung der Klasse stehen.
- Ändere die Zeitleiste, so dass sie mit der Zeitleiste deiner Schule übereinstimmt.
- Trage deinen Stundenplan in die Tabelle ein.
- Speicher die veränderten Dateien in einen Ordner.
Start des Stundenplan-Projekts im HTML-Editor
Überschrift: Der Text wird in der HTML-Datei geändert.
Zeitleiste: Die Zeitangaben müssen in der HTML-Datei geändert werden.
Stundenplan: Die Fächer müssen in der HTML-Datei geändert werden. Wahrscheinlich muss noch mindestens eine Zeile ergänzt werden.