MrMurphy1: Tabelle mit CSS formatieren, Schachbrettmuster, erste, letzte Zeile unterschieldich

Beitrag lesen

SELF-Forum

Tabelle mit CSS formatieren, Schachbrettmuster, erste, letzte Zeile unterschieldich

MrMurphy1
– Informationen zu den Bewertungsregeln

Hallo,

so ganz habe ich noch nicht verstanden, wie sich die Spalten und Zeilen verhalten sollen, speziell an den Kreuzungspunkten.

Ich habe mal das folgende Beispiel erstellt. Die Tabelle enthält zwar caption, thead und tfoot, die ich aber nicht zu der von dir gewünschten Auswahl an Spalten und Zeilen zähle. Für mich gehören die aber zu einer vollständigen Tabelle und ich lasse sie drin, um zu zeigen, wie sie berücksichtigt oder halt auch nicht berücksichtigt werden können.

Ansonsten habe ich folgendes durch Farben ausgewählt:

  1. Die erste Spalte, grade und ungrade
  2. die vierte Spalte einfarbig
  3. der erste Zeile
  4. die letzte Zeile wobei ich wie schon geschrieben nicht wußte, wie sich die Kreuzungszellen verhalten sollen. Aktuell haben deshalb in der ersten Spalte die Farben der ersten Spalte Vorrang, in der vierten Spalte jedoch die Farben der ersten und letzten Zeile.

Im colground-Element kannst du ja auch spaßenshalber mal "<col class="col04" />" als Kommentar kennzeichnen und gleichzeitig den Kommentar um "<col class="col04" span="2" />" entfernen.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Tabellenlayout</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      table {
         border-collapse: separate; /*Zellzwischenräume*/
         border-collapse: collapse; /*keine Zell-Zwischenräume*/
      }
      thead {
         background-color: #f3c600;
      }
      tbody {
         /*background-color: #ffeb91;*/
      }
      tfoot {
         background-color: white;
         /*Rand oben und unten (funktioniert nur mit border-collapse: collapse):*/
         border-top: 1px solid #f3c600;
         border-bottom: 1px solid #f3c600;
      }
      th,
      td {
         text-align: left;
         vertical-align: top;
         padding: 0.3rem 0.7rem;
      }
      tbody tr:nth-child(odd) {
         /*background-color: green;*/
      }
      tbody tr:nth-child(2n+1) th:nth-child(1) {
         background-color: red;
      }
      tbody tr:nth-child(2n+2) th:nth-child(1) {
         background-color: gray;
      }
      col:nth-child(4) {
         background-color: skyblue;
      }
      tbody tr:first-child {
         background-color: pink;
      }
      tbody tr:last-child {
         background-color: cyan;
      }
   </style>
</head>
<body>
   <main>
      <table>
         <caption>Caption: Eine Beispieltabelle</caption>
         <colgroup> <!-- CSS-Zugriff auf Spalten -->
            <col class="col01" />
            <col class="col02" />
            <col class="col03" />
            <!-- Von den beiden folgenden Einträgen nur einen auswählen! -->
            <col class="col04" />
            <!-- <col class="col04" span="2" /> -->
            <col class="col05" />
            <col class="col06" />
            <col class="col07" />
         </colgroup>
         <thead>
            <tr>
               <th></th>
               <th>Banane</th>
               <th>Orange</th>
               <th>Kiwi</th>
               <th>Erdbeere</th>
               <th>Mandarine</th>
               <th>Mango</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <th>VW</th>
               <td>0101</td>
               <td>0102</td>
               <td>0103</td>
               <td>0104</td>
               <td>0105</td>
               <td>0106</td>
            </tr>
            <tr>
               <th>Mercedes</th>
               <td>0201</td>
               <td>0202</td>
               <td>0203</td>
               <td>0204</td>
               <td>0205</td>
               <td>0206</td>
            </tr>
            <tr>
               <th>Audi</th>
               <td>0301</td>
               <td>0302</td>
               <td>0303</td>
               <td>0304</td>
               <td>0305</td>
               <td>0306</td>
            </tr>
            <tr>
               <th>BMW</th>
               <td>0401</td>
               <td>0402</td>
               <td>0403</td>
               <td>0404</td>
               <td>0405</td>
               <td>0406</td>
            </tr>
            <tr>
               <th>Jaguar</th>
               <td>0501</td>
               <td>0502</td>
               <td>0503</td>
               <td>0504</td>
               <td>0505</td>
               <td>0506</td>
            </tr>
            <tr>
               <th>Bugatti</th>
               <td>0601</td>
               <td>0602</td>
               <td>0603</td>
               <td>0604</td>
               <td>0605</td>
               <td>0606</td>
            </tr>
            <tr>
               <th>Bentley</th>
               <td>0701</td>
               <td>0702</td>
               <td>0703</td>
               <td>0704</td>
               <td>0705</td>
               <td>0706</td>
            </tr>
         </tbody>
         <tfoot> <!-- tfoot muss nicht mehr direkt hinter thead stehen -->
            <tr>
               <td colspan="7">Der tfoot der Tabelle.</td>
            </tr>
         </tfoot>
      </table>
   </main>
</body>
</html>

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln