Horizontal alignment and table width

This table should have a width of 300px, and the cells should be aligned as stated:

left
center
right
left

In this table (again 300px), all the "." characters should be lined up, in the cells with numbers. These cells can be anywhere in the column. Cells without a "." should have their last number right before where the dot would be:

left
center
right
left
57351
3.783
3783.21
16384.4
.4096

This table should (although the spec doesn't say so) be wide enough for both numbers to be "."-aligned.

16384.4
.4096256

Here are some more tests of character alignment. The next three tables should be aligned entirely on ñ (n with tilde), ◦ (circular bullet), and ∈ (element of).

mañana
enganñar
Señor Smith
A line with a ◦ in it.
◦ another such line
And another bullet: ◦
x ∈ integers
1, 2, 3, 4, 5, 9, 58, -7, 12, 31 ∈ integers
1, 0.2, 3.1 ∈ rational numbers

Here, the beginning of the word "testing" should match the beginning of the ".":

We are testing the program.
2.35

The results for these tests are not defined by the spec (I don't think). But you shouldn't crash...:

3.31.96
4731.3
1.378339
3.1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433
1415926535897932384626433 3.1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433
3.1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 3.1415926535897932384626433
1415926535897932384626433 3.1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 3.1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433 1415926535897932384626433

Now for a test with multiple columns... The first column should have cells aligned as described and be 200px wide. The second column should be 150px wide and have cells aligned to the decimal point. The third column should also have cells aligned to the decimal points, but it should be as big as necessary (which is wider than the widest cell contents, because of the alignment):

left 3.14159 0.73
right 80735.6 1260387
left .81 53.78883
center 3080 176.3

Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org