I need a table containing a column of decimal numbers, of various lengths before and after the decimal fraction, with the decimal points aligned.
The width of the column should be “liquid” in size, expanding as necessary to accommodate a LARGE long number in ANY of the data cells, or a very long HEADER relating to this column.
Cells containing integers (without a decimal point) should still display numbers with digits aligned in the same position as if a decimal character was present. (for example, the number 512 should still contain its numbers correctly with a cell containing only "512" instead of "512").
The font should be irrelevant; monospace should not be a requirement.
Finally, the numbers should also be centered in the column as best as possible, preserving the decimal places (visible and implied!). In particular, the “left space” of the cell with the largest number of characters before the decimal character (or simply most of the characters if there is no decimal character) should be the same width as the “right space on the right side” of the cell with the most characters after the first decimal character.
I specifically say “characters” instead of “numbers” for the final requirement, because the table layout should handle symbolic characters such as positive / negative signs that add numbers, and letters such as unit abbreviations that add numbers.
The HTML 4.01 specification, "by book," makes this layout very easy with a simple HTML table. (Divide the data by a decimal character in the two inner cells of the 4-column colgroup with the outer two col width="*" and the inner two col width="0*" . Vertical align the cell with the integer part of the number, and left-align the cell with decimal and fractional part of the number. Set both of these cells to nowrap , then set the table cellpadding="0" cellspacing="0" rules="groups" .)
But many say that this is bad, and that CSS should be used instead of tables for formatting. I also understand that a table with semantically correct data should contain these numbers without changes in one cell. But I did not find any CSS method to get the desired formatting!
Just setting the alignment of the text in one column with the "center" does not support the alignment of decimal points.
If I am mistaken, using align = "char" cannot handle integers that do not have an explicit decimal point, but they still need to be aligned as if they were.
Adding a decimal character to integers, even if it hides it, technically violates the integrity of the data.
Filling data with non-breaking spaces does not work with proportional (non-width) fonts. And this hack also violates the integrity of the data.
Setting a position with fixed pixel offsets prevents the column from having a truly “liquid” width, displayed as necessary, to fit the contents of all the cells in the column, including the header cell, which can contain data of any length at any time.
JavaScript that reads the resulting width of the table after rendering it, then dynamically calculates pixel offsets, and then overwrites the formatting with the DOM to “shift” the data into alignment more slowly and visually break as the data jumps. And this is a completely dirty hack that is even dirtier than using tables for layout purposes!
It seems to me that the "purist's" CSS-layout + HTML-semantic-data approach is not capable of fulfilling this simple but often desired layout! I hope someone can prove that I'm wrong and show me how to make this layout “right”.