Startseite Skripte für das Wintersemester 2018/19 Webdesign Semantic Web Tabellen


Tabellen

  • zur Auflistung tabellarischer Daten
  • NICHT für das Layout von Websites – dafür ist CSS zuständig!
  • bei webplatform.org gibt es einen sehr guten Artikel über Tabellen

HTML

<table>
    <!-- Überschriften innerhalb der Tabelle -->
    <thead>
        <tr>
            <th>Klasse</th>
            <th>Jahrgang</th>
            <th>Anzahl</th>
        </tr>
    </thead>
    <tbody>
        <!-- erste Reihe -->
        <tr>
            <td>1a</td>
            <td>1999</td>
            <td>24</td>
        </tr>
        <!-- zweite Reihe -->
        <tr>
            <td>2a</td>
            <td>1998</td>
            <td>23</td>
        </tr>
        <!-- dritte Reihe -->
        <tr>
            <td>3a</td>
            <td>1997</td>
            <td>29</td>
        </tr>
    </tbody>
</table>
Klasse Jahrgang Anzahl
1a 1999 24
2a 1998 23
3a 1997 29

Auch hier kann man die jeweiligen Tags im CSS ansprechen…

CSS

th {
    color:#CCC;
    font-weight: normal;
}
td {
    /* Text wird am oberen Rand der Zelle angezeigt */
    vertical-align:top;
    text-align:right;
}