CSS Tabellen stylen | CSS Tutorial Deutsch

Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.

In diesem Video lernst du, wie man Tabellen in CSS stylen kann.
Das erkläre ich anhand eines Beispieldesigns.

Dafür setze ich als Erstes die font-size auf 32px und gebe der Tabelle einen Border.
Um zwischen den Tabelleninhalten Linien zu bekommen, muss ich jedem einzelnen td und th einen border geben. Dabei entstehen jedoch viele überflüssige Linien, da jede einzelne Zelle um sich herum einen border bekommt. Dies kann ich beheben, indem ich bei der Tabelle, die CSS-Eigenschaft "border-collapse" auf "collapse" setze.
Um etwas Platz zu schaffen, gebe ich jedem td und th ein padding von 25px in die Höhe und 55px in die Breite. Außerdem setze ich das text align auf left.
Um die Farbe der Tabelle festzulegen benutzt man die background-color Eigenschaft. Des Weiteren kriegt die Tabelle einen box-shadow, damit sie sich etwas vom Hintergrund abhebt.
Damit sich die Kopfzeile etwas vom Rest unterscheidet, gebe ich dem thead einen leichten Schatten und setze die Hintergrundfarbe auf royalblue.
Etwas, das man sehr häufig bei Tabellen sehen kann ist, dass sich jede Zweite Reihe farblich etwas unterscheidet. Um das zu bewerkstelligen nehme ich die table row (tr) und wende darauf den Selektor nth-child() an. Damit wählt man ein bestimmtes Element aus. Nämlich das, was in den Klammern steht. Um das CSS jeder zweiten Reihe zu ändern, muss ich even in die Klammern schreiben.
Außerdem soll die Tabelle einen border-radius bekommen. Das ist gar nicht so einfach, wie zunächst vermutet. Wenn man nämlich den background vom Tabellen-Kopf eingefärbt hat, lässt sich der border-radius von der ganzen Table nicht verändern. Zumindest hat er auf den eingefärbten Tabellen-Kopf keinen Einfluss. Wo er aber funktioniert ist bei jeden einzelnen th Zellen. Jetzt entsteht bei jedem th ein Borderradius. Wir wollen aber nur beim ersten und beim letzten th einen Borderradius haben und das auch nur bei der jeweils äußeren Ecke. Dafür verwenden wir den first-child und den last-child Selektor und setzen jeweils den passenden border-radius.

***************************************************************************
Verwendete CSS Eigenschaften und Selektoren:
- font-size
- background-color
- border
- border-collapse
- padding
- text-align
- box-shadow
- td, th
- border-radius
- thead
- table
- tr:nth-child()
- nth-child()
- nth-child(even)
- th:first-child
- first-child
- th:last-child
- last-child

***************************************************************************

Musik im Hintergrund:
Music: Steps by Anno Domini Beats

***************************************************************************

Tags für den Algorithmus ;)
CSS Tutorial für Anfänger, CSS Tutorial deutsch, css beginner tutorial, html tabellen, css tabellen ,css grundlagen, tabellen in html, tabellen in css, css tutorial german, tables in css, css anfänger, anfängertutorial css, tabelle stylen, tabelle in css stylen, html tabelle stylen, tabellen design, style html table, tabelle stylen in css, css tabels, tabelle border-radius, tabelle stylen css

[chiroaksun]

Einfach nur genial wie du das alles erklärst. Videos für die man eigentlich 20-30 min braucht innerhalb kürzester Zeit erklärt, dass jeder Anfänger es verstehen kann. TOP ARBEIT!!!

[Shzzle_]

Moin! Vielen Dank für diese schnell verständliche Anleitung! Habe es gerade selbst ausprobiert. Endlich schöne Tabellen :) :)
Eine Sache noch: Das nth-child(even) verhindert offenbar, dass bei einer geraden Anzahl an Reihen der border-radius auf die letzte Zeile angewandt wird. Habe lange gegoogelt und irgendwo gesehen, dass jemand "overflow: hidden" in das Element "table" gesetzt hat. Und voila: es funktioniert! Verstanden hab ich es allerdings nicht wirklich was overflow hier genau macht ...

[Ventrox_tv]

Tipp: Wiedergabegeschwindigkeit auf 0.75 stellen .(So kommt man besser mit).

[sinanfischer]

Bin gerade auch am HTML lernen und bin Baff wie kurz und gut du die Inhalte rüber bringst! Verstehe alles direkt und alles tip top zum weiteren anwenden. Vielen Vielen dank für deine Videos. Abo ist aufjedenfall da und freue mich die Bibliothek durchzuschauen.

[Niggolas-lydv]

Finde das Video gut ! Aber vielleicht könntest du mal so eine art Vorlage in die Beschreibung machen , sodass man sie kopieren kann, dann könnten wir als Anfänger das leichter umsetzen.

[clxppy]

Deine Videos helfen mir wirklich sehr bei meinem Projekt weiter, sie sind leicht nachvollzuziehen und sehen immer wieder TOP aus.
Danke!

[DennisHorn]

Prima erklärt und auf den Punkt! Danke!

[Superimperator]

alter geil! kurz und fucking infogeladen! genau was die heutige zeit braucht.

[twitchers]

Wenn ich die Ecken der Tabelle runden will werden die unteren Beiden Ecken auch nicht gerundet wenn es eine "even"-Zeile ist, da wir dort ja den Hintergrund ändern

[DavutYayikci]

Wäre schön, wenn wir den Code direkt kopieren könnten. Als beispiem

[Paul-ixjs]

Bei mir verändert sich nix in der html tabelle wenn ich den CSS code schreibe
Wie kann man das beheben ?
Sonst super gutes Video :=)

[marcel_wendler]

Coole Erklärungen 👍 sind noch Videos für Beck-End geplant?

[upphil]

Wenn ich meine Tabelle komplett zentrieren möchte, benutze ich für den body display: flex; justify-content: center; und align-items: center;. Allerdings möchte Letzteres nicht funktioneieren. Vertikal bekomme ich es nicht hin. Kannst du mir sagen, warum?

[erickbecker]

ich musste bei meiner Tablle table.table2 tbody:nth-child (even) {} schreiben damit es funktioniert liegt es daran das ich meine tabelle 2 überall mit table2 th tr usw in css so definiert habe ?

[olafkliemt]

zahlen rechtsbuendig, vierstellige jahreszahlen zentriert.