# Vertical alignment of inline tables

The three most popular Web browsers

- Firefox (tested 2.0.0.8)
- Internet Explorer (tested 6.0.2800 and 7)
- Opera (tested 9.50 Beta 2)

are very challenged by the CSS `vertical-align` property when applied to tables whose CSS `display` property is `inline`.

For not one of the possible values of `vertical-align` do all three agree, and none of the browsers does very well when compared with the very mature, very public standard.

See CSS 1 standard on vertical-align.

Safari (to 3.0.4) does not accept the challenge: it doesn't inline tables at all.

There are a couple of issues that are unfortunately left up to interpretation. The browsers, usurprisingly, do silly things in these cases.

- What is the baseline of a table? I would think, it was the baseline of the text in the last row of the table (the lowest baseline among the columns of the last row, if they differ). Sometimes however, it is interpreted as the bottom of the table's bounding box, and sometimes as the baseline of the table's first row.
- What does superscripting and subscripting mean, when applied to a table? There are very different obvious interpretations. This is so unclear, I doubt the usefulness of `sub` and `super` as applied to tables

Note: specifying the `border` of the table (either with CSS or with the `table` attribute) has a pathological effect in both Firefox and Opera (but IE gets it right)

standard | example | conformance
--- | --- | ---
unspecified `vertical-align` By default, value should be `baseline` | baseline
A
B
baseline | FF: bottom of table is on baseline. Consistent with `baseline` IE: like FF Opera: middle of table is on baseline. Inconsistent with `baseline`.
`vertical-align: baseline` Align the baseline (or bottom, if there is none), with enclosing baseline. | baseline
A
B
baseline | FF: puts the bottom of the table on the baseline IE: like FF Opera: acts as if the baseline of the table were that of its top row.
`vertical-align: top` Align top of the table with top of highest item in enclosing line. | baseline
A
B
baseline | FF: wrong (looks like default) IE: right Opera: right
`vertical-align: bottom` Align bottom of table with bottom of lowest item in enclosing line. | baseline
A
B
baseline | FF: right IE: wrong: instead puts the bottom of the top row of the table on the bottom. Opera: like IE.
`vertical-align: middle` Place middle of table at half the enclosing font's x-height above baseline. | baseline
A
B
baseline | FF: completely wrong (looks like default) IE: right Opera: is off. middle is on the baseline
`vertical-align: text-top` Place top of table at the top of enclosing line's text. | baseline
A
B
baseline | FF: completely wrong (looks like default) IE: right Opera: is high, in a way I don't understand
`vertical-align: text-bottom` Place bottom of table at the bottom of enclosing line's text. | baseline
A
B
baseline | FF: right IE: right Opera: wrong (looks like default)
`vertical-align: super` Standard unclear on what this should do. | baseline
A
B
baseline | FF: just looks like the default again. IE: puts the bottom row of the table where a superscript would be Opera: looks like it raises the table (from default middle position) by the amount of a subscript
`vertical-align: sub` Standard unclear on what this should do. | baseline
A
B
baseline | FF: The baseline of the bottom element is lower than the text baseline IE: puts the top of the table where the top of a subscript would be Opera: like IE
`vertical-align: -100%` Move the table down by one line-height | baseline
A
B
baseline | FF: puts the middle of the table on the baseline. Consistent with `baseline` IE: like FF Opera moves it the right amount, but since it started out with the table's middle on the baseline, the effect is quite wrong.