Auflistung der in der Tabellen-Vorlage
      verwendeten style- und html-Definitionen

  • einen html 'Befehl' nennt man einen 'tag'
  • hier eine Übersicht für html-tags
  • eine gute Nachschlag-Hilfe zur Ergänzung der untenstehenden Erklärungen für css ist: css4you
  • Sollte dir die Schrift dieser Seite zu klein sein, kannst Du sie mit dem Scrollrad Deiner Maus verstellen, während Du die strg-Taste drückst!

hintergrundfarbe per css einfügen

<style type="text/css"> body {background: #farbnummer;} </style>

hintergrund-bild mit css einfügen

<style type="text/css">
{background: url('BILDADRESSE') fixed;}
</style>

fixed heisst: der Hintergrund rollt nicht mit sondern bleibt fest an einer Stelle, der Text rollt darüber

überschrift

<h1 style="font: italic bold 2.2em Palatino Linotype;
color: #A30097;
text-align: center;
padding: 30px;">

h1 = Überschrift, font= Schriftdefinition (hier die verkürzte Schreibform, bei der es auf die korrekte Reihenfolge der Eigenschaften ankommt und dass kein Komma dazwischen ist), italic= kursiv, bold= fett, 2.2em= Größe (auch px und andere Einheiten möglich), Palatino Linotype= Schriftart, color= Farbe, center= zentriert, padding= Abstand der Überschrift nach allen Seiten (man könnte auch den einzelnen Seiten unterschiedliche Abstände geben)

tabelle 1

<table align="center" width="90%" border="1">
<tr>

Hier ist die erste Tabelle= table definiert, jede Tabelle besteht aus Zeilen= tr und Zellen= td, center= zentriert, width= Breite hier 90%, border= Rahmen hier 1px (lässt sich weiter gestalten)

linke tabellenzelle (td) mit bild 1

<td style="width: 45%; text-align: center; padding: 30px 10px;">
<img src="BILDADRESSE" width="Bildbreite" alt="alternativtext für Bild"></td>

diese linke Tabellenzelle ist 45% breit (width), zentriert, Innenabstand (padding) vom Rahmen zum Bild: oben+unten je 30px, links+rechts je 10px, für das Bild wird die Bildadresse (URL) angegeben sowie Breite+evtl. zusätzlich die Höhe=height, das beschleunigt die Ladezeit und ein Alternativtext nützt, wenn das Bild mal ausfällt

rechte tabellenzelle (td) mit text zu bild 1

<td style="width: 45%; font: italic bold 1.2em Arial Unicode MS; color: #636363; padding: 30px;">

<p style="font: bold 1.5em Palatino Linotype; color: #636363; padding: 30px 0 10px 50px;">Beispieltext</p>

die rechte Tabellenzelle neben dem Bild ist ebenso 45% breit, zusammen mit der linken also die 90% der Gesamt-tabelle,
Schriftdefinition (font): kursiv (italic), fett (bold), Größe (1.2em ...), Schriftart (Arial...) [bei dieser verkürzten Schreibweise wieder die Reihenfolge beachten, sonst wird es nicht ausgeführt], Schriftfarbe (color)
Abstand Text zu Rahmen (padding) rundum 30px bzw. um <p> (hier als Überschrift) herum 30px 0 10px 50px (oben,rechts,unten,links)

rechte tabellenzelle beschreibungstext als aufzählungsliste (ul)

<ul>
<li>Text Text Text</li>
<li>Text Text Text</li>
<li>Text Text Text</li>
<li>Text Text Text</li>
<li>Text Text Text</li>
<li>Text Text Text</li>
</ul>

Die Beschreibung ist hier als Aufzählungsliste (ul) gestaltet, unterteilt in einzelne Punkte (li), welche man jeweils noch zusätzlich in der Gestaltung verändern könnte

</td>

Ende des Textes

</tr>
</table>

<!-- ====== ende der ersten tabelle ====== -->


selbstverständlich könnte man auch Bild und Text von links nach rechts vertauschen

man kann nun beliebig viele derartige Tabellen untereinanderreihen, wobei man darauf achten sollte, dass die Bilder gleich breit sind (z.B. 400-500px), da sich sonst die Tabellenrahmen entsprechend verschieben, wenn das Bild zu breit wird und dadurch die gleichmäßige Optik untereinander gestört würde.


die weiteren tabellen (2+3)

der Vorlage wurden wie oben erstellt - ausser dass der Text nicht als Liste (ul) geschrieben wurde.

<td style="width: 45%; font: italic bold 1.5em Arial Unicode MS; color: #636363; padding: 60px;">
Text Text Text
Text Text Text
</td>

der text unter den tabellen

<p style="font: bold 1.3em Arial Unicode MS; color: #636363; padding: 60px;">
<font color="#A30097">Versandkosten:</font>
<br>Maxibrief 2,20 EUR trägt Käufer
<br>bei besonderen Versandwünschen bitte <a href="mailto:deine_mail-adresse@xyz">email</a>-Kontakt
<br>
<br><font color="#A30097">Privatverkauf</font> - daher keine Rücknahme oder Gewährleistung
</p>

Erklärung zur Schriftformatierung siehe oben, zusätzlich wurden die beiden Hervorhebungen nicht mit css sondern mit html-tags farblich verändert (font color), daher die Schreibweise etwas anders (ohne Bindestrich)

verlinkung der emailadresse zum anklicken

<a href="mailto:deine_mail-adresse@xyz">email</a>

Grafik: Auge