Home CSS3, Tutorials >> CSS3 Tutorial – Praktische Tabellen mit runden Ecken

CSS3 Tutorial – Praktische Tabellen mit runden Ecken

27. März 2012

CSS3 Tutorial – Praktische Tabellen mit runden Ecken: 1 Star2 Stars3 Stars4 Stars5 Stars 5,00 von 5 Punkten, basierend auf 2.093 abgegebenen Stimmen.
Loading ... Loading ...

Tabellen Konstrukte sind zwar nicht mehr „in“ aber verwenden kann man sie dennoch. Vor allem wenn man Daten schön gegenüberstellen möchte, ist das nützlich. CSS3 sorgt dabei auch noch für eine vernünftige Optik.

Gerade wenn man viele Daten präsntieren möchte, ist die tabelle noch immer das beliebteste Element. Das Design einer Tabelle anzupassen ist aber für viele noch immer eine Herausforderung. In diesem Tutorial erstellen wir eine leicht lesbare Tabelle, in der ich am Ende dieses Artikels noch einmal alle bisher erschienenen Artikel der CSS3 Tutorial Serie verlinke.

Coole CSS3 Tabellen

Tabellen sollen immer einfach zu erstellen, einfach zu lesen und einfach zu bearbeiten sein. Genau dieses Features bietet unsere CSS3 Tabelle:

  1. Runde Ecken ohne Grafiken
  2. Leicht zu erweitern
  3. Leicht zu lesen
  4. Leicht zu bearbeiten

Beginnen wir mit dem leichtesten, den runden Ecken.

Abgerundete Ecken der Tabelle

Der Trick dabei ist: Der Default Wert von „border-collapse“Mit dieser Eigenschaft können Sie festlegen, ob Einzelrahmen von Tabellenzellen zusammenfallen sollen oder nicht. ist „separate“separate = Zellenrahmen fallen nicht zusammen (Ausgangswert seit CSS 2.1).
collapse = Zellenrahmen fallen zusammen (Ausgangswert in CSS2).
und wir setzen den Wert „border-spacing“Mit dieser Eigenschaft bestimmen Sie den Abstand zwischen Rahmen im sichtbaren Gitternetz einer Tabelle. auf 0. So siehts aus:

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
}

Für den Internet Explorer 7 und niedriger muss die extra Zeile rein, damit auch diese Browser die Tabelle interpretieren können.

Anschließend müssen wir noch ein paar Ecken abrunden:

th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

Es fehlt noch die Klasse für die Highlights. Denn die Tabelle soll ja auch ein wenig nach was aussehen. Runde Ecken reichen da nicht immer aus, vor allem, wenn man gerne alles individuell gestalten möchte.

.bordered tr:hover
{
  background: #fbf7e4;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

Was jetzt noch fehlt ist die HTML Notation. Für alle diejenigen, die nicht wissen, wie man eine Tabelle gestaltet empfehle ich einen Blick bei SelfHtml zu riskieren. Da ist alles sehr schön beschrieben. Alternativ kannst auch der folgende Code erweitert werden:

<table class="bordered">
    <thead>

    <tr>
        <th>#</th>        
        <th>CSS3 Tutorials</th>
        <th>Thema</th>
    </tr>
    </thead>
    <tr>
        <td>1</td>        
        <td>Verläufe im Hintergrund mit Css3</td>
    </tr>    
</table>

Selbstverständlich kommt jetzt auch noch ein Beispiel. Wie Eingangs schon erwähnt habe ich alle Artikel zu CSS3 noch einmal hier in der Tabelle aufgelistet:

Beispiel

# CSS3 Tutorials
1 Verläufe im Hintergrund mit Css3
2 Runde Ecken erstellen mit Border Radius
3 Border Images mit Css3
4 Layout mit mehrere Spalten ohne Div´s und Tabellen
5 RGBA Farbwerte mit Alpha Channel in Css3
6 Dreiecke mit Css3 gestalten
7 Sprechblasen mit Css3 gestalten
8 Tooltips mit Css3 gestalten



Also eigentlich relativ einfach. Wie überall einfache Klassen und Notationen. Aber das Ergebnis sieht wesentlich besser aus, als die normalen Tabellen.

Quellcode komplett

damit das kopieren etwas leichter geht habe ich den kompletten Code noch einmal aufgelistet:

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;    
}

