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

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
  • Rahmenbreite: 1 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 bildungswege.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>
                
                <figure id='termine' class='kasten_schattiertzentriert'>
                    <table>
                        <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>
                </figure>
            </main>
        </div>
    </body>

</html>
Abb. 3-63: Quellcode der Startseite termine.html (Zwischenstand nach Aufgabe 3-12)