Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html:tabellen [2020/12/30 10:25] – [Tabellen] lutz
+++ html:tabellen [2024/01/17 13:14] (aktuell) – [Aufgaben] lutz
@@ Zeile 34: / Zeile 34: @@
     </table>
-    <h3>Tabelle mit Kopfzeile</h3>
+    <h3>Tabelle mit Kopfzeile und Linien</h3>
     <table border = '1'>
         <tr><th>Kopfzeile/ 1.Zelle</th><th>Kopfzeile/ 1.Zelle</th></tr>
@@ Zeile 46: / Zeile 46: @@
 </code>
+{{ :html:tabelle1.png?direct&400 |}}
+=====Erklärvideo=====
+{{youtube>5dSFRTVilS4}}
 =====Attribute in Tabellen=====
@@ Zeile 51: / Zeile 55: @@
 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|
@@ Zeile 58: / Zeile 70: @@
 **Aufgabe 1**
-Teste den folgenden HTML-Quelltext!
+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. ~~ -->