Übungen zur Verwendung von Tabellen - htmlbasics

HTML-Tabellen, Seite 1 von 6, 13.09.13 R.Borrmann
Letzter Stand dieses Aufgabenblattes und weitere Informationen, siehe:
http://htmlbasics.wikispaces.com/Tabellen
Übungen zur Verwendung von Tabellen
Eine kurze Einführung zu Tabellen haben Sie im Unterricht bereits bekommen
(siehe auch Informationen zur Tabellen anschließend an die Aufgabenstellungen).
Bearbeiten Sie jetzt bitte folgende Übungen:
Übung "Stundenplan"
Aufgabe:
Erstellen Sie eine HTML-Seite mit Ihrem Stundenplan!
(Selbstverständlich soll Ihre Seite schöner sein, als die folgende WebUntis-Vorlage)
1.
2.
3.
4.
Der Stundenplan wird als Tabelle realisiert.
Das Fach, der Lehrer sowie der Raum sollen eingetragen sein.
Doppelte Blöcke werden zusammengezogen (siehe colspan, rowspan).
Die komplette Tabelle wird mittels CSS formatiert
(Textart, Textgröße, Textfarbe, Hintergrundfarbe, Hintergrundbild, Rahmenlinien, zentrieren,Siehe
auch CSS Box Model weiter unten auf dieser Seite!)
5. Fügen Sie Bilder ein, damit der Stundenplan nicht so langweilig aussieht!
6. Fügen Sie Verweise auf passende Internetseiten ein (Klick auf Text, Klick auf Bild)!
7. Im Titel der Seite steht "Stundenplan für <Ihr Name>"!
HTML-Tabellen, Seite 2 von 6, 13.09.13 R.Borrmann
Abgabe:
• Drucken Sie Ihren Stundenplan im Querformat zentriert aus!
• Drucken Sie den Quelltext aus!
• Notieren Sie Ihre Klasse, Ihren Namen und das aktuelle Datum unten auf den Blättern
(bitte NICHT auf der Rückseite, denn die Blätter werden u.U. vom Lehrer einseitig gescannt).
• Geben Sie Sie die ausgedruckten Blätter Ihrem Lehrer!
Übung "Online-Shops"
Auf der Seite http://www.preisvergleich-total.de/online_shops_computer_edv.html
finden Sie eine Übersicht von Online-Shops im Bereich Hardware, Software, Computer und EDV.
Aufgabe:
Erstellen Sie selbst eine neue einfache HTML-Seite mit einer Tabelle, welche 3 Berliner Online-Shops
beschreibt, die auch Ladengeschäfte betreiben (z.B. Atelco, K&M Elektronik, ...).
• Wählen Sie Unternehmen, die für Sie interessant sein könnten!
• Die 3 Spalten der Tabelle sollen folgende Informationen enthalten zu den Unternehmen:
• Zeile 1: Name des Unternehmens (Text)
• Zeile 2: Kontaktadresse (Email)
• Zeile 3: Stärken bzw. Schwerpunkte des Geschäfts (Text)
• Zeile 4: Ein aktuelles Angebot (Link)
• Die Tabellenfelder sollen verschiedenfarbige Hintergründe erhalten (siehe
http://www.somacon.com/p142.php),
• z.B. eine Farbe pro Spalte
• oder kariert
• oder einfach jedes Feld in einer anderen Farbe.
• Alle Formatierungen sind mittels CSS vorzunehmen.
• Die Seite muß selbstverständlich verifiziert werden (validator.w3.org) und soll nach Möglichkeit
keine Fehler enthalten.
Für Fortgeschrittene:
• Die CSS-Formatierungen sind in eine eigene Datei auszulagern.
Wie geht das? Das finden Sie hier: http://de.selfhtml.org/css/formate/einbinden.htm
• Der Hintergrund der HTML-Seite soll ein Bild aus dem Bereich Computer enthalten, z. B. PC oder
Motherboard, ...
• Die Tabelle ist um ein weiteres Unternehmen zu ergänzen.
• Die Tabelle ist um eine weitere Zeile zu ergänzen ( Logo des Unternehmens (Image) ).
Bewertung:
• Wurde die Tabelle entsprechend der obigen Kriterien korrekt erstellt?
• Inhaltlich wird die Tabelle nur nach gestalterischen und programmiertechnischen Gesichtspunkten
bewertet.
• Ansonsten gilt zur Bewertung generell alles, was Sie unter dem Link Bewertung in diesem Wiki
lesen können.
HTML-Tabellen, Seite 3 von 6, 13.09.13 R.Borrmann
Grundstruktur einer Tabelle
Die Grundstruktur einer Tabelle entsteht durch die Verwendung der 3 Tags table, tr und td.
Wie kann man sich das am besten merken?
• 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 Tabelle schreibt man am besten so, dass man die Anzahl der Spalten und Zeilen
auf einen Blick in der HTML-Datei erkennt.
Mein Vorschlag für eine Tabelle aus 2 Zeilen und 4 Spalten:
<table>
<tr>
<td>
<td>
<td>
<td>
</tr>
</td>
</td>
</td>
</td>
<tr>
<td>
<td>
<td>
<td>
</tr>
</td>
</td>
</td>
</td>
</table>
So können Sie bereits ohne große Anstrengung erkennen, aus wie vielen Zeilen und Spalten die Tabelle
besteht.
Ein Beispiel zu CSS formatierten Tabellen
Eine mögliche CSS-Formatierung für die weiter unten stehenden Tabellen
table.typ1
{
border:
border-collapse:
margin:
border-spacing:
}
table.typ2
{
border:
border-collapse:
margin:
border-spacing:
}
medium solid red;
collapse;
1em;
1em;
medium solid green;
separate;
2em;
2em;
td
{
border:
padding:
}
thin solid blue;
5px;
HTML-Tabellen, Seite 4 von 6, 13.09.13 R.Borrmann
Beispiele für Tabellen in HTML
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
HTML-Tabellen, Seite 5 von 6, 13.09.13 R.Borrmann
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.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>
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;
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!
• CssBoxModel.pdf
• http://www.w3.org/TR/CSS2/box.html
• http://www.w3schools.com/css/css_boxmodel.asp
HTML-Tabellen, Seite 6 von 6, 13.09.13 R.Borrmann
Zusammenfassen von Tabellenzellen (TD = table data)
Übereinander liegende Zellen zusammenfassen:
<table>
<tr>
<td rowspan=2>
<td>
<td>
<td>
</tr>
</td>
</td>
</td>
</td>
<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>
</tr>
</table>
</td>
</td>
</td>
</td>