css/design40/manual/tables.html

   1 <!DOCTYPE html>
   2 <html lang="de">
   3 <head>
   4   <meta charset="utf-8" />
   5   <link href="../style.css" rel="stylesheet">
   6   <title>Tabellen in Kivitendo</title>
   7   <style type="text/css">
   8     p.p1 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px monospace; color: #d02226; -webkit-text-stroke: #d02226;font-family: monospace;}
   9     p.p2 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Times; color: #374ef5; -webkit-text-stroke: #374ef5;font-family: monospace;}
  10     p.p3 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Times; color: #141414; -webkit-text-stroke: #141414;font-family: monospace;}
  11     p.p4 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Times; color: #c83a82; -webkit-text-stroke: #c83a82;font-family: monospace;}
  12     p.p5 {padding:0;margin: 0.0px 0.0px 12.0px 0.0px; font: 19.0px Times; color: #374ef5; -webkit-text-stroke: #374ef5;font-family: monospace;}
  13     span.s1 {font-kerning: none}
  14     span.s2 {font-kerning: none; color: #000000; -webkit-text-stroke: 0px #000000}
  15     span.s3 {font-kerning: none; color: #bb5f0a; -webkit-text-stroke: 0px #bb5f0a}
  16     span.s4 {font-kerning: none; color: #c83a82; -webkit-text-stroke: 0px #c83a82}
  17     span.s5 {font-kerning: none; color: #374ef5; -webkit-text-stroke: 0px #374ef5}
  18     span.s6 {font-kerning: none; color: #141414; -webkit-text-stroke: 0px #141414}
  19     p.p1 , p.p2 , p.p3 , p.p4 , p.p5 , span.s1 , span.s2 , span.s3 , span.s4 , span.s5 , span.s6 {font-size: 90% ;}
  20     .picture{ background-color: #fff; padding: 0.8em ; border: 1px #aaa solid ; }
  21   </style>
  22
  23
  24 </head>
  25 <body class="developing">
  26 <header>
  27   <h1>Tabellen in Kivitendo</h1>
  28   <nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
  29 </header>
  30 <div class="wrapper">
  31 <h2>Horizontale Tabelle (Klasse «tbl-horizontal»)</h2>
  32 <h3>Einleitung & grundlegender Code</h3>
  33 <p>
  34 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.
  35 </p>
  36 <pre><code>&lt;table class="tbl-horizontal"&gt;
  37   &lt;caption&gt;Tabllentitel (Caption)&lt;/caption&gt;
  38   &lt;colgroup&gt;
  39     &lt;col class="wi-small"&gt;
  40     &lt;col class="wi-lightwide"&gt;
  41   &lt;/colgroup&gt;
  42   &lt;tbody&gt;
  43     &lt;tr&gt;
  44       &lt;th&gt;Feldbezeichnung&lt;/th&gt;
  45       &lt;td&gt;Wert oder Formular-Element&lt;/td&gt;
  46     &lt;/tr&gt;
  47   &lt;/tbody&gt;
  48 &lt;/table&gt;
  49 </code></pre>
  50
  51 <table class="tbl-horizontal" style="float: none;">
  52   <caption>Elemente Horizontale Tabelle</caption>
  53   <colgroup>
  54     <col class="wi-normal">
  55     <col class="wi-verywide">
  56   </colgroup>
  57   <tbody>
  58     <tr>
  59       <th>CAPTION</th>
  60       <td>Überschrift der Tabelle, die in die Tabelle selber eingekapselt wird. Das erleichtert nicht nur das Verschieben der Tabelle.</td>
  61     </tr>
  62     <tr>
  63       <th>COLGROUP &gt; COL</th>
  64       <td>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.</td>
  65     </tr>
  66     <tr>
  67       <th>TBODY</th>
  68       <td>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.</td>
  69     </tr>
  70     <tr>
  71       <th>TH</th>
  72       <td>Label bzw. Feldbezeichnung</td>
  73     </tr>
  74     <tr>
  75       <th>TD</th>
  76       <td>Feldwerte oder Eingabe-Felder aller Art inkl. nebenstehendem Icon oder Kurztext.</td>
  77     </tr>
  78     <tr>
  79       <th>Feldbezeichnung</th>
  80       <td>Wert</td>
  81     </tr>
  82   </tbody>
  83 </table>
  84
  85
  86 <h3>Plazierung horizontaler Tabellen in einem .WRAPPER-Block</h3>
  87 <p>Befinden sich Horizontale Tabellen in einem <b>.WRAPPER-Block</b>, 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)</p>
  88 </div><!-- /.wrapper -->
  89 <p class="picture"><img src="images/Tabellen_in_Wrapper-Bloecken.png" width="800" height="556" alt="Tabellen_in_Wrapper-Bloecken"></p>
  90 <h4>Beispiel:</h4>
  91 <div class="wrapper">
  92
  93 <table class="tbl-horizontal">
  94   <caption>Caption horizontale Tabelle</caption>
  95   <colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
  96   <tbody>
  97     <tr>
  98       <th>Label 1</th>
  99       <td>Wert 1</td>
 100     </tr>
 101     <tr>
 102       <th>Label 2</th>
 103       <td>Wert 2</td>
 104     </tr>
 105     <tr>
 106       <th>Label 3</th>
 107       <td>Wert 3</td>
 108     </tr>
 109     <tr>
 110       <th>Label 4</th>
 111       <td>Wert 4</td>
 112     </tr>
 113     <tr>
 114       <th>Label 5</th>
 115       <td>Wert 6</td>
 116     </tr>
 117   </tbody>
 118 </table>
 119
 120 <table class="tbl-horizontal">
 121   <caption>Tabelle mit COL .wi-verysmall & .wi-wide</caption>
 122   <colgroup> <col class="wi-verysmall"><col class="wi-wide"> </colgroup>
 123   <tbody>
 124     <tr>
 125       <th>Label 1</th>
 126       <td>Wert 1</td>
 127     </tr>
 128     <tr>
 129       <th>Label 2</th>
 130       <td>Wert 2</td>
 131     </tr>
 132     <tr>
 133       <th class="caption" colspan="2">Caption Zeile</th>
 134     </tr>
 135     <tr>
 136       <th>Label 3</th>
 137       <td>Wert 3</td>
 138     </tr>
 139     <tr>
 140       <th>Label 4</th>
 141       <td>Wert 4</td>
 142     </tr>
 143   </tbody>
 144 </table>
 145
 146 <div class="col" style="background-color:#FFC0D6;padding: 0 0.2em 1.2em 0.2em">
 147   <table class="tbl-horizontal">
 148     <caption>Tabelle 1 IN SPALTE</caption>
 149     <colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
 150     <tbody>
 151       <tr>
 152         <th>Label 1</th>
 153         <td>Wert 1</td>
 154       </tr>
 155       <tr>
 156         <th>Label 2</th>
 157         <td>Wert 2</td>
 158       </tr>
 159     </tbody>
 160   </table>
 161   <table class="tbl-horizontal">
 162     <caption>Tabelle 2 IN SPALTE</caption>
 163     <colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
 164     <tbody>
 165       <tr>
 166         <th>Label 1</th>
 167         <td>Wert 1</td>
 168       </tr>
 169       <tr>
 170         <th>Label 2</th>
 171         <td>Wert 2</td>
 172       </tr>
 173     </tbody>
 174   </table>
 175 </div>
 176
 177 </div><!-- /.wrapper -->
 178 <div class="wrapper">
 179
 180 <table class="tbl-horizontal">
 181   <caption>Caption horizontale Tabelle</caption>
 182   <colgroup>
 183     <col class="wi-verysmall"><col class="wi-normal">
 184   </colgroup>
 185   <tbody>
 186     <tr>
 187       <th>Label 1</th>
 188       <td>Wert 1</td>
 189     </tr>
 190     <tr>
 191       <th>Label 2</th>
 192       <td>Wert 2</td>
 193     </tr>
 194     <tr>
 195       <th class="caption" colspan="2">Caption Zeile</th>
 196     </tr>
 197     <tr>
 198       <th>Label 3</th>
 199       <td>Wert 3</td>
 200     </tr>
 201     <tr>
 202       <th>Label 4</th>
 203       <td>Wert 4</td>
 204     </tr>
 205   </tbody>
 206 </table>
 207
 208 <table class="tbl-horizontal">
 209   <caption>Tabelle mit COL .wi-verysmall & .wi-wide</caption>
 210   <colgroup>
 211     <col class="wi-verysmall"><col class="wi-wide">
 212   </colgroup>
 213   <tbody>
 214     <tr>
 215       <th>Label 1</th>
 216       <td>Wert 1</td>
 217     </tr>
 218     <tr>
 219       <th>Label 2</th>
 220       <td>Wert 2</td>
 221     </tr>
 222     <tr>
 223       <th class="caption" colspan="2">Caption Zeile</th>
 224     </tr>
 225     <tr>
 226       <th>Label 3</th>
 227       <td>Wert 3</td>
 228     </tr>
 229     <tr>
 230       <th>Label 4</th>
 231       <td>Wert 4</td>
 232     </tr>
 233   </tbody>
 234 </table>
 235
 236
 237 </div><!-- /.wrapper -->
 238
 239 <div class="wrapper">
 240 <p><b>Mehrere horizontale Tabellen</b> können in einem Spalten-Block (<code>DIV.COL</code>) untergebracht werden (siehe Beispiel oben <span style="background-color:#FFC0D6;">Block mit roter Hintergrundfarbe</span>). Das könnte vor allem bei kleinen Tabellen Sinn machen.<br>Ein <b>Caption</b> kann auch <b>innerhalb eines TBODY</b> angebracht werden<br>&LT;TR&GT;&LT;TH.CAPTION COLSPAN="2"&GT;caption&lt;CAPTION&GT;&LT;TR&GT;<br>Siehe letzte Tabelle im vorherigen Beispiel.</p>
 241
 242 <h3>Ausrichtung und Breite der Spalten</h3>
 243 <p>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.</p>
 244 <p class="picture"><img src="images/Tabelle_Horizontal_mit_Elementen.svg" width="800" height="532" alt="Tabelle_Horizontal_mit_Elementen"></p>
 245 <h4>Beispiel:</h4>
 246 <form action="#">
 247   <table class="tbl-horizontal">
 248     <caption>Tabelle mit Elementen</caption>
 249     <colgroup>
 250       <col class="wi-small">
 251       <col class="wi-lightwide">
 252     </colgroup>
 253     <tbody>
 254       <tr>
 255         <th>Feldbezeichnung</th>
 256         <td><input type="text" value="" size="10" class="wi-lightwide" name="npt1"></td>
 257       </tr>
 258       <tr>
 259         <th>Feldbezeichnung</th>
 260         <td><input type="text" value="" size="10" class="wi-lightwide" name="npt2">kg</td>
 261       </tr>
 262       <tr>
 263         <th>Feldbezeichnung</th>
 264         <td><select id="slct1" name="slct1" class="wi-lightwide"><option value="Halli">Halli</option><option value="Hallo">Hallo</option></select></td>
 265       </tr>
 266       <tr>
 267         <th colspan="2"><span class="label above">Feldbezeichnung</span><textarea name="txtarea1" class="wi-small-lightwide" cols="10" rows="4"></textarea></th>
 268       </tr>
 269     </tbody>
 270   </table>
 271 </form>
 272
 273
 274
 275
 276
 277
 278
 279
 280
 281 <h2>Listen-Tabelle mit Kopfzeile (tbl-list)</h2>
 282 <p>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:</p>
 283
 284 <!--
 285 <pre><code>&lt;table class="tbl-list"&gt;
 286   &lt;caption&gt;Caption der Listen-Tabelle&lt;/caption&gt;
 287   &lt;colgroup&gt;
 288     &lt;col class="wi-mediumsmall"&gt;&lt;col class="wi-small"&gt;&lt;col class="wi-small"&gt;
 289   &lt;/colgroup&gt;
 290   &lt;thead&gt;
 291   &lt;tr&gt;
 292     &lt;th&gt;Column Header 1&lt;/th&gt;
 293     &lt;th&gt;Column Header 2&lt;/th&gt;
 294     &lt;th class="right"&gt;Total Header 3&lt;/th&gt;
 295   &lt;/tr&gt;
 296   &lt;/thead&gt;
 297   &lt;tbody&gt;
 298   &lt;tr&gt;
 299     &lt;th&gt;R1C1&lt;/th&gt;
 300     &lt;td&gt;R1C2&lt;/td&gt;
 301     &lt;td class="numeric"&gt;100&lt;/td&gt;
 302   &lt;/tr&gt;
 303   &lt;tr&gt;
 304     &lt;td&gt;R2C1&lt;/td&gt;
 305     &lt;td&gt;R2C2&lt;/td&gt;
 306     &lt;td class="numeric"&gt;200&lt;/td&gt;
 307   &lt;/tr&gt;
 308   &lt;/tbody&gt;
 309   &lt;tfoot&gt;
 310     &lt;th colspan="2"&gt;Summe&lt;/th&gt;
 311     &lt;th class="numeric"&gt;300&lt;/th&gt;
 312   &lt;/tfoot&gt;
 313 &lt;/table&gt;
 314 </code></pre>
 315  -->
 316
 317 <div class="code-highlighted">
 318 <p class="p4"><span class="s5"><span class="indent"> &nbsp;&nbsp; </span>&lt;table </span><span class="s3"> class=</span><span class="s1">"tbl-list"</span><span class="s5">&gt;</span></p><p class="p3"><span class="s5"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;caption&gt;</span><span class="s1">Caption der Listen-Tabelle</span><span class="s5">&lt;/caption&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;colgroup&gt;</span></p><p class="p4"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;col </span><span class="s3"> class=</span><span class="s1">"wi-mediumsmall"</span><span class="s5">&gt;</span></p><p class="p4"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;col </span><span class="s3"> class=</span><span class="s1">"wi-mediumsmall"</span><span class="s5">&gt;</span></p><p class="p4"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;col </span><span class="s3"> class=</span><span class="s1">"wi-small"</span><span class="s5">&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/colgroup&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;thead&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tr&gt;</span></p><p class="p3"><span class="s5"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th&gt;</span><span class="s1">Column Header 1</span><span class="s5">&lt;/th&gt;</span></p><p class="p3"><span class="s5"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th&gt;</span><span class="s1">Column Header 2</span><span class="s5">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th </span><span class="s3"> class=</span><span class="s4">"right"</span><span class="s1">&gt;</span><span class="s6">Total Header 3</span><span class="s1">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/thead&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tbody&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th&gt;</span><span class="s6">R1C1</span><span class="s1">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td&gt;</span><span class="s6">R1C2</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">&gt;</span><span class="s6">100</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td&gt;</span><span class="s6">R2C1</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td&gt;</span><span class="s6">R2C2</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;td </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">&gt;</span><span class="s6">200</span><span class="s1">&lt;/td&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tr&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tbody&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;tfoot&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th </span><span class="s3"> colspan=</span><span class="s4">"2"</span><span class="s1">&gt;</span><span class="s6">Summe</span><span class="s1">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;th </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">&gt;</span><span class="s6">300</span><span class="s1">&lt;/th&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&lt;/tfoot&gt;</span></p><p class="p2"><span class="s1"><span class="indent"> &nbsp;&nbsp; </span>&lt;/table&gt;</span></p></div>
 319
 320
 321 <table class="tbl-list">
 322   <caption>Caption der Listen-Tabelle</caption>
 323   <colgroup>
 324     <col class="wi-mediumsmall"><col class="wi-small"><col class="wi-small">
 325   </colgroup>
 326   <thead>
 327   <tr>
 328     <th>Column Header 1</th>
 329     <th>Column Header 2</th>
 330     <th class="right">Total Header 3</th>
 331   </tr>
 332   </thead>
 333   <tbody>
 334   <tr>
 335     <th>R1C1</th>
 336     <td>R1C2</td>
 337     <td class="numeric">100</td>
 338   </tr>
 339   <tr>
 340     <td>R2C1</td>
 341     <td>R2C2</td>
 342     <td class="numeric">200</td>
 343   </tr>
 344   </tbody>
 345   <tfoot>
 346     <th colspan="2">Summe</th>
 347     <th class="numeric">300</th>
 348   </tfoot>
 349 </table>
 350
 351 <p>
 352 Die durchaus optionalen «<code>COLGROUP > COL</code>»-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.
 353 </p>
 354 <p>
 355 <b>Empfehlung:</b> Vermeiden Sie bitte bei Tabellen mit begrenzter Kardinalität die Stil-Anweisung <b><code>WIDTH="100%"</code></b>. Bei breiten Bildschirmen erschwert diese Ausbreitung die Übersicht über die Daten in den Zeilen. Mit der Klasse <code>.WI-MODERATE</code> werden niedrig-kardinale Tabellen ein wenig verbreitert.
 356 </p>
 357
 358 </div>
 359
 360 <table class="tbl-list">
 361   <caption>Listen-Tabelle nicht im .WRAPPER-Block und mit 100% Breite</caption>
 362   <colgroup>
 363     <col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal">
 364     <col class="wi-wide"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal right">
 365   </colgroup>
 366   <thead>
 367   <tr>
 368     <th></th>
 369     <th>Column 1</th>
 370     <th>Column 2</th>
 371     <th>Column 3</th>
 372     <th>Column 4</th>
 373     <th>Column 5</th>
 374     <th>Column 6</th>
 375     <th class="right">Column 7</th>
 376     <th class="right">Column 8</th>
 377     <th class="right">Column 9</th>
 378   </tr>
 379   </thead>
 380   <tbody>
 381   <tr>
 382     <th>Row 1</th>
 383     <td>R1C1</td>
 384     <td>R1C2R1C2R1C2R1C2</td>
 385     <td>R1C3</td>
 386     <td>R1C4</td>
 387     <td>R1C5</td>
 388     <td>R1C6</td>
 389     <td class="right">R1C7</td>
 390     <td class="right">R1C8</td>
 391     <td class="right">R1C9</td>
 392   </tr>
 393   <tr>
 394     <th>Row 2</th>
 395     <td>R2C1</td>
 396     <td>R2C2</td>
 397     <td>R2C3</td>
 398     <td>R2C4R2C4R2C4R2C4R2C4</td>
 399     <td>R2C5</td>
 400     <td>R2C6</td>
 401     <td class="right">R2C7</td>
 402     <td class="right">R2C8</td>
 403     <td class="right">R2C9</td>
 404   </tr>
 405   <tr>
 406     <th>Row 3</th>
 407     <td>R3C1</td>
 408     <td>R3C2</td>
 409     <td>R3C3</td>
 410     <td>R3C4</td>
 411     <td>R3C5R3C5R3</td>
 412     <td>R3C6</td>
 413     <td class="right">R3C7</td>
 414     <td class="right">R3C8</td>
 415     <td class="right">R3C9</td>
 416   </tr>
 417   <tr>
 418     <th>Row 4</th>
 419     <td>R4C1</td>
 420     <td>R4C2</td>
 421     <td>R4C3</td>
 422     <td>R4C4</td>
 423     <td>R4C5</td>
 424     <td>R4C6</td>
 425     <td class="right">R4C7</td>
 426     <td class="right">R4C8</td>
 427     <td class="right">R4C9</td>
 428   </tr>
 429   </tbody>
 430   <tfoot>
 431     <th colspan="7">Summen</th>
 432     <th class="numeric">Summe C7</th>
 433     <th class="numeric">Summe C8</th>
 434     <th class="numeric">Summe C9</th>
 435   </tfoot>
 436 </table>
 437
 438 <div class="wrapper">
 439
 440 <h3>Listen-Tabelle mit farblicher Hervorhebung</h3>
 441
 442 <p>Zur farblichen Hervorhebung von Zeilen können folgende Klassen verwendet werden:</p>
 443
 444 <pre><code>.listrow_ok
 445 .listrow_error
 446 .listrow_info
 447 .listrow_warning
 448 </code></pre>
 449
 450 <p>Die Farben entsprechen dabei den standard Farben, welche auch z.B. bei den Flash Messages verwendet werden.
 451 Siehe dazu auch: <a href="farben.html" title="Details zum Einsatz von Farben in Kivitendo">Einsatz von Farben</a></p>
 452
 453 <p>Die Reihen werden dabei automatisch alterniert (hell/dunkel).</p>
 454
 455 <table class="tbl-list">
 456   <caption>Listen-Tabelle mit Farben automatisch alterniert</caption>
 457   <colgroup>
 458     <col class="wi-small"><col class="wi-small"><col class="wi-small"><col class="wi-small"><col class="wi-small">
 459   </colgroup>
 460   <thead>
 461   <tr>
 462     <th></th>
 463     <th>Column 1</th>
 464     <th>Column 2</th>
 465     <th>Column 3</th>
 466     <th>Column 4</th>
 467   </tr>
 468   </thead>
 469   <tbody>
 470   <tr class="listrow_ok">
 471     <th>.listrow_ok</th>
 472     <td>R1C1</td>
 473     <td>R1C2R1C2R1C2R1C2</td>
 474     <td>R1C3</td>
 475     <td>R1C4</td>
 476   </tr>
 477   <tr class="listrow_ok">
 478     <th>.listrow_ok</th>
 479     <td>R1C1</td>
 480     <td>R1C2R1C2R1C2R1C2</td>
 481     <td>R1C3</td>
 482     <td>R1C4</td>
 483   </tr>
 484   <tr class="listrow_ok">
 485     <th>.listrow_ok</th>
 486     <td>R1C1</td>
 487     <td>R1C2R1C2R1C2R1C2</td>
 488     <td>R1C3</td>
 489     <td>R1C4</td>
 490   </tr>
 491   <tr class="listrow_ok">
 492     <th>.listrow_ok</th>
 493     <td>R1C1</td>
 494     <td>R1C2R1C2R1C2R1C2</td>
 495     <td>R1C3</td>
 496     <td>R1C4</td>
 497   </tr>
 498   <tr class="listrow_error">
 499     <th>.listrow_error</th>
 500     <td>R2C1</td>
 501     <td>R2C2</td>
 502     <td>R2C3</td>
 503     <td>R2C4R2C4R2C4R2C4R2C4</td>
 504   </tr>
 505   <tr class="listrow_error">
 506     <th>.listrow_error</th>
 507     <td>R2C1</td>
 508     <td>R2C2</td>
 509     <td>R2C3</td>
 510     <td>R2C4R2C4R2C4R2C4R2C4</td>
 511   </tr>
 512   <tr class="listrow_error">
 513     <th>.listrow_error</th>
 514     <td>R2C1</td>
 515     <td>R2C2</td>
 516     <td>R2C3</td>
 517     <td>R2C4R2C4R2C4R2C4R2C4</td>
 518   </tr>
 519   <tr class="listrow_error">
 520     <th>.listrow_error</th>
 521     <td>R2C1</td>
 522     <td>R2C2</td>
 523     <td>R2C3</td>
 524     <td>R2C4R2C4R2C4R2C4R2C4</td>
 525   </tr>
 526   <tr class="listrow_info">
 527     <th>.listrow_info</th>
 528     <td>R3C1</td>
 529     <td>R3C2</td>
 530     <td>R3C3</td>
 531     <td>R3C4</td>
 532   </tr>
 533   <tr class="listrow_info">
 534     <th>.listrow_info</th>
 535     <td>R3C1</td>
 536     <td>R3C2</td>
 537     <td>R3C3</td>
 538     <td>R3C4</td>
 539   </tr>
 540   <tr class="listrow_info">
 541     <th>.listrow_info</th>
 542     <td>R3C1</td>
 543     <td>R3C2</td>
 544     <td>R3C3</td>
 545     <td>R3C4</td>
 546   </tr>
 547   <tr class="listrow_info">
 548     <th>.listrow_info</th>
 549     <td>R3C1</td>
 550     <td>R3C2</td>
 551     <td>R3C3</td>
 552     <td>R3C4</td>
 553   </tr>
 554   <tr class="listrow_warning">
 555     <th>.listrow_warning</th>
 556     <td>R4C1</td>
 557     <td>R4C2</td>
 558     <td>R4C3</td>
 559     <td>R4C4</td>
 560   </tr>
 561   <tr class="listrow_warning">
 562     <th>.listrow_warning</th>
 563     <td>R4C1</td>
 564     <td>R4C2</td>
 565     <td>R4C3</td>
 566     <td>R4C4</td>
 567   </tr>
 568   <tr class="listrow_warning">
 569     <th>.listrow_warning</th>
 570     <td>R4C1</td>
 571     <td>R4C2</td>
 572     <td>R4C3</td>
 573     <td>R4C4</td>
 574   </tr>
 575   <tr class="listrow_warning">
 576     <th>.listrow_warning</th>
 577     <td>R4C1</td>
 578     <td>R4C2</td>
 579     <td>R4C3</td>
 580     <td>R4C4</td>
 581   </tr>
 582   </tbody>
 583 </table>
 584
 585 <p>Falls die Alternierung manuell gesetzt werden soll, kann dies mit den folgenden Klassen gemacht werden:</p>
 586
 587 <pre><code>.listrow0
 588 .listrow1
 589 .listrow_ok0
 590 .listrow_ok1
 591 .listrow_error0
 592 .listrow_error1
 593 .listrow_info0
 594 .listrow_info1
 595 .listrow_warning0
 596 .listrow_warning1
 597 </code></pre>
 598
 599 <table class="tbl-list">
 600   <caption>Listen-Tabelle mit Farben manuell alterniert</caption>
 601   <colgroup>
 602     <col class="wi-small"><col class="wi-small"><col class="wi-small"><col class="wi-small"><col class="wi-small">
 603   </colgroup>
 604   <thead>
 605   <tr>
 606     <th></th>
 607     <th>Column 1</th>
 608     <th>Column 2</th>
 609     <th>Column 3</th>
 610     <th>Column 4</th>
 611   </tr>
 612   </thead>
 613   <tbody>
 614   <tr class="listrow0">
 615     <th>.listrow0</th>
 616     <td>R2C1</td>
 617     <td>R2C2</td>
 618     <td>R2C3</td>
 619     <td>R2C4R2C4R2C4R2C4R2C4</td>
 620   </tr>
 621   <tr class="listrow0">
 622     <th>.listrow0</th>
 623     <td>R2C1</td>
 624     <td>R2C2</td>
 625     <td>R2C3</td>
 626     <td>R2C4R2C4R2C4R2C4R2C4</td>
 627   </tr>
 628   <tr class="listrow1">
 629     <th>.listrow1</th>
 630     <td>R2C1</td>
 631     <td>R2C2</td>
 632     <td>R2C3</td>
 633     <td>R2C4R2C4R2C4R2C4R2C4</td>
 634   </tr>
 635   <tr class="listrow1">
 636     <th>.listrow1</th>
 637     <td>R2C1</td>
 638     <td>R2C2</td>
 639     <td>R2C3</td>
 640     <td>R2C4R2C4R2C4R2C4R2C4</td>
 641   </tr>
 642   <tr class="listrow_ok0">
 643     <th>.listrow_ok0</th>
 644     <td>R2C1</td>
 645     <td>R2C2</td>
 646     <td>R2C3</td>
 647     <td>R2C4R2C4R2C4R2C4R2C4</td>
 648   </tr>
 649   <tr class="listrow_ok0">
 650     <th>.listrow_ok0</th>
 651     <td>R2C1</td>
 652     <td>R2C2</td>
 653     <td>R2C3</td>
 654     <td>R2C4R2C4R2C4R2C4R2C4</td>
 655   </tr>
 656   <tr class="listrow_ok1">
 657     <th>.listrow_ok1</th>
 658     <td>R2C1</td>
 659     <td>R2C2</td>
 660     <td>R2C3</td>
 661     <td>R2C4R2C4R2C4R2C4R2C4</td>
 662   </tr>
 663   <tr class="listrow_ok1">
 664     <th>.listrow_ok1</th>
 665     <td>R2C1</td>
 666     <td>R2C2</td>
 667     <td>R2C3</td>
 668     <td>R2C4R2C4R2C4R2C4R2C4</td>
 669   </tr>
 670   <tr class="listrow_error0">
 671     <th>.listrow_error0</th>
 672     <td>R2C1</td>
 673     <td>R2C2</td>
 674     <td>R2C3</td>
 675     <td>R2C4R2C4R2C4R2C4R2C4</td>
 676   </tr>
 677   <tr class="listrow_error0">
 678     <th>.listrow_error0</th>
 679     <td>R2C1</td>
 680     <td>R2C2</td>
 681     <td>R2C3</td>
 682     <td>R2C4R2C4R2C4R2C4R2C4</td>
 683   </tr>
 684   <tr class="listrow_error1">
 685     <th>.listrow_error1</th>
 686     <td>R2C1</td>
 687     <td>R2C2</td>
 688     <td>R2C3</td>
 689     <td>R2C4R2C4R2C4R2C4R2C4</td>
 690   </tr>
 691   <tr class="listrow_error1">
 692     <th>.listrow_error1</th>
 693     <td>R2C1</td>
 694     <td>R2C2</td>
 695     <td>R2C3</td>
 696     <td>R2C4R2C4R2C4R2C4R2C4</td>
 697   </tr>
 698   <tr class="listrow_info0">
 699     <th>.listrow_info0</th>
 700     <td>R2C1</td>
 701     <td>R2C2</td>
 702     <td>R2C3</td>
 703     <td>R2C4R2C4R2C4R2C4R2C4</td>
 704   </tr>
 705   <tr class="listrow_info0">
 706     <th>.listrow_info0</th>
 707     <td>R2C1</td>
 708     <td>R2C2</td>
 709     <td>R2C3</td>
 710     <td>R2C4R2C4R2C4R2C4R2C4</td>
 711   </tr>
 712   <tr class="listrow_info1">
 713     <th>.listrow_info1</th>
 714     <td>R2C1</td>
 715     <td>R2C2</td>
 716     <td>R2C3</td>
 717     <td>R2C4R2C4R2C4R2C4R2C4</td>
 718   </tr>
 719   <tr class="listrow_info1">
 720     <th>.listrow_info1</th>
 721     <td>R2C1</td>
 722     <td>R2C2</td>
 723     <td>R2C3</td>
 724     <td>R2C4R2C4R2C4R2C4R2C4</td>
 725   </tr>
 726   <tr class="listrow_warning0">
 727     <th>.listrow_warning0</th>
 728     <td>R2C1</td>
 729     <td>R2C2</td>
 730     <td>R2C3</td>
 731     <td>R2C4R2C4R2C4R2C4R2C4</td>
 732   </tr>
 733   <tr class="listrow_warning0">
 734     <th>.listrow_warning0</th>
 735     <td>R2C1</td>
 736     <td>R2C2</td>
 737     <td>R2C3</td>
 738     <td>R2C4R2C4R2C4R2C4R2C4</td>
 739   </tr>
 740   <tr class="listrow_warning1">
 741     <th>.listrow_warning1</th>
 742     <td>R2C1</td>
 743     <td>R2C2</td>
 744     <td>R2C3</td>
 745     <td>R2C4R2C4R2C4R2C4R2C4</td>
 746   </tr>
 747   <tr class="listrow_warning1">
 748     <th>.listrow_warning1</th>
 749     <td>R2C1</td>
 750     <td>R2C2</td>
 751     <td>R2C3</td>
 752     <td>R2C4R2C4R2C4R2C4R2C4</td>
 753   </tr>
 754   </tbody>
 755 </table>
 756
 757 </div><!-- /.wrapper -->
 758
 759 </body>
 760 </html>