Tabellen Styles

Standard

Mal ein wenig was aus meinem Programmierer Alltag. Wie ihr sicherlich mitbekommen habt. Hab ich hier, wenn ich Tabellen benutze, ein recht, wie ich finde, schönes Design gefunden.

Ich hab lange gesucht und auch viel ausprobiert wie und womit ich Tabellen designe, es gibt ja nun Unmengen an Designs für Tabellen ;) und das schlimmste ist Finde ein Design welches auch so ansprechend ist das man es Simple umsetzen kann. Und ein Tabellen Design das sich in nicht mal 136 Zeilen ;) umsetzen lässt. PS. Das Design ist nicht IE Kompatible ;D vor allem was das :hover auf die tr betrifft.

Ich musste also etwas Finden das auch mit datatables.net verhochzeitet werden kann. Raus kam dann das was ihr nach dem Klick sehen könnt.

table
{
	border-collapse:separate;
	border-spacing:0px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	caption-side:top;
	width:100%;
	margin:5px auto;
	empty-cells:show;
	background-image:url('backdrop.png' );
	border-top: 1px solid #cbcbcb;
	border-bottom: 1px solid #cbcbcb;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 3px 1px rgba(0,0,0,.05);
	-moz-box-shadow: 0 1px 3px 1px rgba(0,0,0,.05);
	box-shadow: 0 1px 3px 1px rgba(0,0,0,.05);
}

Das border-collapse:separate und border-spacing:0px Sind hier wichtig. Da sich sonst das gesamte Styling verabschiedet. also versucht gar nicht erst collapse als eigenschaft ;) das Ergebnis währe erschreckend. Der Rest dient dem Styling.

table caption
{
	
	border:1px solid rgba(0, 85, 165,0.45);
	border-bottom:none;
	border-radius:5px 5px 0px 0px;
	margin-left:15px;
	width:80%;
	display:table-caption;
	font-weight:bold;
	text-align:left;
	text-indent:10px;
	font-weight:900;
	font-family:'Source Sans Pro';
	font-size:18px;
	line-height:26px;
	text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
	color: rgba(0,0,0,0.3);
	background: rgb(254,255,255);
	background: -moz-linear-gradient(top,  rgba(69,72,77,0.2) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.2)), color-stop(100%,rgba(0,0,0,0.2)));
	background: -webkit-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
	background: linear-gradient(to bottom,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3345484d', endColorstr='#33000000',GradientType=0 );

}

Die Tabellen Überschrift ist immer 80% der breite der Tabelle und setzt sich 15 Pixel nach Links ab.
Interessant ist hier der Halbdurchsichtige Schatten Effekt der Schrift. Wenn dieser beibehalten werden sollte. Wählt eine Fette Schriftart, die font-weight: bold auch zulässt. ansonsten währe der Effekt echt hässlich.

table caption strong,
table caption q
{
	font-family:'Source Sans Pro';
	font-size:18px;
}

;) Dient nur der Überschreibung der Standardschriftart.

table thead tr,
table tfoot tr
{
	background: -moz-linear-gradient(top,  rgba(69,72,77,0.2) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.2)), color-stop(100%,rgba(0,0,0,0.2)));
	background: -webkit-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
	background: linear-gradient(to bottom,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3345484d', endColorstr='#33000000',GradientType=0 );
}

Hintergrund Styling der Kopf- und Fußzeile in RGBA damit der Table Background „backdrop.png“ durchscheinen kann.

table thead th,
table tfoot th,
table tbody th
{
	font-weight:900;
	font-family:'Source Sans Pro';
	font-size:16px;
	line-height:26px;
	color: rgba(0,0,0,0.3);
	text-shadow:0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
	border-right: 1px solid rgba(0,0,0,0.0);
	border-bottom: 1px solid rgba(0,0,0,.15);
	border-top: 1px solid rgba(255,255,255,.9);
	border-left: 1px solid rgba(0,0,0,0.15);
	box-shadow:inset 0px 0px 9px -1px rgba(0,0,0,0.15);
}

Gesondertes Styling der Kopf, Körper und Fuß Zellen die als Tabellen Header dienen ;) als TH.
Box-Shadow und Text-Shadow dienen hier der Linienbildung und Text-Shadow erzeugt hier den selben Effekt wie bei der Table Caption. Deswegen hier auch die richtige Schriftart wählen.

table tfoot th
{
	border-top: 1px solid rgba(0,0,0,0.15);
	border-bottom: 1px solid rgba(255,255,255,0.5);
}

Umdrehen der Standard Border für den Fuß.

table tbody tr td
{
	padding:5px;
	font-weight:400;
	font-family:'Source Sans Pro';
}

Tabellen Zellen Formatierung. :) hier nur das nötigste der Rest obliegt euch ^^

table tbody tr:nth-child(even) td
{
	box-shadow:inset 1px 1px 1px -1px rgba(0,0,0,.3),inset -1px -1px 1px 0px rgba(255,255,255,.3);
}
table tbody tr:nth-child(odd) td
{
	box-shadow:inset 1px 1px 1px -1px rgba(0,0,0,.3),inset -1px -1px 1px 0px rgba(255,255,255,.3);
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );

}

Even und Odd Körper Zellen Styling: Die Even Zeilen sind alle transparent und haben nur einen inneren Box Shadow. Alle Odd Zeilen haben einen Vollständigen Hintergrund ohne Durchlässigkeit.

table tbody tr:hover td
{
	background: -moz-linear-gradient(top,  rgba(178,225,255,0.5) 0%, rgba(102,182,252,0.5) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178,225,255,0.5)), color-stop(100%,rgba(102,182,252,0.5)));
	background: -webkit-linear-gradient(top,  rgba(178,225,255,0.5) 0%,rgba(102,182,252,0.5) 100%);
	background: -o-linear-gradient(top,  rgba(178,225,255,0.5) 0%,rgba(102,182,252,0.5) 100%);
	background: -ms-linear-gradient(top,  rgba(178,225,255,0.5) 0%,rgba(102,182,252,0.5) 100%);
	background: linear-gradient(to bottom,  rgba(178,225,255,0.5) 0%,rgba(102,182,252,0.5) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#80b2e1ff', endColorstr='#8066b6fc',GradientType=0 );
}

Farbakzent beim Hovern einer Zeile, könnte auch auf einzelne Zellen umgeschrieben werden.

table thead tr:first-child th:first-child
{
	border-radius:5px 0px 0px 0px;
}
table thead tr:first-child th:last-child
{
	border-radius:0px 5px 0px 0px;
}
table tfoot tr:last-child th:first-child
{
	border-radius:0px 0px 0px 5px;
}
table tfoot tr:last-child th:last-child
{
	border-radius:0px 0px 5px 0px;
}

Rundet alle 4 äußeren ecken ab ;) Wird aller Wahrscheinlichkeit nicht im IE funzen. aber Ehrlich an dieser stelle scheiß ich auf den IE.

Hier nochmal als CSS Download: table.css und der in der Tabelle verwendete Hintergrund: backdrop.png, Und weil es so schön ist hier nochmal als Demo

Ich wünsch euch viel Spaß damit!

2 Gedanken zu “Tabellen Styles

  1. konnigito

    blos 4 warnungen und 5 fehler in der w3c validation für die demo. weniger als bahn, lufthansa und konsorten ;D

  2. Wyveres

    Wenn man bedenkt das es sich dabei um fehlende Charset und Doctype angaben handelt :P und ich ausversehen den schließenden Head tag an die falsche stelle gesetzt habe.

    Aber wirklich. vertraust du meiner programmierkunst nicht?

Die Kommentarfunktion ist geschlossen.