HTML/Tutorials/Alternativen zu Tabellen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Häufig besteht der Wunsch, Inhalte in einem Raster anzuordnen. Allerdings sollten Sie eine Tabelle ausschließlich für tabellarische Daten verwenden. Hier stellen wir Ihnen mehrere Varianten vor, wie Sie Ihre Inhalte, die keine tabellarischen Daten sind, trotzdem wie eine Tabelle aussehen lassen können.

Warum ist das wichtig?[Bearbeiten]

Das Verwenden von Tabellen zu Layoutzwecken birgt für den Screen-Reader-Nutzer Tücken, von denen der Webgestalter nicht einmal etwas ahnt. Bedenken Sie, dass Blinde immer nur eine einzige Tabellenzelle erfassen können. Screenreader versuchen erfolglos, zwischen einzelnen Zellen Beziehungen herzustellen. Eine sinnvolle und systematische Anordnung der Zelleninhalte erleichtert das Lesen erheblich.

Für Sehbehinderte kann das Problem auftauchen, dass eine Tabelle breiter angelegt ist als die individuelle Bildschirmauflösung. Wenn die Breite der Tabelle ausschließlich über Zellen statt der gesamten Tabelle definiert wird, kann diese Irritation vermieden werden.

Tabellen jeder Art, ob sie eine tabellarische Darstellung enthalten oder für ein Layout von Text eingesetzt werden, können dann am besten gelesen werden, wenn die Zellen Zeile für Zeile von links nach rechts gelesen werden können und immer noch einen Sinn ergeben.

Eine Tabelle mit div-Elementen und display:table[Bearbeiten]

Mit den Eigenschaften display: table-* können mit Nicht-Tabellen-Elementen Tabellen bzw. Raster erstellt werden. Die entsprechenden Angaben lassen sich ebenso auf HTML-Tabellenelemente anwenden.

  • CSS 2.0
  • IE 8
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
  <style>
    div.table { 
      display: table; 
      border-collapse:collapse; 
    }
    div.tr { 
      display:table-row; 
    }
    div.td { 
      display:table-cell; 
      border:thin solid red; 
      padding:5px; 
    }
  </style>

  <div class="table">
    <div class="tr">
      <div class="td">ich</div>
      <div class="td">bin</div>
      <div class="td">eine</div>
      <div class="td">Tabelle</div>
    </div>
  </div>


Das Beispiel definiert Klassen für div-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus div-Elementen mit class-Attributen zusammengebaut.

Folgende Angaben sind in diesem Zusammenhang möglich:

  • table: Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML.
  • inline-table: Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline.
  • table-row: Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML.
  • table-cell: Das Element steht für eine Tabellenzelle. Wirkt wie die Elemente th und td in HTML.
  • table-row-group: Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML.
  • table-header-group: Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Kopfzeile einer Tabelle. Wirkt wie das thead-Element in HTML.
  • table-footer-group: Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Fußzeile einer Tabelle. Wirkt wie das tfoot-Element in HTML.
  • table-column: Das Element beschreibt die Eigenschaften der Zellen in einer Spalte. Wirkt wie das col-Element in HTML.
  • table-column-group:Das Element enthält eine Gruppe von Elementen, die die Eigenschaft von Zellen in einer Spalte beschreiben. Wirkt wie das colgroup-Element in HTML.
  • table-caption: Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML (auch für th-Elemente).

Rasterlayout mit display:table-cell[Bearbeiten]

Beispiel ansehen …
<style>
  div.table {
    display: table;
    width: calc(100% - 10px);
    border: 1px solid blue;
    padding: 5px;
  }
  div.spalte { 
    display: table-cell;
    border: thin solid red;
    width: 200px;
    padding: 5px;
  }
</style>

  <div class="table">
      <div class="spalte">Ich bin eine Spalte.</div>
      <div class="spalte">Ich bin eine zweite Spalte.</div>
      <div class="spalte">Ich bin eine dritte Spalte mit noch mehr Inhalt.</div>
      <div class="spalte">Ich bin eine vierte Spalte.
          <br>
          <br>
          Ein Vorteil von display:table ist, dass sich das Layout der Spalten
          automatisch an die Höhe der Spalten anpasst.
      </div>
  </div>

