Willkommen bei
Enrico Baumann

Formulare und Tabellen für die eigene Webseite, können auf Wunsch individuell angefertigt werden.

Sie befinden sich hier: > Start > Formulare > Tabellen > Fake Mails > Kontakt > Impressum

Tabellen:

Wofür werden Tabellen benötigt?

Eine Tabelle kann beispielsweise bei Sportresulaten, Fahrplan, Stundenplan u.v.m. zum Einsatz kommen.
Hierbei wird ein Raster angelegt, bei dem die Struktur auf einfache Weise, zum Ausdruck kommen kann.
Mit CSS lässt sich das Ganze dann dementsprechend farblich designen.

Beispiel 1:
ä ä ä ä
Ä Ä Ä Ä
ö ö ö ö

Eine einfache Tabelle lässt sich hauptsächlich aus 3 Tags generieren, die eine Zelle füllen.
Weitere Zeilen und Zellen, können je nach Bedarf, ergänzt werden.
Dementsprechend würde ein einfacher HTML-Code, so aussehen, natürlich ohne Farben. 🙂
Die Farben sind lediglich zur Veranschaulichung gedacht und dienen nur der "Übersicht halber". 🐁

<table>
<tr>
<td> ä </td>
</tr>
</table>
Eine Zelle <td> </td>, muss immer in einer Zeile, zwischen einem <tr> </tr> Tag stehen! Theoretisch wäre es auch möglich, dieses Tag aus zu lassen. Der Web-Browser, so wie der Validierungsdienst W3C, quittiert dies jedoch mit einer Fehlerausgabe!
Beispiel 2:
Sonderzeichen für (X)HTML:
Zeichen: benannte Entity: Dezimal: Hexa­dezimal:
ä &auml; &#228; &#xE4;
Ä &Auml; &#196; &#xC4;
ö &ouml; &#246; &#xF6;

Bei diesem Beispiel, wurden weitere 2 Tags, für den Tabellenkopf hinzugenommen.
Das thead Element, kann eine Gruppen von Kopfzeilen darsstellen, indem das th Tag mehrfach vorkommen darf.

Im Kopfbereich des ersten th Tag, wurde das Attribut colspan=″4″ hinzugefügt. Dies dehnt die Zelle über 4 th Tags nach rechts aus.
Mittels rowspan=″3″, würde sich die Zellenspanne somit über 3 Zellen nach unten ausdehnen.

<thead>
<tr>
<th colspan="4"> Sonderzeichen für (X)HTML: </th>
</tr>
<tr>
<th> Zeichen: </th>
<th> benannte Entity: </th>
<th> Dezimal: </th>
<th> Hexa­dezimal: </th>
</tr>
</thead>
Mit <thead>, <tbody> und <tfoot>, lässt sich eine Tabelle in logische Bereiche unterteilen. Sind aber nicht unbedingt notwendig. Das <th> Tag, muss auch hier wieder, zwischen einem Zeilen <tr> Tag stehen. Als Tabellenkopf, wird die Schrift fett und zentriert dargestellt.
Mittels colspan bzw. rowspan, lassen sich die Zellen nach recht, oder nach unten ausdehnen.
Beispiel 3:
Tabelle Design © Enrico Baumann
Sonderzeichen für (X)HTML:
Zeichen: benannte Entity: Dezimal: Hexa­dezimal:
ä &auml; &#228; &#xE4;
Ä &Auml; &#196; &#xC4;
ö &ouml; &#246; &#xF6;
www.ricba.ch

Für eine Tabellenüberschrift, kommt das caption Tag zum Einsatz. Diese wird jedoch nicht innerhalb eines Tabellenrahmens eingefügt,
sondern gleich zentriert darüber. Dementsprechend muss das colspan Attribut nicht angegeben werden.

<table>
<caption> Tabelle Design © Enrico Baumann </caption>
<thead>
<tr>
<th colspan="4"> Sonderzeichen für (X)HTML: </th>
</tr>
<tr>
<th> Zeichen: </th>
<th> benannte Entity: </th>
<th> Dezimal: </th>
<th> Hexa­dezimal: </th>
</tr>
</thead>
<tbody>
<tr>
<td> ä </td>
<td> &auml; </td>
<td> &#228; </td>
<td> &#xE4; </td>
</tr>
</tbody>
<tfoot><tr><td colspan=″4″> www.ricba.ch </td></tr></tfoot>
</table>
Das <caption> Tag, wird für eine Tabellenüberschrift eingesetzt. Sie kann nur einmal in einer Tabelle vorkommen und muss gleich nach dem <table> Tag angegeben werden. Die Fusszeile wird innerhalb des <tr> Tag angegeben. Kann somit im <th> oder <td> Element platziert werden. Bei <th> wird die Schrift zentriert und fett dargestellt.
Beispiel 4:

Ein fertiges Beispiel, könnte in etwa so aussehen.

Sonderzeichen für (X)HTML:
Zeichen: benannte Entity: Dezimal: Hexa­dezimal:
ä &auml; &#228; &#xE4;
Ä &Auml; &#196; &#xC4;
ö &ouml; &#246; &#xF6;
Ö &Ouml; &#214; &#xD6;
ü &uuml; &#252; &#xFC;
Ü &Uuml; &#220; &#xDC;
ß &szlig; &#223; &#xDF;
€ &euro; &#8364; &#x20AC;
© &copy; &#169; &#xA9;
& &amp; &#38; &#x26;
Geschütztes
Leerzeichen		 &nbsp; &#160; &#xA0;
< &lt; &#60; &#x3C;
> &gt; &#62; &#x3E;
" &quot; &#34; &#x22;
' &apos; &#39; &#x27;
Die wichtigsten benannten Entities in Dezimal- und Hexadezimal-Schreibweise.
Autor © Enrico Baumann
Wer sich meine Tabelle zu Hilfe nehmen möchte, der kann sich das gesamte Skript (.css + .html), als ZIP-Datei herunterladen.
Das fertige Beispiel, ist selbstverständlich Virenfrei und wurde beim W3C auf Fehler überprüft!
Damit die CSS-Datei greift, muss der Ordner entpackt werden. Erst nach dem 2-ten öffnen der HTML-Datei, wird das Design sichtbar.
Beinhaltet 2 Ordner, Tabelle und CSS_HTML mit 3 Dateien.
Der Inhalt mit 1x ricbatabelle.css, 1x tabelle.html und einer PDF-Datei, 1x entities.pdf.
📁 ZIP-Datei
Bei weiteren Fragen oder Schwierigkeiten, dürft ihr euch gerne an mich wenden, oder über mein Gästebuch melden.

Gästebuch:

Name *
Überschrift
Kommentar *
Die mit * gekennzeichneten Felder sind Pflicht!
⤴️
01.07.2023 Design: © Enrico Baumann Impressum