Formatieren mit Stilelementen

Auf den Seiten dieses Kapitels werden anhand von Beispielen die wesentlichen Formatierungsmöglichkeiten des Layouts layout01INSTITUTE vorgestellt.

Tabellen

Normale Tabelle (ohne Klassenangabe)

class=""
HeaderHeaderHeader
DataDataData
DataDataData
DataDataData
DataDataData

Tabellen-Klassen

  • class="grid"
    ohne thead / tfoot
    HeaderHeaderHeader
    DataDataData
    DataDataData
    FooterFooterFooter

    mit thead / tfoot
    HeaderHeaderHeader
    DataDataData
    DataDataData
    FooterFooterFooter
  • class="frame"
    HeaderHeaderHeader
    DataDataData
    DataDataData
    FooterFooterFooter
  • class="zebra"
    ohne thead / tfoot
    HeaderHeaderHeader
    DataDataData
    DataDataData
    DataDataData
    FooterFooterFooter

    mit thead / tfoot
    HeaderHeaderHeader
    DataDataData
    DataDataData
    DataDataData
    FooterFooterFooter
  • class="grid frame zebra" == "table"
    ohne thead / tfoot
    HeaderHeaderHeader
    DataDataData
    DataDataData
    DataDataData
    FooterFooterFooter

    mit thead / tfoot
    HeaderHeaderHeader
    DataDataData
    DataDataData
    DataDataData
    FooterFooterFooter
  • class="line-hover"
    HeaderHeaderHeader
    DataDataData
    DataDataData
    FooterFooterFooter

Tabellenkopf

class="note"
HeaderHeaderHeader
DataDataData
DataDataData
class="attention"
HeaderHeaderHeader
DataDataData
DataDataData
class="caution"
HeaderHeaderHeader
DataDataData
DataDataData
class="warning"
HeaderHeaderHeader
DataDataData
DataDataData

Tabelleninhalt

class="note"
DataDataData
DataDataData
class="attention"
DataDataData
DataDataData
class="caution"
DataDataData
DataDataData
class="warning"
DataDataData
DataDataData

Tabellenfooter

class="note"
DataDataData
FooterFooterFooter
class="attention"
DataDataData
FooterFooterFooter
DataDataData
FooterFooterFooter
class="warning"
DataDataData
FooterFooterFooter

Normale Tabelle mit Hinweisen <th class=...>, <td class=...>

HeaderHeaderHeader
<th class=note>Data<td class=note>
<th class=attention>Data<td class=attention>
<th class="caution">Data<td class="caution">
<th class=warning>Data<td class=warning>

Große Tabelle in "scroll-view"

HeaderHeaderHeaderHeaderHeaderHeaderHeaderHeaderHeader HeaderHeaderHeaderHeaderHeaderHeaderHeaderHeaderHeader
DataDataDataDataDataDataDataDataData DataDataDataDataDataDataDataDataData
DataDataDataDataDataDataDataDataData DataDataDataDataDataDataDataDataData
DataDataDataDataDataDataDataDataData DataDataDataDataDataDataDataDataData
DataDataDataDataDataDataDataDataData DataDataDataDataDataDataDataDataData