5 Tabellen
Die Webseite termine.html
soll eine Tabelle mit allen anstehenden Terminen beinhalten.
Vorschau
Abb. 3-58: termine.html (Zwischenstand nach Aufgabe 3-11)
Eine HTML-Tabelle (table ) kann mehrere Zeilen (table row ) enthalten. Jede Zeile besteht wiederum aus verschiedenen Zellen die entweder eine Spaltenüberschrift (table header cell ) oder normale Daten (table data cell ) enthalten.
HTML-Element
Erläuterung
Standardformatierung (Browser können abweichen)
table
Das table
-Element kennzeichnet eine tabellarische Darstellung von Daten.
<table>
...
</table>
tr
Das tr
-Element (table row ) kennzeichnet eine Zeile innerhalb eines table
-Elements.
<table>
<tr>
...
</tr>
...
</table>
th
Das th
-Element (table header cell ) kennzeichnet eine Zelle innerhalb der Kopfzeile der Tabelle.
<table>
<tr>
<th>
...
</th>
...
</tr>
...
</table>
td
Das td
-Element (table data cell ) kennzeichnet eine Datenzelle innerhalb einer Tabellenzeile.
<table>
...
<tr>
<td>
...
</td>
...
</tr>
...
</table>
Abb. 3-59: Aufbau einer Tabelle
Aufgabe 3-12: Termine
Erstellen Sie die Webseite termine.html
entsprechend Abb. 3-58.
Formatierungsvorgaben
Die folgenden Formatierungsvorgaben sollen für alle Webseiten unseres Webauftritts gelten:
HTML-Element
Formatierung
table
Ausrichtung: horizontal zentriert
Die Rahmen benachbarter Tabellenzellen sollen zusammenfallend dargestellt werden.
td, th
Rahmentyp: durchgezogene Linie
Rahmenbreite: 1 Pixel
Schriftgröße: 90% der Schriftgröße des Elternelements
Abstand zwischen dem rechten und linken Rand des Elements und seinem Inhalt: 3 Pixel
th
Hintergrundfarbe: grün (green
)
Schriftfarbe: weiß (white
)
Rahmenfarbe: schwarz (black
)
CSS-Eigenschaften
Abb. 3-60: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS
Lösung
Lösung
CSS
table {
border-collapse : collapse;
margin-left : auto;
margin-right : auto;
}
td, th {
border-style : solid;
border-width : 1px;
font-size : 0.9em;
padding-left : 3px;
padding-right : 3px;
}
th {
background-color : green;
color : white;
border-color : black;
}
Abb. 3-61: Ergänzung CSS-Datei styles.css
Die folgenden Formatierungsvorgaben sollen nur für die Seite termine.html
gelten:
HTML-Element
Formatierung
Tabelle mit den Terminen
Breite: 400 Pixel
CSS-Eigenschaften
Abb. 3-62: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS
Lösung
Lösung
HTML
<!DOCTYPE html>
<html lang ="de" >
<head>
<meta charset ="utf-8" >
<title> Bildungswege</title>
<link rel ="stylesheet" type ="text/css" href ="styles.css" >
<style>
#termine {
width : 400px;
}
</style>
</head>
<body>
<div id ="page" >
<header id ="page_header" >
<div>
<img id ="logo" src ="img/logo.png" alt ="Logo der Kaufmännischen Schule Tauberbischofsheim" >
</div>
<div>
<h1> Kaufmännische Schule Tauberbischofsheim</h1>
<nav>
<ul>
<li> <a href ="index.html"> Startseite</a> </li>
<li> <a href ="bildungswege.html"> Bildungswege</a> </li>
<li> <a href ="termine.html"> Termine</a> </li>
<li> <a href ="impressum.html"> Impressum</a> </li>
</ul>
</nav>
</div>
</header>
<main>
<h2> Termine</h2>
<table id ='termine' >
<tr>
<th> Datum</th>
<th> Beginn</th>
<th> Art der Veranstaltung</th>
</tr>
<tr>
<td> 12.09.17</td>
<td> 07:30</td>
<td> Wandertag</td>
</tr>
<tr>
<td> 14.10.17</td>
<td> 19:00</td>
<td> Klassen-Pflegschaftssitzungen</td>
</tr>
<tr>
<td> 21.10.17</td>
<td> 19:00</td>
<td> Elternbeiratssitzung und Schulkonferenz</td>
</tr>
</table>
</main>
</div>
</body>
</html>
Abb. 3-63: Quellcode der Startseite termine.html (Zwischenstand nach Aufgabe 3-12)