Porno Webmaster

CSS Table Style

Hier kann man eine Tabelle für seinen Internet Auftritt per CSS stylen es gibt da mehr Möglichkeiten als man denken sollte. Die Border Stylings kann man natürlich auch noch untereinander mischen so das man eine gestrichelte Linie und eine gepunktete Linie in einer Tabelle hat. CSS Styling bedeutet schlanker Code und die volle Styling Kontrolle über seinen Internet Auftritt.

background-color: – Hier kann man die Farbe des Hintergrundes festlegen.
border-top-width: Hier wird die Breite des Rahmens oben festgelegt.
border-top-style: Hier wird der Style des Rahmens der Tabelle für den oberen Rand festgelegt.
border-bottom-width: Hier wird die Breite des Rahmens unten festgelegt.
border-bottom-style: Hier wird der Style des Rahmens der Tabelle für den unteren Rand festgelegt.
border-right-width: Hier wird die Breite des Rahmens rechts festgelegt.
border-right-style: Hier wird der Style des Rahmens der Tabelle für den rechten Rand festgelegt.
border-left-width: Hier wird die Breite des Rahmens links festgelegt.
border-left-style: Hier wird der Style des Rahmens der Tabelle für den linken Rand festgelegt.
border-color: Hier wird die Frabe des Rahmens festgelegt.

Bei der Margin Angabe wird der Abstand zum Browser Fenster festgelegt. Natürlich dürfen sich solche Angaben nicht überschneiden.

margin-top: Hier wird der Abstand zum nächst höheren Objekt entweder der Browser Rand oder eine andere Tabelle angezeigt.
margin-bottom: Hier wird der Abstand zum nächst unteren Objekt entweder der Browser Rand oder eine andere Tabelle angezeigt.
margin-left: Hier wird der Abstand zum nächst linken Objekt entweder der Browser Rand oder eine andere Tabelle angezeigt.
margin-right: Hier wird der Abstand zum nächst rechten Objekt entweder der Browser Rand oder eine andere Tabelle angezeigt.

Bei der Padding Angabe werden Abstände innerhalb der Tabelle für Objekte wie Zellen, Texte oder Bilder zum inneren Rand festgelegt.

padding-top: Zeigt den Abstand innerhalb der Tabelle zum oberen Rand an.
padding-bottom: Zeigt den Abstand innerhalb der Tabelle zum unteren Rand an.
padding-right: Zeigt den Abstand innerhalb der Tabelle zum rechten Rand an.
padding-left: Zeigt den Abstand innerhalb der Tabelle zum linken Rand an.

Durch diese Angaben kann die Höhe und Breite der Tabelle festgelegt werden:

width: Hier wird die Breite der Tabelle festgelegt.
height: Hier wird die Höhe der Tabelle festgelegt.
color: – hier legt man die Schriftfarbe fest.

Style Dashed hier handelt es sich um eine gestrichelte Linie Beispiel für Dashed Style:

table.dashed {
background-color: yellow;
border-top-width:10pt;
border-top-style:dashed;
border-bottom-width:10pt;
border-bottom-style:dashed;
border-right-width:10pt;
border-right-style:dashed;
border-left-width:10pt;
border-left-style:dashed;
border-color: black;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 100px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
width: 600px;
height: 400px;
}

Style Solid hier handelt es sich um eine durchgehende Linie Beispiel für Solid Style:

table.solid {
background-color: red;
border-top-width:10pt;
border-top-style:solid;
border-bottom-width:10pt;
border-bottom-style:solid;
border-right-width:10pt;
border-right-style:solid;
border-left-width:10pt;
border-left-style:solid;
border-color: black;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 600px;
height: 400px;
}

Style Double hier handelt es sich um zwei durchgehende Linien Beispiel für Double Style:

table.double {
background-color: red;
border-top-width:10pt;
border-top-style:double;
border-bottom-width:10pt;
border-bottom-style:double;
border-right-width:10pt;
border-right-style:double;
border-left-width:10pt;
border-left-style:double;
border-color: black;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 600px;
height: 400px;
}

Style Dotted hier handelt es sich um eine gepunktete Linie Beispiel für Dotted Style:

table.dotted {
background-color: red;
border-top-width:10pt;
border-top-style:dotted;
border-bottom-width:10pt;
border-bottom-style:dotted;
border-right-width:10pt;
border-right-style:dotted;
border-left-width:10pt;
border-left-style:dotted;
border-color: black;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 600px;
height: 400px;
}

Wenn man die Beispielseiten aufruft sollte man mal in den Quelltext schauen um zu sehen wie man die externe CSS Datei einbindet und um zu sehen das man einen echt schlanken Code durch CSS Style erzeugen kann. Außerdem kann man auch sehen wie man die Objekte benennen muß. Man kann die Codes kopieren und damit ein wenig rumspielen, das macht Spaß und bringt neue Erkentnisse.