Die vier Tabellenzellen passen sich nun als Spalten an die maximale Breite des Elternelements an. Ein schöner Nebeneffekt ist, dass alle Spalten automatisch gleich hoch sind, was bei einem Layout mit float nur durch Angabe einer festen Höhe (height oder min-height) möglich wäre.



Definitionslisten[Bearbeiten]

Standardmäßig werden in einer Definitionsliste dt und dd untereinander dargestellt (jeweils display: block), dd ist etwas eingerückt:

Beispiel
dt ………………
 dd ………………

Möchte man hingegen den Term (dt) und dessen Definition (dd) in einer Zeile nebeneinander stehen haben, z. B. noch mit einem Doppelpunkt voneinander getrennt,

Beispiel
dt ………………: dd ………………
dt ………………: dd ………………

liegt zwar display: inline nahe, was allerdings die komplette Definitionsliste in eine Zeile setzt. Stattdessen muss dd rechts am dt „vorbeifließen“:

Beispiel ansehen …
dt {
  float: left;
  font-weight: bold;
  margin-right: 0.5em;
}

/* und noch der Doppelpunkt */
dt::after { 
  content: ": "; 
}

/* einen Clearfix für Folge-dd-Elemente */
dd::after {
  clear: left;
  content: " ";
  display: block;
}
Beachten Sie: Unter Umständen, besonders bei kleinen Viewscreens oder großen Inhalten der dt- bzw. dd-Elemente, könnte floating allein nicht das gewünschte Ergebnis erzielen.


Eine Liste als Zeitstrahl[Bearbeiten]

Im nächsten Beispiel werden zeitliche Ereignisse, die man sonst oft tabellarisch darstellt (z.B. in einem tabellarischen Lebenslauf) in einem Zeitstrahl realisiert.

Beispiel
#zeitleiste {
  position: relative;
  margin-left: 7.5em;
  list-style-type: none;
}	

#zeitleiste::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  top: 0;
  background: #3983ab;
  width: 0.4em;
}

#zeitleiste::after {
  position: absolute;
  content: "";
  bottom: -1.3em;
  left: -0.8em;
  width: 0;
  height: 0;
  border-width: 1em;
  border-style: solid;
  border-color: #3983ab transparent transparent transparent;
}
Als HTML-Grundgerüst verwenden wir eine unsortierte Liste, deren Aufzählungszeichen wir mit list-style-type: none; unterdrücken.
Mit den Pseudoelementen :before: und :after werden der Zeitstrahl und der in die Zukunft gerichtete Pfeil dargestellt. Der Pfeil besteht aus einem 0px großen Feld, das nur einen oberen farbigen Rand hat. Da die rechten und linken Seiten einen transparenten Rand haben, entsteht so ein pfeilförmiges Dreieck.


Beispiel
#zeitleiste >li::before{
  position: absolute;
  content: "";
  width: 1em;
  height: 1em;
  left: -0.5em;  
  border-radius: 50%;
  border: 0.2em solid #3983ab;
  background: #dfac20;
} 

#zeitleiste >li {
  margin-bottom: 3em;
}
Vor die einzelnen Listenelemente wird nun ein gelber Punkt mit blauem Rand gesetzt. Er wird direkt auf der blauen Linie positioniert.


Das fertige Beispiel:

Beispiel ansehen …
li h3 {
  margin: -1em 0 0.2em;
}

time {
  display: block;
  font-weight: bold;
  margin-left: -10em;
  width: 6.5em;
  text-align:right;
}
<ul id="zeitleiste">
  <li><time datetime="1995-06-04">04.06.1995</time>
    <h3>SelfHTML geht online.</h3>
  </li> 
  <li><time datetime="1998-01-01">1998</time>
    <h3>Das Self-Forum</h3>
        Das <strong>Forum</strong> beantwortet Fragen und 
        wird vom Tummelplatz technikaffiner Webialisten zur Community.
  </li>
  ...
In HTML 4 konnten Listenelemente nur inline-Elemente wie span usw. enthalten.


In HTML5 ist es auch möglich Überschriften und andere Elemente zu verwenden:

  • Das time-Element beinhaltet die Zeitangaben und wird durch einen negativen margin-left links neben die Zeitleiste geschoben.
  • Die Überschriften bekommen semantisch richtig eine h3-Überschrift
  • der Text ist normaler Teil des Listenelements li