Universität Bielefeld

© Universität Bielefeld

Tabellen

Zur übersichtlichen Aufbereitung von Informationen können nachfolgende Tabellen mit im Stylesheet vordefinierten Farben verwendet werden.

Bitte nutzen Sie Tabellen nicht zur grafischen Gestaltung/Strukturierung von Inhalten, da diese nur eingeschränkt mobilfähig sind.

Tabelle Typ1 Farbwert-Kopf: #d4d0c8
Spalte 1, Zeile 1 - Farbwert: #EFF3F7 Spalte 2, Zeile 1
Spalte 1, Zeile 2 Spalte 2, Zeile 2

Code-Schnipsel

<table class="tabelle-typ1" cols="2" cellspacing="2" cellpadding="8" align="center">

  <thead>
    <tr>
      <th> Tabelle Typ1 </th>
      <th> Farbwert: #d4d0c8 </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td> Spalte 1, Zeile 1 </td>
      <td> Spalte 2, Zeile 1 </td>
    </tr>
    <tr>
      <td> Spalte 1, Zeile 2 </td>
      <td> Spalte 2, Zeile 2 </td>
    </tr>
  </tbody>

</table>

 

Alternative Tabelle (mit der Klasse "mobile-float")

Um eine Tabelle ansatzweise mobilfähig zu machen, fügen Sie einfach die Klasse "mobile-float" hinzu. Diese bewirkt, dass die Zellen in der Mobil-Version untereinander statt nebeneinander angeordnet werden.

Überschrift / Titel

Tabelle Typ2
Farbwert: #F0F0F0

Spalte 2, Zeile 1

Spalte 1, Zeile 2

Spalte 2, Zeile 2

Code-Schnipsel

<div class="contentbox">
  <h1>Überschrift / Titel</h1>
  <table class="tabelle-typ2 mobile-float" cellpadding="4" cellspacing="2" width="100%">
  <tbody>
    <tr>
      <td width="180" valign="top"><p><strong>Spalte 1, Zeile 1 - Farbwert: #F0F0F0</strong></p></td>
      <td valign="top"><p>Spalte 2, Zeile 1</p></td>
    </tr>
    <tr>
      <td valign="top"><p><strong>Spalte 1, Zeile 2</strong></p></td>
      <td valign="top"><p>Spalte 2, Zeile 2</p></td>
    </tr>
  </tbody>
  </table>
</div>