Wiki zum Unterricht

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Tabellen ======
Ein weiteres grundlegendes Gestaltungselement von Webseiten sind Tabellen. In der Zeit, als sich CSS noch nicht durchgesetzt hatte, wurden Tabellen verwendet, um die Inhalte auf einer HTML-Seite anzuordnen.

Der Grundlegende Aufbau einer Tabelle in sieht wie folgt aus:
^HTML-Element^Bedeutung^
^ ''%%<table>%%'' | öffnender Tag Tabelle |
^ ''%%<tr>%%'' | öffnender Tag einer Tabellenzeile (tr - table row) |
^ ''%%<th>...</th><th>...</th>%%'' | Tags für die Tabellenzeilen der Kopfzeile (optional) (th - table head) |
^ ''%%</tr>%%'' | schließender Tag einer Tabellenzelle |
^ ''%%<tr>%%'' | öffnender Tag einer Tabellenzeile |
^ ''%%<td>...</td><td>...</td>%%'' | Tags für die Tabellenzeilen (td - table data) |
^ ''%%</tr>%%'' | schließender Tag einer Tabellenzelle |
^ ''%%</table>%%'' | schließender Tag Tabelle |

Innerhalb des Tabellentags ''%%<table>...</table>%%'' stehen die einzelnen Tabellenzeilen ''%%<tr>...</tr>%%''. In jeder Tabellenzeile müssen gleich viele Tabellenzellen ''%%<td>...</td>%%'' stehen oder es muss das Attribut multicolumn (Siehe Unten!) gesetzt werden. In der ersten Zeile können anstatt der Zellen Kopfzellen ''%%<th>...</th>%%'' stehen. Sie setzen die Überschriften der einzelnen Spalten ab. Innerhalb der Zellen bzw. Kopfzellen stehen nun die einzelnen Inhalte.

**Beispiel:**

<code html tabelle1.html>
<!DOCTYPE html>
 
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Einfache Tabellenbeispiele</title>
</head>
<body>
    <h2>Einfache Tabellenbeispiele</h2>

    <h3>Tabelle ohne Kopfzeile</h3>
    <table>
        <tr><td>1. Zeile/ 1.Zelle</td><td>1. Zeile/ 2.Zelle</td></tr>
        <tr><td>2. Zeile/ 1.Zelle</td><td>2. Zeile/ 2.Zelle</td></tr>
    </table>

    <h3>Tabelle mit Kopfzeile und Linien</h3>
    <table border = '1'>
        <tr><th>Kopfzeile/ 1.Zelle</th><th>Kopfzeile/ 1.Zelle</th></tr>
        <tr><td>1. Zeile/ 1.Zelle</td><td>1. Zeile/ 2.Zelle</td></tr>
        <tr><td>2. Zeile/ 1.Zelle</td><td>2. Zeile/ 2.Zelle</td></tr>
    </table>

</body>
</html>

</code>

{{ :html:tabelle1.png?direct&400 |}}
=====Erklärvideo=====

{{youtube>5dSFRTVilS4}}

=====Attribute in Tabellen=====

Bisher sehen unsere Tabellen noch sehr unspektakulär aus. Deshalb folgen jetzt einige Attribute, mit denen man die Tabelle gestalten kann. Die Auswahl ist dabei nicht vollständig.

^Attribut^Wirkung^
^''%%<table border='n'>%%''| Tabellenlinie der Breite n zeichnen|
^''%%<table width='b'>%%'', ''%%<td width='b'>%%'', ''%%<tr width='b'>%%''| Element mit der Breite b darstellen, b kann dabei in Prozent und in Pixeln angegeben werden|
^''%%<table height='h'>%%'', ''%%<td height='h'>%%'', ''%%<tr height='h'>%%''| Element mit der Höhe darstellen, h wird dabei in Pixeln angegeben|
^''%%<td align='ausrichtung'>%%'', ''%%<table align='ausrichtung'>%%''| horizontale Ausrichtung in einer Tabelle bzw. Tabellenzelle, ausrichtung kann die Werte left, center, right und justify annehmen|
^''%%<td valign='ausrichtung'>%%'', ''%%<table valign='ausrichtung'>%%''| vertikale Ausrichtung in einer Tabelle bzw. Tabellenzelle, ausrichtung kann die Werte top, middle, bottom und baseline annehmen|
^''%%<td rowspan='z'%%''>| Zellen über z Zeilen verbinden|
^''%%<td colspan='s'%%''>| Zellen über s Spalten verbinden|



=====Aufgaben=====

**Aufgabe 1**

Teste den HTML-Quelltext des Beispiels 1!

**Aufgabe 2**

Erstelle eine Tabelle nach der folgenden Vorlage!

{{ :html:tabelle2.png?direct&600 |}}


**Aufgabe 3**

Informiere dich dich unter https://wiki.selfhtml.org/wiki/HTML/Tabellen über weitere Tabellenattribute und teste sie!

[[html:loesungen:tabellen| >> Tabellen (Lösungen)]]

[[html:hyperlinks| >> Hyperlinks]]


<!-- ~~DISCUSSION | Hier können Fragen zum Inhalt der Seite gestellt werden. ~~ -->