Tabellen in Kivitendo

Horizontale Tabelle (Klasse «tbl-horizontal»)

Einleitung & grundlegender Code

Die horizontalen Tabellen dienen als Standard-Container für die Plazierung und Anzeige von Daten und Eingabe-Elementen. Die Struktur dieser Tabellen-Klasse ist ziemlich starr, was darin begründet wird, dass diese dynamisch rechts umfliesst, Gruppierung ermöglicht und sich einfach erweitern lässt, indem man eine einfache Zeile einfügt. Die erste Spalte enthält ausschliesslich Titel-Tabellen-Zellen (TH), die weiteren bestehen aus Daten-Tabellen-Zellen (TD). Weitere Klassen und Style in den enthaltenen Elementen sind nur in Ausnahmefällen nötig. Die grundlegende Aufbau dieser Tabellenklasse sieht wie folgt aus.

<table class="tbl-horizontal">
  <caption>Tabllentitel (Caption)</caption>
  <colgroup>
    <col class="wi-small">
    <col class="wi-lightwide">
  </colgroup>
  <tbody>
    <tr>
      <th>Feldbezeichnung</th>
      <td>Wert oder Formular-Element</td>
    </tr>
  </tbody>
</table>

Elemente Horizontale Tabelle

CAPTION	Überschrift der Tabelle, die in die Tabelle selber eingekapselt wird. Das erleichtert nicht nur das Verschieben der Tabelle.
COLGROUP > COL	Spaltendefinitionen mit begrenzter Funktionalität, wobei hier im wesentlichen Spaltenbreiten-Angaben zur Geltung kommen, leider keine Ausrichtung also kein rechtsbündiges Ausrichten. Beachten Sie, dass COL ein leeres Element ist, das kein abschliessendes Tag benötigt. Zudem muss es in der COLGROUP untergebracht sein.
TBODY	Datenkörper der Tabelle, zwingend anzuwenden, auch wenn optional einsetzbar. Ermöglicht auch ein effizientes Code-Falten der Tabelle, sodass der Titel (Caption) im Text-Editor sichtbar bleibt.
TH	Label bzw. Feldbezeichnung
TD	Feldwerte oder Eingabe-Felder aller Art inkl. nebenstehendem Icon oder Kurztext.
Feldbezeichnung	Wert

Plazierung horizontaler Tabellen in einem .WRAPPER-Block

Befinden sich Horizontale Tabellen in einem .WRAPPER-Block, werden diese links ausgerichtet (float:left;) bzw. rechts angefügt. Soll zwingend ein Zeilen-Umbruch (clear) stattfinden, nächste Tabelle einfach in eine weitere, anschliessende .WRAPPER-Box setzen. Der Wrapper erzeugt einen Abstand zum Fensterrand und einen abschliessenden Zeilenumbruch. Standardmässig sind maximal drei Tabellen in einer .WRAPPER-Zeile vorgesehen (Standard-Bildschirmauflösung)

Caption horizontale Tabelle

Label 1	Wert 1
Label 2	Wert 2
Label 3	Wert 3
Label 4	Wert 4
Label 5	Wert 6

Tabelle mit COL .wi-verysmall & .wi-wide

Label 1	Wert 1
Label 2	Wert 2
Caption Zeile
Label 3	Wert 3
Label 4	Wert 4

Caption horizontale Tabelle

Label 1	Wert 1
Label 2	Wert 2
Caption Zeile
Label 3	Wert 3
Label 4	Wert 4

Tabelle mit COL .wi-verysmall & .wi-wide

Label 1	Wert 1
Label 2	Wert 2
Caption Zeile
Label 3	Wert 3
Label 4	Wert 4

Mehrere horizontale Tabellen können in einem Spalten-Block (DIV.COL) untergebracht werden (siehe Beispiel oben Block mit roter Hintergrundfarbe). Das könnte vor allem bei kleinen Tabellen Sinn machen.
Ein Caption kann auch innerhalb eines TBODY angebracht werden
<TR><TH.CAPTION COLSPAN="2">caption<CAPTION><TR>
Siehe letzte Tabelle im vorherigen Beispiel.

Ausrichtung und Breite der Spalten

Um ein ausgewogenes, ruhiges Erscheinungsbild der Benutzeroberfläche zu erhalten, ist es nicht unwichtig, dass die Tabellen-Spalten und Formular-Elemente vertikal bündig ausgerichtet sind. Auch wenn es manche Programmierer nicht als nötig erachten, muss doch der tägliche Einsatz durch den einfachen Benutzer dabei im Vordergrund stehen. Aber diese Angelegenheit ist einfacher zu bewältigen, als es zuerst klingt, denn es gibt da den bereits erwähnte Zauber-Code COLGROUP > COL und die zur Verfügung gestellten assoziativen Abmessungsklassen.

Beispiel:

Tabelle mit Elementen

Feldbezeichnung
Feldbezeichnung	kg
Feldbezeichnung	HalliHallo
Feldbezeichnung

Listen-Tabelle mit Kopfzeile (tbl-list)

Diese komplexen Tabellen benötigen ein zwingend korrektes Konstrukt, um eine optimale Darstellungsqualität zu erreichen, die genug Freiraum für nachträgliche Gestaltung via CSS erlaubt. THEAD- und TBODY-Container müssen zwingend gesetzt sein, optional auch der TFOOT-Container für Summenangaben. Listen-Tabellen, die sich über die ganze Seite erstrecken, müssen nicht zwingend in einem .WRAPPER-Block liegen. Schmale Listen-Tabellen in einem .WRAPPER-Block erhalten automatisch links und rechts einen abschliessenden Rand. Grundlegendes Code-Beispiel:

Caption der Listen-Tabelle

Column Header 1	Column Header 2	Total Header 3
R1C1	R1C2	100
R2C1	R2C2	200
Summe		300

Die durchaus optionalen «COLGROUP > COL»-Angaben können nur in Bezug auf Spaltenbreiten angewendet werden, nicht aber auf Ausrichtung oder Schriftgrösse innerhalb der Zellen der Spalte. Vielleicht ändert sich das mit zukünftigen Browser-Versionen.

Empfehlung: Vermeiden Sie bitte bei Tabellen mit begrenzter Kardinalität die Stil-Anweisung WIDTH="100%". Bei breiten Bildschirmen erschwert diese Ausbreitung die Übersicht über die Daten in den Zeilen. Mit der Klasse .WI-MODERATE werden niedrig-kardinale Tabellen ein wenig verbreitert.