Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html:loesungen:tabellen [2021/01/08 09:31] – angelegt lutz
+++ html:loesungen:tabellen [2021/01/08 09:34] (aktuell) – lutz
@@ Zeile 1: / Zeile 1: @@
 ======Tabellen (Lösungen)======
+**Lösung zur Aufgabe 2**
+<code html aufgabe2.html>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+   <meta charset="utf-8">
+   <title>Eine formatierte Tabelle</title>
+</head>
+<body>
+    <h2>Eine formatierte Tabelle</h2>
+    <ol>
+		<li>Breite der Tabellenlinie: 1</li>
+		<li>Breite der Tablle 80% der Seite</li>
+		<li>Tabelle ist zentriert ausgerichtet</li>
+    </ol>
+    <table align="center" border="1" width="80%">
+        <tr>
+        	<th align="left">1. Kopfzelle links ausgerichtet </th>
+        	<th align="center">2. Kopfzelle zentriert ausgerichtet </th>
+        	<th align="center">3. Kopfzelle zentriert ausgerichtet </th>
+        	<th align="right">4. Kopfzelle rechts ausgerichtet </th></tr>
+        <tr>
+        	<td align="left" valign="top" width="30%" height="100">Zelle, oben links, H&ouml;he 100 Pixel, Breite 30% der Tabelle</td>
+      		<td align="center" valign="top" width="20%">Zelle, oben zentriert, Breite 20% der Tabelle</td>
+        	<td align="right" valign="top" width="30%">Zelle, oben rechts, Breite 30% der Tabelle</td>
+        	<td rowspan="3" align="center" valign="top">Zelle über 3 Zeilen </td>
+        </tr>
+        <tr>
+		<td align="left" valign="middle" height="150">Zelle, mitte links, Höhe 150 Pixel</td>
+        	<td align="center" valign="middle" >Zelle, mitte zentriert</td>
+        	<td align="right" valign="middle" >Zelle, mitte rechts</td>
+        </tr>
+        <tr>
+		<td align="left" valign="bottom" height="100">Zelle, unten links, Höhe 100 Pixel</td>
+        	<td align="center" valign="bottom" >Zelle, unten zentriert</td>
+        	<td align="right" valign="bottom" >Zelle, unten rechts</td>
+        </tr>
+        <tr>
+		<td colspan="3" >Zelle über 3 Spalten</td><td align="center">letzte Zelle</td>
+        </tr>
+    </table>
+</body>
+</html>
+</code>