{"id":64,"date":"2012-08-22T18:34:03","date_gmt":"2012-08-22T18:34:03","guid":{"rendered":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/22\/16-5-attribute-fuer-tabellen\/"},"modified":"2025-12-01T16:32:07","modified_gmt":"2025-12-01T16:32:07","slug":"16-5-attribute-fuer-tabellen","status":"publish","type":"post","link":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/22\/16-5-attribute-fuer-tabellen\/","title":{"rendered":"16.5 css f\u00fcr Tabellen"},"content":{"rendered":"\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-23fa641\" id=\"rahmen-border\" data-block-id=\"23fa641\"><h2 class=\"stk-block-heading__text\">Rahmen (Border)<\/h2><\/div>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>CSS-Selektor<\/strong><\/td><td><strong>Eigenschaft<\/strong><\/td><td><strong>Erkl\u00e4rung<\/strong><\/td><td><strong>Beispiel<\/strong><\/td><\/tr><\/thead><tbody><tr><td><code>table<\/code>, <code>th<\/code>, <code>td<\/code><\/td><td><strong><code>border<\/code><\/strong><\/td><td>Definiert einen Rahmen.<\/td><td><code>border: 2px solid black;<\/code><\/td><\/tr><tr><td><code>table<\/code><\/td><td><strong><code>border-collapse<\/code><\/strong><\/td><td>Steuert, wie benachbarte Zellenrahmen dargestellt werden.<\/td><td><code>border-collapse: collapse;<\/code> <strong>(Wichtig f\u00fcr saubere Rahmen!)<\/strong><\/td><\/tr><tr><td><code>table<\/code><\/td><td><strong><code>border-spacing<\/code><\/strong><\/td><td>Definiert den Abstand zwischen den Zellrahmen (nur bei <code>border-collapse: separate;<\/code>).<\/td><td><code>border-spacing: 10px;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-cfa218d\" id=\"hintergrundfarbe\" data-block-id=\"cfa218d\"><style>.stk-cfa218d {margin-top:var(--stk--preset--spacing--20, min(1.5rem, 2vw)) !important;margin-bottom:var(--stk--preset--spacing--none, 0px) !important;}.stk-cfa218d .stk-block-heading__text{text-shadow:none !important;}<\/style><h2 class=\"stk-block-heading__text has-text-align-left\">Hintergrundfarbe<\/h2><\/div>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>CSS-Selektor<\/strong><\/td><td><strong>Eigenschaft<\/strong><\/td><td><strong>Erkl\u00e4rung<\/strong><\/td><td><strong>Beispiel<\/strong><\/td><\/tr><\/thead><tbody><tr><td><code>table<\/code>, <code>th<\/code>, <code>td<\/code><\/td><td><strong><code>background-color<\/code><\/strong><\/td><td>Legt die Hintergrundfarbe fest.<\/td><td><code>background-color: #f2f2f2;<\/code><\/td><\/tr><tr><td><code>th<\/code>, <code>td<\/code><\/td><td><strong><code>padding<\/code><\/strong><\/td><td>Definiert den inneren Abstand zwischen dem Zelleninhalt und dem Zellenrahmen.<\/td><td><code>padding: 8px 15px;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-5ed5b8f\" id=\"textformatierung\" data-block-id=\"5ed5b8f\"><style>.stk-5ed5b8f {margin-top:var(--stk--preset--spacing--20, min(1.5rem, 2vw)) !important;}<\/style><h2 class=\"stk-block-heading__text\">Textformatierung<\/h2><\/div>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>CSS-Selektor<\/strong><\/td><td><strong>Eigenschaft<\/strong><\/td><td><strong>Erkl\u00e4rung<\/strong><\/td><td><strong>Beispiel<\/strong><\/td><\/tr><\/thead><tbody><tr><td><code>table<\/code>, <code>th<\/code>, <code>td<\/code><\/td><td><strong><code>font-family<\/code><\/strong><\/td><td>Definiert die Schriftart.<\/td><td><code>font-family: Arial, sans-serif;<\/code><\/td><\/tr><tr><td><code>th<\/code>, <code>td<\/code><\/td><td><strong><code>font-size<\/code><\/strong><\/td><td>Definiert die Schriftgr\u00f6\u00dfe.<\/td><td><code>font-size: 14px;<\/code><\/td><\/tr><tr><td><code>th<\/code>, <code>td<\/code><\/td><td><strong><code>color<\/code><\/strong><\/td><td>Legt die Textfarbe fest.<\/td><td><code>color: #333;<\/code><\/td><\/tr><tr><td><code>th<\/code>, <code>td<\/code><\/td><td><strong><code>text-align<\/code><\/strong><\/td><td>Definiert die horizontale Ausrichtung des Textes (links, zentriert, rechts).<\/td><td><code>text-align: left;<\/code><\/td><\/tr><tr><td><code>th<\/code><\/td><td><strong><code>font-weight<\/code><\/strong><\/td><td>Definiert die Dicke des Textes (z.B. f\u00fcr Spalten\u00fcberschriften).<\/td><td><code>font-weight: bold;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-014cbee\" id=\"grosse-und-layout-der-tabelle\" data-block-id=\"014cbee\"><style>.stk-014cbee {margin-top:var(--stk--preset--spacing--20, min(1.5rem, 2vw)) !important;}<\/style><h2 class=\"stk-block-heading__text\">Gr\u00f6\u00dfe und Layout der Tabelle<\/h2><\/div>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>CSS-Selektor<\/strong><\/td><td><strong>Eigenschaft<\/strong><\/td><td><strong>Erkl\u00e4rung<\/strong><\/td><td><strong>Beispiel<\/strong><\/td><\/tr><\/thead><tbody><tr><td><code>table<\/code><\/td><td><strong><code>width<\/code><\/strong><\/td><td>Definiert die Gesamtbreite der Tabelle (in Pixeln oder Prozent).<\/td><td><code>width: 80%;<\/code> oder <code>width: 600px;<\/code><\/td><\/tr><tr><td><code>table<\/code><\/td><td><strong><code>height<\/code><\/strong><\/td><td>Definiert die Gesamth\u00f6he der Tabelle.<\/td><td><code>height: 300px;<\/code><\/td><\/tr><tr><td><code>th<\/code>, <code>td<\/code><\/td><td><strong><code>width<\/code><\/strong><\/td><td>Definiert die Breite einer einzelnen Spalte.<\/td><td><code>width: 150px;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-c89432d\" id=\"erweiterte-styling-ideen\" data-block-id=\"c89432d\"><style>.stk-c89432d {margin-top:var(--stk--preset--spacing--20, min(1.5rem, 2vw)) !important;}<\/style><h2 class=\"stk-block-heading__text\">Erweiterte Styling-Ideen<\/h2><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>tr:nth-child(even) {\n  background-color: #e8e8e8; \/* Helleres Grau f\u00fcr jede zweite Zeile *\/\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>tr:hover {\n  background-color: #c9e6ff; \/* Hellblau beim \u00dcberfahren *\/\n  cursor: pointer; \/* Zeigt, dass die Zeile interaktiv ist *\/\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-2cdad2e\" id=\"spezielles-styling-fur-kopfzeilen-code-lt-th-code\" data-block-id=\"2cdad2e\"><h2 class=\"stk-block-heading__text\">Spezielles Styling f\u00fcr Kopfzeilen (<code>&lt;th&gt;<\/code>)<\/h2><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>th {\n  background-color: #4CAF50; \/* Dunkle, auff\u00e4llige Farbe *\/\n  color: white; \/* Wei\u00dfer Text *\/\n  text-transform: uppercase; \/* Text in Gro\u00dfbuchstaben *\/\n  padding: 10px; \n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-d4688d9\" id=\"tabelle-zentrieren\" data-block-id=\"d4688d9\"><h2 class=\"stk-block-heading__text\">Tabelle zentrieren<\/h2><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>table {\n  width: 600px;\n  margin-left: auto; \/* Automatischer linker Rand *\/\n  margin-right: auto; \/* Automatischer rechter Rand *\/\n  \/* Kurzform: margin: 0 auto; *\/\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-25879dc\" id=\"beispiel-modernes-css-styling-fur-tabellen\" data-block-id=\"25879dc\"><h2 class=\"stk-block-heading__text\">Beispiel: Modernes CSS-Styling f\u00fcr Tabellen<\/h2><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* 1. Allgemeine Tabellen-Einstellungen *\/\n.modern-table {\n  width: 80%; \/* Die Tabelle nimmt 80% der verf\u00fcgbaren Breite ein *\/\n  margin: 25px auto; \/* Zentriert die Tabelle horizontal auf der Seite *\/\n  border-collapse: collapse; \/* Zwingt die Rahmen dazu, sich zu \u00fcberlappen und eine einzelne Linie zu bilden *\/\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); \/* F\u00fcgt einen leichten Schatten hinzu (guter visueller Effekt) *\/\n  font-family: Arial, sans-serif;\n}\n\n\/* 2. Styling der Kopfzeile (&lt;th&gt;) *\/\n.modern-table th {\n  background-color: #007bff; \/* Dunkelblau als Hintergrund *\/\n  color: white; \/* Wei\u00dfer Text f\u00fcr guten Kontrast *\/\n  padding: 12px 15px; \/* Innenabstand oben\/unten (12px) und links\/rechts (15px) *\/\n  text-align: left; \/* Text linksb\u00fcndig ausrichten *\/\n  border-bottom: 3px solid #0056b3; \/* Dunklere Linie unter dem Header *\/\n}\n\n\/* 3. Styling der Datenzellen (&lt;td&gt;) *\/\n.modern-table td {\n  padding: 10px 15px;\n  border-bottom: 1px solid #ddd; \/* Eine sehr helle Linie zwischen den Zeilen *\/\n  text-align: left;\n}\n\n\/* 4. Zebra-Muster f\u00fcr bessere Lesbarkeit *\/\n.modern-table tr:nth-child(even) {\n  background-color: #f8f8f8; \/* Hellgrau f\u00fcr gerade Zeilen *\/\n}\n\n\/* 5. Interaktiver Hover-Effekt *\/\n.modern-table tr:hover {\n  background-color: #e2f0ff; \/* Helles Blau beim \u00dcberfahren *\/\n  cursor: pointer; \/* \u00c4ndert den Mauszeiger, um Interaktivit\u00e4t anzuzeigen *\/\n}\n\n\/* 6. Entfernen der unteren Linie bei der letzten Zeile *\/\n.modern-table tr:last-child td {\n  border-bottom: none;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-662247a\" id=\"anwendung-im-html\" data-block-id=\"662247a\"><h2 class=\"stk-block-heading__text\">Anwendung im HTML<\/h2><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Meine gestylte Tabelle&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"tabellen.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n    &lt;table class=\"modern-table\"&gt;\n        &lt;thead&gt;\n            &lt;tr&gt;\n                &lt;th&gt;Produkt&lt;\/th&gt;\n                &lt;th&gt;Preis (\u20ac)&lt;\/th&gt;\n                &lt;th&gt;Verf\u00fcgbar&lt;\/th&gt;\n            &lt;\/tr&gt;\n        &lt;\/thead&gt;\n        &lt;tbody&gt;\n            &lt;tr&gt;\n                &lt;td&gt;Laptop Modell A&lt;\/td&gt;\n                &lt;td&gt;999&lt;\/td&gt;\n                &lt;td&gt;Ja&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;Monitor 27 Zoll&lt;\/td&gt;\n                &lt;td&gt;249&lt;\/td&gt;\n                &lt;td&gt;Nein&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;Maus kabellos&lt;\/td&gt;\n                &lt;td&gt;35&lt;\/td&gt;\n                &lt;td&gt;Ja&lt;\/td&gt;\n            &lt;\/tr&gt;\n        &lt;\/tbody&gt;\n    &lt;\/table&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rahmen (Border) CSS-Selektor Eigenschaft Erkl\u00e4rung Beispiel table, th, td border Definiert einen Rahmen. border: 2px solid black; table border-collapse Steuert, wie benachbarte Zellenrahmen dargestellt werden. border-collapse: collapse; (Wichtig f\u00fcr saubere Rahmen!) table border-spacing Definiert den Abstand zwischen den Zellrahmen (nur bei border-collapse: separate;). border-spacing: 10px; Hintergrundfarbe CSS-Selektor Eigenschaft Erkl\u00e4rung Beispiel table, th, td background-color Legt [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[9,47],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-html","category-html2"],"_links":{"self":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":4,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":2415,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/64\/revisions\/2415"}],"wp:attachment":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}