× Off Topic

HTML-Tabellen gestalten per CSS

  • Dirk Haensel
  • Dirk Haensels Avatar Autor
  • Offline
  • Administrator
  • Administrator
  • Ossi vom Dienst
  • Beiträge: 616
  • Karma: 25
  • Dank erhalten: 94

HTML-Tabellen gestalten per CSS wurde erstellt von Dirk Haensel

Tutorial zum Problem Tabellen unter responsiven Webdesign:
Tabellen sind in den letzten Jahren zwar etwas in Verruf gekommen, aber sie sind keineswegs böse. Im Gegenteil.
Die wichtigsten HTML-Elemente zur Erstellung von Tabellen sind table, tr, td und th, die zusammen das Grundgerüst einer Datentabelle bilden. Außerdem gibt es noch thead, tfoot, tbody, die sich zur logischen Gruppierung von Tabellenzeilen eignen.

Diese grundlegenden Tabellenelemente werden im Folgenden ergänzt und anschließend per CSS gestaltet. Die fertige Beispieltabelle sieht so aus:

Schritt-1: Als erstes generieren wir eine normale Tabelle:
<table>
  <thead>        
    <tr>
      <th">lf.Nr.</th>
      <th>Überschrift-1</th>
      <th>Überschrift-2</th>
      <th>Überschrift-3</th>
    </tr>
  </thead>
<tbody>
    <tr>
      <td>1</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>
Zunächst ergänzen wir table um das Attribut summary ("Zusammenfassung"), das eine inhaltliche Zusammenfassung der Tabelle enthält. Benutzer mit einem linearen Ausgabegerät wie einem Screenreader können Tabellen nicht auf einen Blick erfassen und erfahren in der "Summary", worin es in der Tabelle inhaltlich geht.
<table class="table table-striped table-hover" summary="Einfache Beispieltabelle">
Direkt nach dem Anfangstag können wir einer Tabelle mit dem Element caption eine Überschrift geben. Dies wäre natürlich auch mit einem normalen Überschriftelement oberhalb der Tabelle möglich, aber caption hat den Vorteil, dass es im Markup innerhalb des Elements table steht.
<table class="table table-striped table-hover" summary="Einfache Beispieltabelle">
<caption>Einfache Beispieltabelle mit 7 Zeilen und 4 Spalten</caption>
Den mit th markierten Zellen wird durch das Attribut scope ("Wirkungsbereich, Gültigkeitsbereich") mitgeteilt, dass sie für eine Spalte (scope="col") gelten, und nicht für eine Zeile (scope="row"):
<thead>        
    <tr>
      <th scope="col">lf.Nr.</th>
      <th scope="col">Überschrift-1</th>
      <th scope="col">Überschrift-2</th>
      <th scope="col">Überschrift-3</th>
    </tr>
  </thead>
Zum Schluss wird zwischen Kopf (thead) und Körper (tbody) der Tabelle mit tfoot eine Fußzeile ergänzt. Entgegen der sonstigen anatomischen Gepflogenheiten befindet sich der Fuß bei Tabellen tatsächlich zwischen Kopf und Körper. Die in tfoot enthaltene Tabellenzelle erstreckt sich durch das Attribut colspan="4" über alle vier Spalten der Tabelle:
<tfoot>
    <tr>
   <td colspan="4">Diese Tabelle besteht aus einer Mischung von <em>summary ("Zusammenfassung")</em>, <em>caption ("eine Überschrift")</em>- und <em>scope ("Wirkungsbereich, Gültigkeitsbereich")</em>-geeignet für jede Darstellung.<br>Der Fußtext einer Tabelle muss immer zwischen Kopf und Körper einer Tabelle gesetzt werden (tfooter)</td>
    </tr>
 </tfoot>

Schritt-2: Gestaltung von table und caption als CSS-Anweisung
(Diese CSS-Anweisungen müssen natürlich den entsprechenden Gegebenheiten angepasst werden.)
/* CSS zur Gestaltung der Tabelle */
table { 
   max-width: 100%;
   width: 100%;
   border-collapse: collapse; /* Alternative wäre border-collapse: separate */
   border-spacing: 0;
   color: black;
   border: 1px solid #333;
   background-color: transparent;
}
Rahmen und Breite muss angepasst werden , oder man lässt beides weg.
caption {  
   font-size: 120%;
   font-weight: bold; 
   background-color: white; 
   color: black; 
   text-align: left;
   padding: 1em;
   padding-left: 0; 
   margin-bottom: 3px; 
}
Neu ist lediglich die Eigenschaft border-collapse. Der Wert collapse bewirkt, dass zwischen den Zellen der Tabelle keine Zwischenräume sind, und ist eine CSS-Entsprechung zu der HTML-Anweisung <table cellspacing="0">, die Sie vielleicht noch aus HTML-Gestaltungszeiten kennen. Der Standardwert ist border-collapse: separate, der einen wenige Pixel breiten Abstand zwischen den Tabellenzellen erzeugt.

Der Style caption gestaltet die Tabellenüberschrift caption so, dass sie wie eine Überschrift aussieht.

