Revision 3fc38171
Von Andreas Rudin vor etwa 6 Jahren hinzugefügt
| css/developement/tables.html | ||
|---|---|---|
| 4 | 4 |
<meta charset="utf-8" /> |
| 5 | 5 |
<link href="../style.css" rel="stylesheet"> |
| 6 | 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 |
|
|
| 7 | 24 |
</head> |
| 8 | 25 |
<body class="developing"> |
| 9 | 26 |
<header> |
| ... | ... | |
| 11 | 28 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
| 12 | 29 |
</header> |
| 13 | 30 |
<div class="wrapper"> |
| 14 |
|
|
| 15 |
|
|
| 16 |
|
|
| 17 |
<h2>Horizontale Tabelle</h2> |
|
| 18 |
|
|
| 19 |
<p>Befinden sich Horizontale Tabellen in einer <b>.wrapper-Box</b>, werden diese links ausgerichtet (float:left;) bzw. rechts angefügt. Soll zwingend ein Umbruch (clear) stattfinden, nächste Tabelle einfach in eine weitere, anschliessende .wrapper-Box setzen.</p> |
|
| 20 |
|
|
| 21 |
</div><!-- /.wrapper --> |
|
| 22 |
|
|
| 23 |
<div class="wrapper"> |
|
| 24 |
<pre><code> |
|
| 25 |
<table class="tbl-horizontal"> |
|
| 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><table class="tbl-horizontal"> |
|
| 26 | 37 |
<caption>Tabllentitel (Caption)</caption> |
| 27 |
<colgroup>
|
|
| 38 |
<colgroup> |
|
| 28 | 39 |
<col class="wi-small"> |
| 29 |
<col class="wi-lightwide">
|
|
| 30 |
</colgroup>
|
|
| 40 |
<col class="wi-lightwide"> |
|
| 41 |
</colgroup> |
|
| 31 | 42 |
<tbody> |
| 32 | 43 |
<tr> |
| 33 | 44 |
<th>Feldbezeichnung</th> |
| ... | ... | |
| 36 | 47 |
</tbody> |
| 37 | 48 |
</table> |
| 38 | 49 |
</code></pre> |
| 39 |
</div> |
|
| 40 | 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 > 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> |
|
| 41 | 84 |
|
| 42 | 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> |
|
| 43 | 91 |
<div class="wrapper"> |
| 44 | 92 |
|
| 45 | 93 |
<table class="tbl-horizontal"> |
| 46 | 94 |
<caption>Caption horizontale Tabelle</caption> |
| 47 |
<colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
|
|
| 95 |
<colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup> |
|
| 48 | 96 |
<tbody> |
| 49 | 97 |
<tr> |
| 50 | 98 |
<th>Label 1</th> |
| ... | ... | |
| 54 | 102 |
<th>Label 2</th> |
| 55 | 103 |
<td>Wert 2</td> |
| 56 | 104 |
</tr> |
| 57 |
<tr> |
|
| 58 |
<th class="caption" colspan="2">Caption Zeile</th> |
|
| 59 |
</tr> |
|
| 60 | 105 |
<tr> |
| 61 | 106 |
<th>Label 3</th> |
| 62 | 107 |
<td>Wert 3</td> |
| ... | ... | |
| 65 | 110 |
<th>Label 4</th> |
| 66 | 111 |
<td>Wert 4</td> |
| 67 | 112 |
</tr> |
| 113 |
<tr> |
|
| 114 |
<th>Label 5</th> |
|
| 115 |
<td>Wert 6</td> |
|
| 116 |
</tr> |
|
| 68 | 117 |
</tbody> |
| 69 | 118 |
</table> |
| 70 | 119 |
|
| 71 |
<table class="tbl-horizontal test">
|
|
| 72 |
<caption>Horizontale Tabelle mit Zusatz-Klasse «test»</caption>
|
|
| 73 |
<colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
|
|
| 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>
|
|
| 74 | 123 |
<tbody> |
| 75 | 124 |
<tr> |
| 76 | 125 |
<th>Label 1</th> |
| ... | ... | |
| 94 | 143 |
</tbody> |
| 95 | 144 |
</table> |
| 96 | 145 |
|
| 97 |
</div><!-- /.wrapper --> |
|
| 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> |
|
| 98 | 176 |
|
| 177 |
</div><!-- /.wrapper --> |
|
| 99 | 178 |
<div class="wrapper"> |
| 100 | 179 |
|
| 101 | 180 |
<table class="tbl-horizontal"> |
| 102 | 181 |
<caption>Caption horizontale Tabelle</caption> |
| 103 |
<colgroup> |
|
| 104 |
<col class="wi-verysmall"><col class="wi-normal"> |
|
| 105 |
</colgroup> |
|
| 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> |
|
| 106 | 213 |
<tbody> |
| 107 | 214 |
<tr> |
| 108 | 215 |
<th>Label 1</th> |
| ... | ... | |
| 126 | 233 |
</tbody> |
| 127 | 234 |
</table> |
| 128 | 235 |
|
| 129 |
</div><!-- /.wrapper --> |
|
| 130 | 236 |
|
| 237 |
</div><!-- /.wrapper --> |
|
| 131 | 238 |
|
| 132 | 239 |
<div class="wrapper"> |
| 133 |
<h2>Listen-Tabelle mit Header</h2> |
|
| 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><TR><TH.CAPTION COLSPAN="2">caption<CAPTION><TR><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><table class="tbl-list"> |
|
| 286 |
<caption>Caption der Listen-Tabelle</caption> |
|
| 287 |
<colgroup> |
|
| 288 |
<col class="wi-mediumsmall"><col class="wi-small"><col class="wi-small"> |
|
| 289 |
</colgroup> |
|
| 290 |
<thead> |
|
| 291 |
<tr> |
|
| 292 |
<th>Column Header 1</th> |
|
| 293 |
<th>Column Header 2</th> |
|
| 294 |
<th class="right">Total Header 3</th> |
|
| 295 |
</tr> |
|
| 296 |
</thead> |
|
| 297 |
<tbody> |
|
| 298 |
<tr> |
|
| 299 |
<th>R1C1</th> |
|
| 300 |
<td>R1C2</td> |
|
| 301 |
<td class="numeric">100</td> |
|
| 302 |
</tr> |
|
| 303 |
<tr> |
|
| 304 |
<td>R2C1</td> |
|
| 305 |
<td>R2C2</td> |
|
| 306 |
<td class="numeric">200</td> |
|
| 307 |
</tr> |
|
| 308 |
</tbody> |
|
| 309 |
<tfoot> |
|
| 310 |
<th colspan="2">Summe</th> |
|
| 311 |
<th class="numeric">300</th> |
|
| 312 |
</tfoot> |
|
| 313 |
</table> |
|
| 314 |
</code></pre> |
|
| 315 |
--> |
|
| 316 |
|
|
| 317 |
<div class="code-highlighted"> |
|
| 318 |
<p class="p4"><span class="s5"><span class="indent"> </span><table </span><span class="s3"> class=</span><span class="s1">"tbl-list"</span><span class="s5">></span></p><p class="p3"><span class="s5"><span class="indent"> </span><caption></span><span class="s1">Caption der Listen-Tabelle</span><span class="s5"></caption></span></p><p class="p2"><span class="s1"><span class="indent"> </span><colgroup></span></p><p class="p4"><span class="indent"> </span><col </span><span class="s3"> class=</span><span class="s1">"wi-mediumsmall"</span><span class="s5">></span></p><p class="p4"><span class="indent"> </span><col </span><span class="s3"> class=</span><span class="s1">"wi-mediumsmall"</span><span class="s5">></span></p><p class="p4"><span class="indent"> </span><col </span><span class="s3"> class=</span><span class="s1">"wi-small"</span><span class="s5">></span></p><p class="p2"><span class="s1"><span class="indent"> </span></colgroup></span></p><p class="p2"><span class="s1"><span class="indent"> </span><thead></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tr></span></p><p class="p3"><span class="s5"><span class="indent"> </span><th></span><span class="s1">Column Header 1</span><span class="s5"></th></span></p><p class="p3"><span class="s5"><span class="indent"> </span><th></span><span class="s1">Column Header 2</span><span class="s5"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span><th </span><span class="s3"> class=</span><span class="s4">"right"</span><span class="s1">></span><span class="s6">Total Header 3</span><span class="s1"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span></thead></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tbody></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span><th></span><span class="s6">R1C1</span><span class="s1"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td></span><span class="s6">R1C2</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">></span><span class="s6">100</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td></span><span class="s6">R2C1</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td></span><span class="s6">R2C2</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">></span><span class="s6">200</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tbody></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tfoot></span></p><p class="p2"><span class="s1"><span class="indent"> </span><th </span><span class="s3"> colspan=</span><span class="s4">"2"</span><span class="s1">></span><span class="s6">Summe</span><span class="s1"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span><th </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">></span><span class="s6">300</span><span class="s1"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tfoot></span></p><p class="p2"><span class="s1"><span class="indent"> </span></table></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 |
|
|
| 134 | 351 |
<p> |
| 135 |
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 einer .wrapper-Box liegen. Schmale Listen-Tabellen in einer .wrapper-Box erhalten automatisch links und rechts einen abschliessenden Rand, der in CSS auch deaktiviert werden kann.
|
|
| 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.
|
|
| 136 | 353 |
</p> |
| 137 | 354 |
<p> |
| 138 |
«COLGROUP > COL»-Angaben können nur in Bezug auf Breiten angewendet werden, nicht aber auf Ausrichtung oder Schriftgrösse innerhalb der Zellen der Spalte.
|
|
| 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.
|
|
| 139 | 356 |
</p> |
| 140 | 357 |
|
| 141 | 358 |
</div> |
| 142 | 359 |
|
| 143 | 360 |
<table class="tbl-list"> |
| 144 |
<caption>Caption der Listen-Tabelle</caption>
|
|
| 361 |
<caption>Listen-Tabelle nicht im .WRAPPER-Block und mit 100% Breite</caption>
|
|
| 145 | 362 |
<colgroup> |
| 146 | 363 |
<col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"> |
| 147 | 364 |
<col class="wi-wide"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal right"> |
| ... | ... | |
| 191 | 408 |
<td>R3C2</td> |
| 192 | 409 |
<td>R3C3</td> |
| 193 | 410 |
<td>R3C4</td> |
| 194 |
<td>R3C5R3C5R3C5R3C5R3C5R3C5R3C5R3C5R3C5R3C5</td>
|
|
| 411 |
<td>R3C5R3C5R3</td> |
|
| 195 | 412 |
<td>R3C6</td> |
| 196 | 413 |
<td class="right">R3C7</td> |
| 197 | 414 |
<td class="right">R3C8</td> |
| ... | ... | |
| 214 | 431 |
<th colspan="7">Summen</th> |
| 215 | 432 |
<th class="numeric">Summe C7</th> |
| 216 | 433 |
<th class="numeric">Summe C8</th> |
| 217 |
<th class="numeric">Summe C9</th>
|
|
| 434 |
<th class="numeric">Summe C9</th> |
|
| 218 | 435 |
</tfoot> |
| 219 | 436 |
</table> |
| 220 | 437 |
|
| 221 | 438 |
|
| 222 | 439 |
</body> |
| 223 |
</html> |
|
| 440 |
</html> |
|
Auch abrufbar als: Unified diff
HP Aenderungen bis Oktober 2018