.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;        
}

.bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;    
}    
   
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}

.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}

.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}


Praktische Tabellen mit runden Ecken – Fazit

Tabellen kann man also auch schöner gestalten. Mit solchen CSS Möglichkeiten zu arbeiten macht Spaß und macht den Blog einzigartig. In den kommenden Tutorials werde ich noch weitere Spielereien mit CSS3 vorstellen, die den Blog noch weiter verschönern können. Also dran bleiben und RSS-Feed abonnieren.

Bleib in Verbindung via...

RSS abonnieren Facebook Fan werden Follow Me

{ 3 comments… read them below or add one }

1 Thomas März 27, 2012 um 15:15

Danke Sascha,

ich habe das bisher immer mit Grafiken gelöst und mit CSS konnt ichs nicht, weil ich nicht so der Coder bin ;-)
Sehr cool!

2 Ralf April 1, 2012 um 18:19

Danke für den gut dokumentierten Code! Werd’ das Ganze dieser Tage auf einem Projekt einsetzen bzw. die dort vorhanden Tabellen “aufhübschen”.

Viele Grüße,
Ralf

3 Marcello April 2, 2012 um 05:18

Besten Dank für dieses Tutorial.
Alles ist sehr verständlich geschrieben und ich konnte das bereits bei einer meiner Webseiten gut gebrauchen. Es sieht einfach schöner aus mit runden “Ecken”.

Leave a Comment

Hinweis: Nur echte Namen verwenden | Keine Verweise auf Unterseiten! Ich lösche solche Kommentare!

Previous post:

Next post:

Letzte Artikel

  • spielcasino.net Für Zwischendurch – Online zocken und Zeit vertreiben
    Verauchte Säle, Whiskey und Pokerkarten. Dazu viele verruchte Gestalten, die an dem Spieltisch ihr letztes Hab und Gut einsetzen. Der Stoff aus dem viele Filme geschmiedet sind. Waren es früher die restlichen Dollars, die von den Cowboys verzockt w...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #11 – Eine Woche gar nichts mehr
    Eine ganze Woche lang habe ich überhaupt nichts gemacht. Das lag zum einen einer Operation an meinem Knie, die ich auskuriert habe, und zum anderen an dem Testtool, das mir einfach keine neuen Werte ausgegeben hat. Jede Serie braucht einen Abschl...Mehr lesen...
  • Premium Themes aus Deutschland WordPress Theme gesucht? Hier wirst Du fündig!
    Immer mal wieder bastelt ein Blogger am eigenen Blog herum, weil er vielleicht die Optik nicht mehr ertragen kann. Mir geht das regelmäßig einmal im Jahr so. Und oft schaue ich mir dann die ganzen Theme Schmieden an, um herauszufinden, was es denn...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #10 – Halbzeit
    Die Hälfte ist geschafft. Social Bookmarking im 20 Tage oder 20 Bookmarks Test. Wie viel Ranking bringen Social Bookmarks? Was bringen sie überhaupt? Diese Frage soll diese Case Study beantworten. Deshalb habe ich mir einen Artikel aus meinem Ar...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #9 – Leichter Abfall des Rankings
    Ein neuer Tag in meiner SEO Case Study. Das Social Bookmarking hat mich bisher um rund 50 Plätze nach oben verschoben und heute ging es wieder ein wenig bergab. Glücklicherweise nur um einen einzigen Platz, den ich hoffentlich heute wieder aufho...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #8 – Bergsteiger Artikel
    Das Social Bookmarking, das in den letzten Monaten so furchtbar an Strafen von Google gelitten hat, wird derzeit auf die Probe gestellt. Welche Auswirkungen hat es noch auf das Ranking? Und wirkt es überhaupt? Google ist sehr streng gegen alle m...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #7 – Erneut ein Stückchen hoch
    Nachdem ich gestern über Stagnation geklagt habe, scheint Google meinen Ruf gehört zu haben und schiebt den Artikel wieder drei Plätze nach oben auf Platz 68. Damit habe ich Seite sechs im Ranking erreicht. Das nächste Ziel muss also lauten ...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #6 – Stagnation
    Social Bookmarking hat nach dem Google Penguin Update an Bedeutung verloren. Darin sind sich fast alle einig. Die Kommentare, die ich hier im Blog oder per Email bekommen habe, belegen das. Dennoch soll meine Case Study dahingehend für mich Klarheit...Mehr lesen...

