Webseiten Quick'n easy
0 10 20 ... 90 a0 b0 ... f0
1 11 21 ... 91 a1 b1 ... f1
2 12 22 ... 92 a2 b2 ... f2
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
9 19 21 ... 99 a9 b9 ... f9
a 1a 2a ... 9a aa ba ... fa
b 1b 2b ... 9b ab bb ... fb
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
f 1f 2f ... 9f af bf ... ff
Und wie macht man jetzt daraus Farben?
Man packt immer 3 dieser Zahlen zusammen. Eine für rot, eine für
grün und eine für blau. Dabei gelten Regeln wie beim Licht
(schliesslich arbeitet unser Computerbildschirm mit Licht):
00 heisst so viel wie: von dieser Farbe wollen wir gar nichts sehen.
ff bedeutet: gib mir alles, was drin ist.
#000000 - so sieht das ganze als komplette Farbe aus - ist ein
scharz. Den # (gesprochen: hash oder Doppelkreuz) verwenden wir
um unserem Webbrowser zu sagen, dass wir eine Farbangabe in
hexadezimaler Schreibweise angeben, 00 - Null Anteile rotes
Licht, 00 - Null Anteile grünes Licht und 00 - Null Anteile
blaues Licht. das macht soviel wie garkein Licht, also schwarz.
das Gegenstück hierzu ist weiss: #ffffff.
Alles weitere betrachten wir uns jetzt anhand einiger Beispiele:
Anwendung der hexadezimalen Angabe
Wir verwenden eine einfache Webseite mit ein wenig CSS. In
diesem CSS geben wir unsere Farbwerte in hexadezimaler
Schreibweise an. Als Beispiel setzen wie unsere Überschrift
<h2> in der Farbe Rot: #ff0000
Volle Anteile rotes Licht (ff), kein blaues (00) und kein
grünes (00) Licht.
<html>
<head>
<title>Farbtest</title>
<style>
h2 { color: #ff0000; }
</style>
</head>
<body>
<h2>Hier eine Überschrift</h2>
und ganz normaler Text.
</body>
</html>
Man schreibt die Farbe also an genau die gleiche Stelle wie
bisher.
Auffinden der richtigen Farbzahlen
Und wie bekommt man jetzt diese Zahlen für Farben?
Mit etwas Übung geht das einfach mit abschätzen und
ausprobieren.
Zu Anfang, oder auch um eine bestimmte Farbe exakt zu
treffen, hilft einem sehr oft ein Bildbearbeitungsprogramm.
Wir wählen zum Vorführen das freie
Bildbearbeitungsprogramm Gimp (http://www.gimp.org/).
Hier wird einem bei der Auswahl der Farben immer auch die
hexadezimale Schreibweise mit angezeigt.
Weiterhin gibt es Tabellen mit den 256 Standardfarben, sowie
entsprechende Erweiterungen. Diese bestehen unterm Strich
gesehen aus Kombinationen von 00, 33, 66, 99, cc und FF.
Ich persönlich bevorzuge die Variante
Bildbearbeitungsprogramm, da meist irgendwo eines offen
ist.
Noch ein Wort zur Groß- und Kleinschreibung: Es ist egal, ob
man nun #aabbcc oder #AABBCC oder #AaBbCc schreibt oder
sonst eine Variante, es kommt immer das gleiche hellblau
dabei heraus.
Abstände kontrollieren (Box Modell)
CSS betrachtet praktisch alle, mit Tags bezeichnete Textteile als
Boxen. Für diese gibt es ein Box-Layout bestehend aus: Padding,
einem Rand und Margin. Alle drei hübsch säuberlich trennbar nach
oben (top), unten (bottom), links (left) und rechts (right).
Wir beginnen mit padding und margin, weil die beiden sich in der
Handhabung am ähnlichsten sind:
Bei beiden kann man lediglich sagen wie groß der Abstand sein
soll. Dafür hat man verschiedene Einheiten zur Verfügung:
Vom klassichen HTML her ist die Verwendung px (Pixel) am
Vertrautesten, aber auch pt und em sind nicht unüblich. Letztere
haben die nette Eigenschaft abhängig von der sonstigen Größe
ringsherum zu sein. 1em kann also mal 10 px sein oder auch 20, je
nach dem.
Wir haben jeweils zwei Möglichkeiten Padding und Margin anzugeben:
entweder einzeln, oder als Gemeinschaft: padding, margin (als
Gemeinschaft.
padding-left, padding-top, padding-right, padding-buttom und
margin-left, margin-top, margin-right, margin-buttom, wenn man
jede Seite einseln angeben möchte.
Zur Verdeutlichung hier ein paar Beispiele:
padding und margin
Man sieht deutlich den Unterschied: Padding ist im Inneren zum
(unsichtbaren) Border und somit von der Hintergrundfarbe mit
erfaßt (rot),
während margin sich im
äußeren Bereich befindet und nicht von der Hintergrundfarbe
betroffen ist (grün).
<html>
<head>
<title>Padding und Margin</title>
<style>
h2.padding
{
background-color: #ff0000;
padding: 20px;
}
h2.margin
{
background-color: #00ff00;
margin: 20px;
}
</style>
</head>
<body>
<h2 class="padding">Überschrift mit Padding</h2>
<h2 class="margin">Überschrift mit Margin</h2>
</body>
</html>
Das variable em
es läßt sich nicht leugnen: der grüne Bereich hat eine größere
Schrift und einen größeren Rand, obwohl, wenn man im CSS
nachsieht, die Angabe für padding identisch bei 2.0 em steht. (Bei
der Verwendung von em darf man mit Kommawerten arbeiten) 1.0em ist
also etwas in der Art einer aktuellen Zeichengröße.
<html>
<head>
<title>Variables em</title>
<style>
h2.klein
{
background-color: #ff0000;
font-size: 10px;
padding: 2.0em;
}
h2.gross
{
background-color: #00ff00;
font-size: 20px;
padding: 2.0em;
}
</style>
</head>
<body>
<h2 class="klein">Überschrift mit Padding</h2>
<h2 class="gross">Überschrift mit Margin</h2>
</body>
</html>
Zusammenfassend:
Wenn man also px verwendet, ist die Angabe eindeutig, verwendt man
em, richtet sie sich nach der gerade aktuellen Fontgröße. em darf
man in Dezimalschreibweise verwenden. Dabei ist der Dezimaltrenner
ein Punkt - kein Komma wie im Deutschen üblich. die Angabe px (Pixel)
gibt es nur in ganzen Pixeln. Auch muß man die verwendete Einheit
immer mit angeben.
Padding und Margin in alle vier Richtungen
Damit man die Begrenzung besser sieht, haben wir einen einfachen
border angezeigt, so, wie er bereits in früheren Kapiteln
verwendet wurde.
Da die Box eines Absatzes immer bis zum rechten Rand geht - so wie
die meisten uns bisher bekannten Tags, haben wir auf die Variante
rechter Rad verzichtet.
<html>
<head>
<title>Padding in alle Richtungen</title>
<style>
.links
{
background-color: #ffaaaa;
padding-left: 30px;
border: 1px solid black;
}
.oben
{
background-color: #aaffaa;
padding-top: 30px;
border: 1px solid black;
}
.unten
{
background-color: #ffffaa;
padding-bottom: 30px;
border: 1px solid black;
}
</style>
</head>
<body>
<p class="oben">ein Absatz mit oben einem besonders breiten Rand.</p>
<p class="unten">ein Absatz mit unten einem besonders breiten Rand.</p>
<p class="links">ein Absatz mit links einem besonders breiten Rand.</p>
</body>
</html>
Und jetzt das Gleiche zur Demonstration mit margin, statt padding.
Hier macht margin-right durchaus einen optischen Unterschied, den
ich niemandem vorenthalten möchte.
<html>
<head>
<title>Margin in alle Richtungen</title>
<style>
.links
{
background-color: #ffaaaa;
margin-left: 30px;
border: 1px solid black;
}
.rechts
{
background-color: #aaaaff;
margin-right: 30px;
border: 1px solid black;
}
.oben
{
background-color: #aaffaa;
margin-top: 30px;
border: 1px solid black;
}
.unten
{
background-color: #ffffaa;
margin-bottom: 30px;
border: 1px solid black;
}
</style>
</head>
<body>
<p class="oben">ein Absatz mit oben einem besonders breiten Rand.</p>
<p class="unten">ein Absatz mit unten einem besonders breiten Rand.</p>
<p class="links">ein Absatz mit links einem besonders breiten Rand.</p>
<p class="rechts">ein Absatz mit rechts einem besonders breiten Rand.</p>
</body>
</html>
Der Rand - border
Wir haben bereits an einigen Stellen border-Angaben im CSS
verwendet. Meist in der Form: border: 1px solid black;
Dies Bedeutet: 1px breit soll er sein, durchgezogen (solid) und in
schwarz (black). Wir haben also drei Angaben in eine Zeile
gepackt. Bei der Border-Angabe ist das ganz hilfreich.
Die Breitenangabe funktioniert genauso wie beim Padding oder
Margin. Man findet sie in Pixeln (px), Points (pt) und
Größeneinheit relativ zur aktuellen Fontgröße: em, dann teilweise
mit Kommaschreibweise. Bitte kein Leerzeichen zwischen der Zahl
und der Angabe px/pt/em machen!
Statt solid sind noch folgende andere Varianten interessant:
dotted, double, groove, inset. Es gibt eine Reihe weiterer
Möglichkeiten, für den kleinen Einsteigerkurs hier sollten diese
aber erst einmal reichen.
Border
Als Beispiel hier die verschiedenen genannten Ränder:
<html><head><title>Border</title>
<style>
.punkte { border: 2px dotted #cc0000; }
.doppelt { border: 5px double #00cc00; }
.plastisch { border: 8px groove #0000cc; }
.buttonstyle { border: 8px inset #00cccc; }
</style>
</head><body>
<p class="punkte">Absatz mit Rand: dotted</p>
<p class="doppelt">Absatz mit Rand: double</p>
<p class="plastisch">Absatz mit Rand: groove</p>
<p class="buttonstyle">Absatz mit Rand: inset</p>
</body> </html>
Text bändigen
Was kann man mit nacktem Text schon noch groß machen wollen? Font und
Größe bestimmen - und sonst? Vielleicht noch die Farbe.
Wie wäre
es mit rechtsbündigem Text? Oder in Tabellen am oberen oder
unteren Rand der Zelle angelehntem Text?
Wir gehen alle Punkte der Reihe nach durch: Font, Fontgröße, Farbe
und dann das hinsortieren in unserer Box (auch Tabellenzellen sind
nichts anderes als Boxen).
Beginnen wir mit der Auswahl unseres Fonts. Hier gilt: Der Font
muß auf dem jeweils anzeigenden Rechner installiert sein. Nicht
jeder macht sich die Mühe alle irgendwo erhältlichen Fonds zu
installieren - oder will das auch. Deswegen gibt es die
Möglichkeites Ersatzfonts gleich mit anzugeben.
Wir fangen ausnahmsweise hinten an. Es gibt sogenannte generische
Fonts. Diese sind nicht ganz genau bestimmt, sondern nur eine
grobe Richtung, in die der Wunschfont gehen soll. Welchen Font das
Zielsystem am Ende tatsächlich verwendet kann unterschiedlich
sein.
CSS kennt 5 generische Fonts: serif, sans serif, monospace,
coursive, fantasy.
Serif - die Buchstaben haben eine dem Zeichen angepasste Breite:
ein 'i' ist schmaler als ein 'm'. Die Buchstaben haben sogenannte
Serifen, das sind kleine Schwünge und Häkchen, die die Lage des
Buchstabens in den Zeilen verdeutlicht. Manchen Menschen sind
diese Serifen schlicht zu kitschig. Ein klassischer Vertreter der
Serifen Fonts ist Times.
Sans serif - die Buchstaben sind wie Serif, nur ohne die kleinen
Schnörkel. Viele Menschen empfinden diese Schriftzeichen als
übersichtlicher und besser lesbar. Klassische Vertreter sind
Helvetica, auf Windows-Systemen Arial.
Monospace - klassische Schreibmaschinenschriften. Die Buchstaben
sind alle gleich breit. Ansonsten gibt es keine Einschränkungen.
Klassischster Vertreter ist Courier.
Coursive - in diese Kategorie fallen alle Schriften, die
Handschriften ähneln. Meist sind sie geschwungen. Vertreter hier
sind Comic Sans und Lucida.
Fantasy - alle Fonts, die sich nicht in einer der oberen
Kategorien einordnen lassen, fallen in diese Kategorie.
Zur Angabe der Schrift gibt es im CSS die Angabe font-family: Hier
gibt man der Reihe nach an, welche Schriftfonds man verwenden
will. Zuert den bevorzugten, dann vielleicht einen Ersatz und am
Ende sollte man immer einen generischen Font angeben. Diese
Angaben trennt man durch Komma.
Als Beispiel geben wir den Font für das Tag h1 an.
Bevorzugt wird Helvetica, wenn es die nicht gibt, nehmen wir auch
Arial und wenn da auch nichts da ist, soll sich das System selbst
einen Serifenlosen Font (sans-serif) wählen.
<html> <head> <title>Font-TEST</title>
<style>
h1 { font-family: Helvetica, Arial, sans-serif ; }
</style>
</head> <body>
<h1>Hier kommt ein Test-Text im erwählten Font.</h1>
</body> </html>
Wie findet man jetzt heraus, welche Fonts verfügbar sind?
Der direkte Weg: in einem Textverarbeitungsprogramm nachsehen,
welche Fonts angeboten werden.
Ansonsten: eine Reihe Fonts sind auf fast allen Systemen
vorhanden. Am häufigsten verwendet werden Helvetica, bzw. Arial
(als generic Font: sans-serif). Als Standardfont wählen viele
Webbrowser eine Variante von Times (generic Font: serif) und um
feste Textbreite zu haben, wird Courier verwendet (generic Font:
monospace). Diese Fonts sind auf praktisch allen modernen
Systemen vorhanden. Danach erschöpfen sich die Sicherheiten aber
leider auch schon. Das bedeutet: alle weiteren Angaben sind ein
wenig Glückssache.
Jetzt sind wir reif für eine Dreiergruppe
Änderungsmöglichkeiten bei Fonts: font-style,
font-weight und font-size.
font-style wird verwendet, wenn man einen Font kursiv (also in
Schrägschrift) angeben will: font-style: italic.
font-weight verwendet man um anzugeben, daß man jetzt eine
Fettschrift wünscht: font-weight: bold
Und mit font-size gibt man die Größe des Schriftfonts an. Hier
gelten die gleichen Regeln wie beim border. Angaben in px, pt und
em sind üblich.
Alle diese Angaben kann man ungeniert auf einmal im CSS angeben,
sie müssen lediglich durch Semikolon (;) voneinander getrennt
werden.
Ein Beispiel für einen Helvetica Font (ersatzweise Arial oder
sans-serif), in 15 px Größe und in Fettschrift:
<html> <head> <title>Font-TEST</title>
<style>
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
</style>
</head> <body>
<p>Ein Absatz in einer Serifenlosen Schrift, bevorzugt
Helvetica, mit 15 Pixeln, fett und in italic</p>
</body> </html>
Zuletzt noch die Fontfarbe. Wir erwähnen sie hier nur noch der
Ordnung halber, da sie im Prinzip bereits im ersten Teil dieses
Kapitels verwendet wurde: color.
Mit color: und dem Farbwert - entweder in Hexadezimaler
Schreibweise mit dem # davor oder als Farbname, stellt man die
verwendete Textfarbe ein.
Wer genau hinsieht, wird das Tag span entdecken, hiermit kann man
einzelne Buchstaben oder Buchstabengruppen umspannen um ihnen (wie
hier) eine eigene Farbe zu geben.
<html><head><title>Textfarben</title>
<style>
.rot { color: #cc0000; }
.gruen { color: #00cc00; }
.blau { color: #0000cc; }
</style>
</head><body>
So <span class="rot">rot</span>
so <span class="gruen">grün</span>
so <span class="blau">blau</span>
...
</body> </html>
Um unseren Text rechts, linksbündig oder zentriert anzuordnen,
verwenden wir text-align. Hier stehen uns als Angaben zur
Verfügung: left (linksbündig), right (rechtsbündig), center
(zentriert), justify (an beiden Rändern möglichst gleich
ausgerichtet)
In Tabellen wird der ein oder andere seinen Inhalt bevorzugt am
oberen oder unteren Rand der Zelle plazieren wollen. Dies
geschieht mit vertical-align. Hier wählt man meist zwischen top
(oben) und bottom (am unteren Rand ausrichten).
Inhalt in Tabellenzellen anordnen
Im folgenden Beispiel bekommt jede Tabellenzelle einen der
möglichen Werte zugewiesen.
<html><head><title>Textverteilung</title>
<style>
td { padding: 5px; }
.unten { vertical-align: bottom; }
.oben { vertical-align: top; }
.rechts { text-align: right; }
.links { text-align: left; }
.zentriert { text-align: center; }
</style>
</head><body>
<table border="1">
<tr>
<td class="oben">
Dieser Text wird am<br>oberen Rand der
Tabellenzelle<br> ausgerichtet.
</td>
<td class="unten">
Dieser Text wird<br> am unteren Rand der<br>
Tabellenzelle ausgerichtet.
</td>
<td>
Dazu eine volle<br>Zelle zum<br>Vergleichen,
damit man auch<br> etwas von den anderen<br>
beiden Zellen sieht.
</td>
</tr>
<tr>
<td class="links"> Ausrichtung:<br>linksbündig</td>
<td class="rechts"> Ausrichtung:<br>rechtsbündig</td>
<td class="zentriert">Ausrichtung:<br>zentriert</td>
</tr>
</table>
</body> </html>
Externe Stylesheets verwenden
Mit so einem Stylesheet hat man Einfluß auf die optische
Erscheinung/Darstellung von HTML-Code. Meist will man diese
Darstellung nicht nur auf einer Seite identisch haben, sondern auf
allen seinen Seiten (oder zumindest den meisten).
Man könnte jetzt in jede Datei oben Styles einlagern - immer die
selben (es soll ja gleich aussehen). Anstrengend wird das aber,
wenn man sich überlegt, das Aussehen zu ändern, z.B. alle Absätze
hellblau zu hinterlegen statt einem tristen grau. Man müsste jetzt
jedes einzelne File anfassen und den Style innen drin ändern.
Das ist aufwändig und fehleranfällig. Deswegen gibt es die
Möglichkeit in einem HTML-Dokument zu sagen: 'Ach ja, und Deine
Style-Anweisungen holst Du Dir aus der Datei: meinstyle.css'.
Dann holt sich der Webbrowser die angegebene Datei und tut so, als
würde deren Inhalt in der Webseite stehen. In der Datei steht dann
alles, was wir bisher zwischen <style> und </style> im
HTML-Dokument hatten. <style> und </style> entfallen.
An die Stelle der <style> und </style> tritt jtzt ein
<link href="meinstyle.css" rel="stylesheet"
type="text/css">. Im href steht, wo der Webbrowser die
Style-Angaben findet. Diese müssen für ihn erreichbar auf dem
Bereich des Webservers liegen.
bisher:
<html><head><title>Test mit CSS</title>
<style>
body
{
background-color: #aaaaff;
}
</style>
</head>
<body>
...
neu:
<html><head><title>Test mit CSS</title>
<link href="meinstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
Der Inhalt von meinstyle.css:
body
{
background-color: #aaaaff;
}
Hintergrundbilder
Man kann praktisch alle Boxen mit einem Hintergrundbild
hinterlegen. Der klassische Fall ist eine Textur im Hintergrund, die
aus einem kleinen Bild besteht, welches in alle Richtungen immer
wieder wiederholt wird. Bei der Erstellung des Bildes sollte man
darauf achten, dass die Ränder auch gut aneinander passen. Einige
Bildbearbeitungsprogramme bieten entsprechende Funktionen an, die
ein gegebenes Bild entsprechend zuschneiden. (zB. im Gimp: Nahtlos
machen)
Hierzu benötigt man ein Bild im Format gif oder jpg oder png.
Bitte Zurückhaltung bei der Verwendung animierter Bilder!
Im CSS hinterlegen wir dann nur noch ein: background-image:
bild.gif. Dabei ist an der Stelle von bild.gif eine normale
Adresse erlaubt.
body {
background-image: url("/images/bg.jpg");
background-color: #ccccff;
color: #0000cc;
}
Zentrales Hintergrundild
Oft möchte man ein einzelnes kleines Bild im Hintergrund
haben. Zum Beispiel bei einem Wasserzeichen, was jede Webseite im
Hintergrund enthalten soll, oder welches auf allen Unterlagen
enthalten ist, die zum Ausdruck durch den Kunden bestimmt sind.
Hier stehen einem eine Reihe CSS-Funkionen zur Verfügung:
background-position:
Hier hat man jetzt mehrere Auswahlmöglichkeiten. Alle
Kombinationen würden den Rahmen dieses Kurses spengen, deswegen
beschränke ich mich auf einige wenige:
top, left, right, center, bottom. Mit diesen Angaben kann man
das Bild wahlweise an den rechten Rand, linken Rand, in der Mitte,
oben und unten der Webseite platzieren.
Dazu kommt background-repeat mit: repeat-x, repeat-y und no-repeat
um das Hintergrundbild zu wiederholen - oder eben nicht. Gibt man
nichts an, wird der Hintergrund mit dem jeweiligen Bild gekachelt wie
im oberen Beispiel.
body {
background-color: #ccccff;
background-image: url("../images/bg.png");
background-position: center;
background-repeat: no-repeat;
color: #0000cc;
}
body {
background-color: #ccccff;
background-image: url("../images/bg.png");
background-position: right;
background-repeat: repeat-y;
color: #0000cc;
}
body {
background-color: #ccccff;
background-image: url("../images/bg.png");
background-position: bottom;
background-repeat: repeat-x;
color: #0000cc;
}
Bonus-Material für alle, die mehr wollen:
Hintergrundbild fixieren
Ist die Seite größer als der Bildschirm, scrollt der
Hintergrund mit. Das ist manchmal unerwünscht. Dewegen gibt es
backgrond-attachment: fixed
body {
background-color: #ccccff;
background-image: url("../images/bg.png");
background-position: bottom;
background-repeat: repeat-x;
background-attachment: fixed;
color: #0000cc;
}
:hover oder : es muss nicht immer gleich JavaScript sein
Sie hätten auch gern so einen Link, der sich in Farbe und Form
ändert, wenn man mit der Maus darüber geht? So wie in den vielen
Menues, in denen sich der Hintergrund farblich abhebt, oder die
Schrift plötzlich fett wird?
Früher hat man dies mit Bildern und
einer zusätzlichen Programmierfunktion: JavaScript gemacht.
Heute kann man einfache Veränderungen mit Stylesheets machen.
Hierfür verwendet man :hover. Dies kann allein stehen, dann
betrifft es alle Anchors und Bilder (img), oder in Kombination
mit einem Tag (in der Regel a), dann betrifft es ausschliesslich
das angegebene Tag und sonst nichts.
body { font-size: 2.0em; }
:hover
{
background-color: purple;
color: yellow;
}
h4 a:hover
{
background: white url("../images/bg2.jpg");
color: #72147d;
}
Mit :hover werden alle Anchors (Links) behandelt. Dies ist eine
Funktion, die CSS mitbringt. Hier haben wir auch keine
Wahlmöglichkeiten bei der Namensverteilung.
Die zweite Anweisung h4 a:hover besagt, daß nur a-Tags beachtet
werden sollen, die in einem h4-Tag stehen. Also etwas in der Art:
<h4> Irgendein Text <a href="...">klickme</a> </h4>. Dabei
natürlich nur das a-Tag. Ein eingelagertes img-Tag (z.B. <h4>
Irgendein Text <img src="..."> mehr Text </h4>) würde
unbeachtet bleiben.
Ebenfalls neu in Verwendung: Die Kurzform zum angeben einer
Hintergrundfarbe und eines Hintergrundbildes. Mit einem einfachen
background kann man erst die Farbe (als Name oder mit #123456) und
danach mit url("") ein Bild angeben. Den gleichen Effekt erziehlt
man, wenn man background-color und background-image separat setzt.
GIMP
Ein freies Bildbearbeitungsprogramm für Windows, MacOS X und Linux
W3Consortium
CSS - Der Standard.
In allen vier Ecken
Erstellen Sie eine Tabelle, in denen die Zelleninhalte so
angeordnet sind, daß sie sich einmal zur Mitte hin orientieren und
einmal zum Rand hin (siehe Hand-Skizze)
1. Wir erstellen eine normale Tabelle mit zwei Zeilen zu je zwei
Zellen. Jeder Zelle verpassen wir ein eigenes class. Z.B.
linksoben, rechtsoben, linksunten, rechtsunten.
2. Die farbliche Gestaltung machen wir per Stylesheet. Siehe
unten.
3. Da padding und margin sich nicht immer auch auf den Abstand
der Zellen zueinander beziehen, verwenden wie ein Attribut des
table-Tags: cellspacing und legen dieses auf 10 Pixel fest.
<html><head><title>Tabelle</title>
<style>
table
{
border: 1px solid purple;
width: 400px;
}
td
{
border: 1px solid purple;
font-family: Arial, Helvetica, "Sans Serif";
background-color: #ffffff;
padding: 5px;
}
.rechtsunten {
text-align: right;
vertical-align: bottom;
}
.rechtsoben {
text-align: right;
vertical-align: top;
}
.linksunten {
text-align: left;
vertical-align: bottom;
}
.linksoben {
text-align: left;
vertical-align: top;
}
</style>
</head><body>
<table cellspacing="10">
<tr>
<td class="rechtsunten">
Dies ist ein Textblock. Dies ist ein Text und noch etwas.
</td>
<td class="linksunten">
Dies ist ein Textblock. Dies ist ein Text und noch etwas.
</td>
</tr>
<tr>
<td class="rechtsoben">
Dies ist ein Textblock. Dies ist ein Text und noch etwas.
</td>
<td class="linksoben">
Dies ist ein Textblock. Dies ist ein Text und noch etwas.
</td>
</tr>
</table>
</body> </html>