Einfache Tabellenbeispiele

====== 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^ ^ ''%%%%'' | öffnender Tag Tabelle | ^ ''%%%%'' | öffnender Tag einer Tabellenzeile (tr - table row) | ^ ''%%%%'' | Tags für die Tabellenzeilen der Kopfzeile (optional) (th - table head) | ^ ''%%%%'' | schließender Tag einer Tabellenzelle | ^ ''%%%%'' | öffnender Tag einer Tabellenzeile | ^ ''%%%%'' | Tags für die Tabellenzeilen (td - table data) | ^ ''%%%%'' | schließender Tag einer Tabellenzelle | ^ ''%%

...	...
...	...

%%'' | schließender Tag Tabelle | Innerhalb des Tabellentags ''%%...

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



 


   
   Einfache Tabellenbeispiele


    Einfache Tabellenbeispiele

    Tabelle ohne Kopfzeile
    
        1. Zeile/ 1.Zelle 1. Zeile/ 2.Zelle
        2. Zeile/ 1.Zelle 2. Zeile/ 2.Zelle
    

    Tabelle mit Kopfzeile und Linien
    
        Kopfzeile/ 1.Zelle Kopfzeile/ 1.Zelle
        1. Zeile/ 1.Zelle 1. Zeile/ 2.Zelle
        2. Zeile/ 1.Zelle 2. Zeile/ 2.Zelle

Kopfzeile/ 1.Zelle	Kopfzeile/ 1.Zelle
1. Zeile/ 1.Zelle	1. Zeile/ 2.Zelle
2. Zeile/ 1.Zelle	2. Zeile/ 2.Zelle

{{ :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^ ^''%%%%''| Tabellenlinie der Breite n zeichnen| ^''%%

%%'', ''%%%%''| Element mit der Breite b darstellen, b kann dabei in Prozent und in Pixeln angegeben werden| ^''%%

%%'', ''%%

%%'', ''%%%%''| Element mit der Höhe darstellen, h wird dabei in Pixeln angegeben| ^''%%

%%'', ''%%

%%'', ''%%%%''| horizontale Ausrichtung in einer Tabelle bzw. Tabellenzelle, ausrichtung kann die Werte left, center, right und justify annehmen| ^''%%

%%'', ''%%%%''| vertikale Ausrichtung in einer Tabelle bzw. Tabellenzelle, ausrichtung kann die Werte top, middle, bottom und baseline annehmen| ^''%%

| Zellen über z Zeilen verbinden| ^''%%

| 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]]