Die Überschrift soll im <table>-Tag mit einer Caption erstellt werden.
Die Schriftfarbe und das permanente Großschreiben (CSS-Tag: text-transform) in der Überschrift soll in einem externen Stylesheet erledigt werden.
Die Einträge „1. Einheiten“ und „2. Einheiten“ sollen mittels table-header (th) erledigt werden. Die Formatierung dafür soll im Stylesheet passieren. (Schriftfarbe, Buchstabenabstand, …)
Backgrounds für die „Zeile x.“ und „Eintrag x.“ sollen im CSS-Stylesheet mittels Gruppen, die im HTML-Code einzufügen sind, definiert werden. (.bgblue und .bgred)
Die Abstände der Einheiten vom Tabellenrand können mit dem CSS-Tag „padding: ??px“ eingestellt werden.

Der CSS-Code ist hier einzusehen:

Zum Anzeigen hier klicken ⇲

Zum Verstecken hier klicken ⇱

body 	{
             font-family: Arial;
     	}
 
caption	{
             color: #790045;
             margin-bottom: 10px;
             text-transform: uppercase;
         }
 
th	{
             color: #430298;
             letter-spacing: 1px;
	}
 
.bgblue	{
             background-color: #245567;
             color: #cccccc;
	}
 
.bgred	{
             background-color: #672455;
             color: #cccccc;
	}
 
tr, td 	{
             padding: 7px;
	}

Der HTML-Code ist hier einzusehen:

Zum Anzeigen hier klicken ⇲

Zum Verstecken hier klicken ⇱

<html>
 
<head>
<title>&Uuml;bung - Tabellen</title>
<meta name="author" content="user">
<link rel="stylesheet" type="text/css" href="03_tabellen.css">
</head>
 
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table border="1">
  <caption>&Uuml;bungstabelle</caption>
    <tr><th>1. Einheiten</th>
      <td class="bgblue">Zeile 1</td>
      <td class="bgred">Eintrag 1</td>
    </tr>
    <tr><th>2. Einheiten</th>
      <td class="bgblue">Zeile 2</td>
      <td class="bgred">Eintrag 2</td>
    </tr>
</table>
</body>
 
</html>

Tabellenübung

Parameter

Mögliche Realisierung der Übung

Nützliche Links