Summary

Bertrand asked for advice on styling invoice-lines using CSS, where numeric values align right. This is a common necessity. I prefer semantic HTML-code and all styling inside of CSS. Using CSS-classes turns creation of HTML with 4D-code into a mess easily.

Bertrand bat um Tipps, wie er mit CSS Rechnungszeilen gestalten könne, insbesondere die numerischen Spalten rechts ausrichte. Ich ziehe semantisch sauberen HTML-Code vor und lagere die Gestaltungsanweisung ins CSS aus. Setzte ich CSS-Klassen in eine HTML-Tabelle ein, würde der 4D-Code der HTML-Tabellen ausgibt ein einziges Durcheinander.

english preferred

HTML-Tabellen sind sehr flexibel. Je nach Bedarf mehrzeilige Tabellen-Zeilen sind der Traum vieler Listbox-Nutzer. In HTML-Tabellen sind sie ein Klacks. Das Ergebnis gleich hier als per iFrame eingebundene HTML-Seite

Verändern Sie die Breite dieser Seite und beobachten die eingebundene HTML-Tabelle.

Pures HTML

Der HTML-Code als Bild.

Die HTML-Tabelle <table> besteht aus den Struktur-Elementen Tabellen-Überschrift <caption>, dem Tabellen-Kopf <thead>, dem Tabellen-Fuß <tfoot> und dem Tabellen-Körper <tbody>. Kopf, Fuß und Körper setzen sich aus Tabellen-Zeilen <tr> und in den Zeilen den Tabellen-Zellen <td>, im Kopf-Bereich <th>, zusammen. Im Fuß habe ich 3 Zellen zu einer zusammengefaßt <td colspan=“3″>. Drei Leer-Zeilen habe ich hinzugefügt, um Luft zu schaffen. In der ersten Zelle jeder Leer-Zeile habe ich ein festes Leerzeichen &nbsp; eingetragen, damit die Leer-Zeilen die Zeilenhöhe der gefüllten  Zeilen erben.

Von der Logik würde ich den Tabellen-Fuß nach dem Tabellen-Körper eintragen, aber er muß davor stehen. 

Diesen aufgeräumte HTML läßt sich mit 4D-Code leicht zusammensetzen.

Pures CSS

Der Trick steckt im CSS. Im HTML habe ich keine Klassen (class) verwendet, also muß ich das CSS auf die HTML-Tags anwenden. Auf Klassen weitgehend zu verzichten, gefällt mir sowieso besser, wie auch anderen.

Auch hier finden Sie die Struktur der HTML-Tabelle wieder: Kopf, Überschrift, Fuß und Körper, sowie die Zeilen und Zellen. Hinzugekommen sind die Kinder (nth-child), entweder absolut (hier 1 und 3) oder die geraden Zeilennummern (even). Für meinen Spaß färbe ich den Hintergund einer body-Zeile gelb, sobald die Maus drüber fährt (hover).

Zum Download: die HTML-Seite und das verwendete CSS.

lieber auf deutsch

HTML-tables are flexible. Table-rows grow vertically depending on content. Every listbox-user dreams of that feature, which is native to HTML-tables. See how that looks like. The HTML-page is included here using an iframe

Change the width of this page and check how the table above adapts.

Pure HTML

The HTML-code as picture.

A HTML-<table> consists of these structure-elements: table-<caption>, table-<thead>er, table-<tfoot>er and table-<tbody>. Header, footer and body themselves consist of table-rows <tr> and every row of cells. Because the cells contain table-data, tag is <td>. Header-cells should use the tag <th>. As a complication I combined the frist 3 footer-cells into one <td colspan=“3″>. To make the table look prettier, I added three empty rows. The first cell of these three contains an empty character &nbsp;, which is the easiest way to give empty rows the same height-character als filled ones.

Logically the table-footer should follow the table-body. That’s not how html-tables work, the table-footer needs to be inserted before the body.

I suppose clean HTML as shown is easily generated by 4D-code.

Pure CSS

The design is defined using CSS. There are no classes inside the HTML, so the CSS can only address the HTML-tags available. I like that better anyway, as do others.

Pretty much the same structure as the HTML-table: header, caption, footer and body, plus rows and cells. I added some childs (nth-child), either referencing absolutely (here 1 and 3) or dependent on row-number (here even). As a hint what else to look for, I set the background-colour of body rows to yellow, while the mouse hovers above them.

Download: the HTML-page and the accompanying CSS.