Warum dieser Blog?

  • Geld verdienen im Internet

    ist der Traum vieler. BlogVerdiener beschäftigt sich mit den Möglichkeiten und vor allem mit den einzelnen Anbietern, die das Geld verdienen im Internet möglich machen. Dabei werden die Anbieter vorgestellt und in gewissen Zeiträumen immer wieder getestet. Das Hauptaugenmerk liegt dabei auf Seriosität. Betreffend der Auszahlungen, aber auch den Support. BlogVerdiener propagiert nicht den schnellen Reichtum im Internet, sondern soll aufzeigen, wie durch Arbeit im Netz Geld verdient wird. Ob als Texter, über Social Media Profile bis hin zu Youtube Videos, hier steht alles auf dem Prüfstand.

    Zusätzlich veröffentliche ich regelmäßig Tutorials, die zeigen sollen, wie man die Anbieter zum Geld verdienen benutzt. Auch ist mir wichtig den Verdienst immer weiter zu steigern. Jeder getestete und hier eingesetzte Anbieter soll monatlich die Auszahlungsgrenze überschreiten. Das Ziel ist es sich ein Online Einkommen aufzubauen, dass so groß ist, und so dauerhaft ist, dass ich mir keine Sorgen um meine Rente machen muss und sogar bereits mit 40 Jahren meinen Antrag stellen kann.

    Geld verdienen im Internet – Mit Arbeit und viel Lernen verbunden, ist es doch eine Beschäftigung die Spaß macht, gleichgesinnte vernetzt und tolle Partnerschaften ermöglicht.

    Ursprünglich war BlogVerdiener ein Hobby. Ich wollte mich mit der Möglichkeit beschäftigen „Geld im Internet“ zu verdienen. Daraus ist aber so viel geworden, dass ich es irgendwann aufschreiben musste und wollte. Zunächst bin ich auf einem anderen Blog gestartet, der aber BlogVerdiener weichen musste.

    Das Geld verdienen im Internet ist eine sehr spannende Sache, die sich ständig entwickelt. Neue Anbieter kommen hinzu, alte verschwinden. Es gibt diverse Themengebiete, in denen man sich selber entwickeln und lernen kann. Das ist der Punkt, der auf mich eine so unglaublich große Faszination ausübt. Und nicht zuletzt natürlich mein stetig wachsender Kontostand.

    Es macht Spaß Anbieter zu testen und dann für den eigenen Blog die Optimierungsarbeit zu leisten. So kann ich lernen, ausprobieren und nebenbei noch Geld verdienen. Dieser Gedanke ist irgendwann aber zu Ende gewesen.

    Jetzt ist das Hauptziel von BlogVerdiener das Geld verdienen im Internet reproduzierbar zu machen, so dass es für jeden funktioniert. Der Aufwand soll minimiert werden und das Ergebnis stetig verbessert.

Highlights

  • Geld verdienen im Internet mit Beispielen zu Belegen gehört sicherlich zu den Highlights hier im Blog. Hin und wieder starte ich 30 Tage Tests, in denen mehrere Anbieter der gleichen Branche gegeneinander antreten müssen. So zum Beispiel Februar 2013. Für diesen Monat gibt es die Mini Verdienst Challenge, in der ich diverse Anbieter, mit denen auf Facebook Geld verdienen möglich ist, gegeneinander antreten ließ. Das Ergebnis ist eine Seite hier im Blog, die alle Details haarklein auflistet und einige Anbieter für jedermann empfiehlt.

    So kann sich auch die Hausfrau einen netten Nebenverdienst aufbauen, ohne vorher teure Produkte zu kaufen oder anders auf die Nase zu fallen.

    Ein weiteres Highlight sind sicherlich die Empfehlungen der getesteten Fachbücher. Geballtes Wissen für angehende Blogger und Webmaster. Hier stecke ich viel Arbeit und Mühe hinein.

    Das dritte erwähnenswerte Highlight sind Tutorials, in denen ich mich mit dem Thesis Theme, CSS3, HTML5 und Wordpress auseinander setze. Hier kann vieles für andere Blogs adaptiert werden.

50 Suchanfragen

Kontakt