Wem der Beitrag gefällt darf sich ruhig mit einem Karma-Punkt bedanken!
Mit besten OstWild-Grüßen
Wilderer Dirk

"Woher soll ich wissen was ich denke, bevor ich nicht gehört habe was ich sage."
Die deutsche Rechtschreibung ist Freeware, für die Jugend allerdings Open Source!
Ich bin wie ich bin...!
Folgende Benutzer bedankten sich: Jürgen Kronz
Letzte Änderung: 2 Jahre 9 Monate her von Dirk Haensel.
3 Jahre 3 Monate her #838

Dieser Beitrag enthält einen Bildanhang.
Bitte anmelden (oder registrieren) um ihn zu sehen.

Dieses Thema wurde gesperrt.
  • Jürgen Kronz
  • Jürgen Kronzs Avatar
  • Offline
  • Administrator
  • Administrator
  • The Boss
  • Beiträge: 1262
  • Karma: 25
  • Dank erhalten: 181

Jürgen Kronz antwortete auf HTML-Tabellen gestalten per CSS

Du hast PN
beste Grüße Jürgen

Ich wohne da wo das Bier wächst
https://www.facebook.com/themler.de/
https://step2internet.de/
3 Jahre 3 Monate her #839
Dieses Thema wurde gesperrt.
  • Dirk Haensel
  • Dirk Haensels Avatar Autor
  • Offline
  • Administrator
  • Administrator
  • Ossi vom Dienst
  • Beiträge: 616
  • Karma: 25
  • Dank erhalten: 94

Dirk Haensel antwortete auf HTML-Tabellen gestalten per CSS

Hallo Jürgen,
ich habe mir noch mal dein Problem durch den Kopf gehen lassen. Hier eine möglicher Lösung:
(Die Zellen können natürlich jeder Zeit erweitert werden)

Der Code würde so aussehen:

In diesem Beitrag ist für Gäste nicht alles sichtbar. Bitte melde dich an, oder registriere dich.

Und die dazugehörige CSS_Anweisung sollte so aussehen:
.content-layout-row
{
  display: table-row;
}

.layout-cell
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: top;
}
.layout-item-0
{
  padding: 20px;
}
.layout-item-1
{
  border-top-style: Dashed;
  border-bottom-style: dotted;
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-top-color: #F5B9B2;
  border-bottom-color: #F5B9B2;
  color: #F8BDB4;
  background: #2E0600;
}

.layout-item-2
{
  color: #F8BDB4;
  background: #2E0600;
  background: transparent;
  padding-top: 35px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
}

.ie7 .layout-cell
{
  border: none !important;
  padding: 0 !important;
}

.ie6 .layout-cell
{
  border: none !important;
  padding: 0 !important;
}

Viel Spass! :whistle:
Mit besten OstWild-Grüßen
Wilderer Dirk

"Woher soll ich wissen was ich denke, bevor ich nicht gehört habe was ich sage."
Die deutsche Rechtschreibung ist Freeware, für die Jugend allerdings Open Source!
Ich bin wie ich bin...!
Folgende Benutzer bedankten sich: Jürgen Kronz
Letzte Änderung: 2 Jahre 9 Monate her von Dirk Haensel.
3 Jahre 3 Monate her #846
Dieses Thema wurde gesperrt.
  • Jürgen Kronz
  • Jürgen Kronzs Avatar
  • Offline
  • Administrator
  • Administrator
  • The Boss
  • Beiträge: 1262
  • Karma: 25
  • Dank erhalten: 181

Jürgen Kronz antwortete auf HTML-Tabellen gestalten per CSS

Danke dir, werde ich nächste Woche auf jeden Fall ausprobieren und Bescheid geben
beste Grüße Jürgen

Ich wohne da wo das Bier wächst
https://www.facebook.com/themler.de/
https://step2internet.de/
3 Jahre 3 Monate her #847
Dieses Thema wurde gesperrt.
  • Dirk Haensel
  • Dirk Haensels Avatar Autor
  • Offline
  • Administrator
  • Administrator
  • Ossi vom Dienst
  • Beiträge: 616
  • Karma: 25
  • Dank erhalten: 94

Dirk Haensel antwortete auf HTML-Tabellen gestalten per CSS

CSS
.zelle1
{
   background-color: #cdab32;
}
.zelle2
{
   background-color: #c0c0c0;
}
.zelle3
{
   background-color: #c3c3c3;
}

Danach nur noch die Classe in die Zelle schreiben!
<tr>
  <td class="zelle1">Zellentext</td>
  <td class="zelle2">Zellentext</td>
  <td class="zelle3">Zellentext</td>
</tr>
Macht es nicht komplizierter, als es ist!
Mit besten OstWild-Grüßen
Wilderer Dirk

"Woher soll ich wissen was ich denke, bevor ich nicht gehört habe was ich sage."
Die deutsche Rechtschreibung ist Freeware, für die Jugend allerdings Open Source!
Ich bin wie ich bin...!
Letzte Änderung: 2 Jahre 7 Monate her von Dirk Haensel.
2 Jahre 9 Monate her #1745
Dieses Thema wurde gesperrt.
Ladezeit der Seite: 0.092 Sekunden