Wie erzeuge ich in HTML meine Tabelle
und bestimme dabei Farbe, Format und dynamische Interaktion?

HTML <tags>
HTML <tags> für Tabellen

HTMLBedeutung
<table>Definiert die Tabelle. TABLE enthält die weiteren Tabellen-Elemente.
<caption>Optionale Beschreibung der Tabelle. Die Tabelle erscheint per Standard automatisch überhalb der Tabelle.
<thead> Definiert den Kopf der Tabelle. Tabellen-Kopf. Der THEAD der Tabelle wird per Standard immer über dem TBODY angezeigt.
<th>Tabellen-Kopf-Zelle im Tabellen-Kopf. Mit der Eigenschaft VERTIKAL-ALIGN kann Text und INLINE-Inhalt auch vertikal zentriert werden.
<tbody>Tabellen-Körper, der Hauptteil einer Tabelle. Per Standard erscheint er TBODY unterhalb von THEAD und überhalb von TFOOT.
<tr>Tabellen-Zeile (Table Row). Mit TR werden Zeilen sowohl in THEAD, TBODY und TFOOT markiert. Eine Zelle (TD oder TH) muss in einer Zeile (TR) liegen.
<td>Tabellen-Daten (Table Data) im Hauptteil der Tabelle. Mit der Eigenschaft VERTIKAL-ALIGN kann Text und INLINE-Inhalt auch vertikal zentriert werden.
<tfoot>Definiert den Fuß der Tabelle. Per Standard liegt der TFOOT unterhalb von TBODY.

HTML Attribute für Tabellen

AttributBedeutung
colspan="..."Attribut für <th> und <td&gt. Überbrückt Spalten bzw. Säulen in der Tabelle um Zellen horizontal von links nach rechts zu Verbinden. Es wird ein Zahlenwert zugeordnet und entsprechend viele Zellen verbunden.
rowspan="..."Attribut für <th> und <td>. Überbrückt Zeilen in der Tabelle um Zellen vertikal von oben nach unten zu Verbinden. Es wird ein Zahlenwert zugeordnet und entsprechend viele Zellen verbunden
id="..."ID definiert und identifiziert ein Element exakt und kann deswegen auf der Webseite nur einmal benutzt werden. Kann auf jedes Element angewendet werden. ID können direkt verlinkt werden.
class="..."Klasse definiert Eigenschaften die mehrfach genutzt werden. Kann auf jedes Element angewendet werden. Es können auch mehrere Klassen gleichzeitig bei einem Element zugeordnet sein. Gestaltung sollte über Klassen und nicht über ID umgesetzt werden.
style ="..."Alle CSS Eigenschaften können auch direkt einem Element als Attribut zugeordnet werden. Dies sollte man jedoch zugunsten einer globalen Gestaltung mit einer CSS möglichst vermeiden. Einige Javascript Effekte, z. B. Parallax Effekte, basieren jedoch auf der Echtzeit-Veränderung des einzelnen STYLE Attribut.

CSS Box
CSS Box Eigenschaften bei Tabellen

CSSBeispiel-WerteBedeutung
margin:5px 3px 8px 5px;Aussen-Abstand zum nächsten Element. Im Uhrzeigersinn: 12 Uhr (oben), 3 Uhr (rechts), 6 Uhr (unten), 9 Uhr (links).
border-spacing:10px;Abstand zwischen den Zellen. Die Eigenschaft kann nur auf <table> angewendet werden
padding:5px 3px 8px 5px;Innen-Abstand des Inhalts zum Rand. Wie bei Margin: Im Uhrzeigersinn: 12 Uhr (oben), 3 Uhr (rechts), 6 Uhr (unten), 9 Uhr (links)
padding-top:30%; 20pxPadding kann auch mit -top, -left, -bottom oder-right direkt angesprochen werden.
width:200px;Die Breite von Text bestimmen. Hier besteht eine Wechselwirkung mit der Eigenschaft display. Diese ist Standard display: block. Block-Elemente können in der Breite eingestellt werden. Padding, margin und border-width werden darauf addiert.
height:200px;Die Höhe von Text bestimmen
min-width:150px;Für Breite und Höhe lässt sich ein minimaler Wert definieren.
max-width:400px;Für Breite und Höhe lässt sich ein maximaler Wert definieren.
vertical-align:top; baseline; middle, sub; super; (...) Vertikale Ausrichtung des Inhalts von einem Element mit der Eigenschaft display: inline
box-shadow:6px 4px 5px 0px #000;Schlagschatten bei dem horizontaler und vertikaler Versatz, Weichzeichner, Intensität und Farbe eingestellt werden können. Empfehlenswert ist dabei die Benutzung von rgba Farben.

CSS Farbe
CSS Farb-Eigenschaften

CSSWerteBedeutung
color:#00ff00; (...)Zeichenfarbe
background-color:rgba(240, 240, 240, 0.5); (...)Hintergrundfarbe
opacity:0.9;Deckkraft. Je höher die Opazität, desto niedriger die Transparenz.
background:linear-gradient(to right, red , blue);Kurzschreibweise für die Hintergrund-Eigenschaften. Ein Farbverlauf ist möglich. Verläufe sollten mittels Editor komponiert werden. Gradient Ergänzt die Eigenschaft background um die Möglichkeit eines Verlaufs. http://www.colorzilla.com/gradient-editor/

CSS Farb-Werte

CSS-WerteNameBedeutung
red;Color-Key WordDefinierte Farbnamen
#ff0000; #0f0; Hex-RGBHexadezimale RGB. Je niedriger die Zahl, desto dunkler und je höher der Buchstabe desto heller. 0-9a-f
rgb(255, 0, 0); RGBRot, Grün, Blau
rgba(255, 0, 0, 0.4); RGBARot, Grün, Blau, Alpha
transparenttransparentDurchsichtig
currentColorcurrentColorBezieht sich auf die Farbe die bei dem Element über Color eingestellt ist.
hsl(0, 100%, 50%)HSLFarbton, Sättigung, Helligkeit
hsla(90, 100%, 50%,0.6)HSLAFarbton, Sättigung, Helligkeit, Alpha

CSS Kontur
CSS Kontur-Eigenschaften bei Tabellen

CSSWerteBedeutung
border2px solid #0f0;Praktische Kurzschreibweise die border-width, border-color und border-style zusammenfasst
border-collapse:separate; collapseSteuert ob Rahmen zeilenweise durchgezogen (collapse) oder jede Zelle einzeln (separate) umrandet ist
border-color:#ff0000; redFarbe kann mit den CSS-Color-Definitionen bestimmt werden: (color-key-word; #hex; rgb; rgba; hsl; hsla;)
border-radius:2px;Stärke der abgerundeten Ecken in Pixel. Verträgt sich in Tabellen nicht mit border-collapse
border-style:none; solid; dotted; dashed; groove;Art der Kontur kann beeinflusst werden: none; solid; dotted; dashed; groove; double; ridge; inset; outset;
border-top-width:6px;Mit top, left, bottom und right kann die Kontur unabhängig voneinander adressiert werden.
border-width:1px; 5px 2px 8px 2px;Stärke der gesamten Kontur. Einzelne Rahmen ansprechen.

:pseudoclass
CSS pseudo-classes für Tabellen

CSSBedeutung
:emptyElemente ohne Inhalt.
:first-childDas erste Kinder-Element wird ausgewählt.
:first-of-typeDass erste Element seiner Art wird ausgewählt.
:hoverVeränderung bei Kontakt mit dem Mauszeiger. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}. :HOVER kann im Gegensatz zu :LINK :VISITED und :ACTIVE auf jedes sichtbare Element angewendet werden. :HOVER spielt eine wichtige Rolle in der Benutzerfreundlichkeit. Mit :HOVER wird dem Nutzer eine Möglichkeit für Interaktion signalisiert.
:lang(...)Auswahl von Elementen die mit der definierten Sprache markiert sind.
:last-childDas letzte Kind-Element.
:last-of-typeDas letzte Element seiner Art.
:linkUnbesuchte Links, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.
:not(selector)Wählt alle Elemente aus, welche nicht zutreffen.
:nth-child(n)Wählt das n-te Kind-Element aus. Für n kann eine beliebige Zahl eingesetzt werden. Es können mit dem Wert ODD (Ungerade) und EVEN (Gerade) für n außerdem leicht wiederholende Muster von Eigenschaften erzeugt werden.
:nth-last-child(n)Wählt das n-te-letzte Kind seiner Art aus. Für n kann eine beliebige Zahl eingesetzt werden. Es können mit dem Wert ODD (Ungerade) und EVEN (Gerade) für n außerdem leicht wiederholende Muster von Eigenschaften erzeugt werden.
:nth-last-of-type(n)Wählt das n-te-letzte Element seiner Art aus. Für n kann eine beliebige Zahl eingesetzt werden. Es können mit dem Wert ODD (Ungerade) und EVEN (Gerade) für n außerdem leicht wiederholende Muster von Eigenschaften erzeugt werden.
:nth-of-type(n)Wählt das n-te Element seiner Art aus. Für n kann eine beliebige Zahl eingesetzt werden. Es können mit dem Wert ODD (Ungerade) und EVEN (Gerade) für n außerdem leicht wiederholende Muster von Eigenschaften erzeugt werden.
:only-of-typeWählt alle Einzel-Elemente dieser Art aus.
:only-childWählt alle Einzelkinder aus.
:rootWählt das erste Eltern-Element aus. Das ist das HTML Element.