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="" | Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
Tabellen-Klassen
class="grid"
ohne thead / tfootHeader Header Header Data Data Data Data Data Data Footer Footer Footer
mit thead / tfootHeader Header Header Data Data Data Data Data Data Footer Footer Footer class="frame"Header Header Header Data Data Data Data Data Data Footer Footer Footer class="zebra"
ohne thead / tfootHeader Header Header Data Data Data Data Data Data Data Data Data Footer Footer Footer
mit thead / tfootHeader Header Header Data Data Data Data Data Data Data Data Data Footer Footer Footer class="grid frame zebra" == "table"
ohne thead / tfootHeader Header Header Data Data Data Data Data Data Data Data Data Footer Footer Footer
mit thead / tfootHeader Header Header Data Data Data Data Data Data Data Data Data Footer Footer Footer class="line-hover"Header Header Header Data Data Data Data Data Data Footer Footer Footer
Tabellenkopf
class="note" | Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
class="attention" | Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
class="caution" | Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
class="warning" | Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
Tabelleninhalt
class="note" | Data | Data | Data |
| Data | Data | Data |
class="attention" | Data | Data | Data |
| Data | Data | Data |
class="caution" | Data | Data | Data |
| Data | Data | Data |
class="warning" | Data | Data | Data |
| Data | Data | Data |
Tabellenfooter
class="note" | Data | Data | Data |
| Footer | Footer | Footer |
|---|
class="attention" | Data | Data | Data |
| Footer | Footer | Footer |
|---|
| Data | Data | Data |
| Footer | Footer | Footer |
|---|
class="warning" | Data | Data | Data |
| Footer | Footer | Footer |
|---|
Normale Tabelle mit Hinweisen <th class=...>, <td class=...>
| Header | Header | Header |
|---|---|---|
| <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"
| Header | Header | Header | Header | Header | Header | Header | Header | Header | Header | Header | Header | Header | Header | Header | Header | Header | Header |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |