The five most popular Web browsers in 2016
are very challenged by
the CSS vertical-align property when applied to
tables whose CSS display property is inline.
Safari and Chrome do not step up to the challenge: they simply don't inline tables at all.
For several of the possible values of vertical-align the
other three browsers do not 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.
See CSS 2 standard on line-height and vertical-align.
There are a couple of issues that are unfortunately left up to interpretation. The browsers, unsurprisingly, 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.
In the CSS 2 standard, this is much better described than before, but the description is complicated.
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
In the CSS 2 standard, this is much better described than before.
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
By default, value should be |
baseline
|
FF: middle of table is on baseline. (Previous versions put bottom of table on baseline, which I thought made most sense.) IE: like FF Opera: middle of table is on baseline. | ||
|
CSS1: Align the baseline (or bottom, if there is none), with enclosing baseline. CSS2: Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline. This same test was made in around 2008. There has been some change, not all of it positive. I'm dismayed at how little care has been taken by all the manufacturers. |
baseline
|
FF: middle of table is on baseline (like default). (Previous versions put the bottom of the table on the baseline) IE: like FF Opera: middle of table is on baseline (like default). | ||
|
CSS1: Align top of the table with top of highest item in enclosing line. CSS2: Align the top of the aligned subtree with the top of the line box. (see note below) |
baseline
|
FF: right (improved from prev. versions) IE: right Opera: right | ||
|
CSS1: Align bottom of table with bottom of lowest item in enclosing line. CSS2: Align the bottom of the aligned subtree with the bottom of the line box. (see note below) |
baseline
|
FF: right IE: this is an improvement over older versions.
Opera: seems identical to | ||
|
CSS1: Place middle of table at half the enclosing font's x-height above baseline. CSS2: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. |
baseline
|
FF: completely wrong (looks like default) IE: now looks like FF. My notes for older versions show this being done right. Opera: is off. middle of table is on the baseline | ||
|
CSS1: Place top of table at the top of enclosing line's text. CSS2: Align the top of the box with the top of the parent's content area |
baseline
|
FF: completely wrong (looks like default) IE: now looks like FF. My notes for older versions show this being done right. Opera: is high, in a way I don't understand | ||
|
CSS1: Place bottom of table at the bottom of enclosing line's text. CSS2: Align the bottom of the box with the bottom of the parent's content area. |
baseline
|
FF: completely wrong (looks like default) (I had noted that a previous version had it right.) IE: right Opera: wrong (looks like default) | ||
|
CSS1: Standard unclear on what this should do. CSS2: Raise the baseline of the box to the proper position for superscripts of the parent's box. |
baseline
|
FF: not clear what it's doing -- maybe the middle of the table is at superscript height. (in previous versions, just looks like the default again.) IE: now looks like FF. Opera: similar to FF. | ||
|
CSS1: Standard unclear on what this should do. CSS2: Lower the baseline of the box to the proper position for subscripts of the parent's box. |
baseline
|
FF: maybe the middle of the table is at baseline height. (Prev. versions had the baseline of the bottom element lower than the text baseline.) IE: now looks like FF. This is an improvement over old versions. Opera: like IE | ||
|
CSS1: Move the table down by one line-height CSS2: Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'. |
baseline
|
FF: puts the top of the table at the baseline of the text.
Inconsistent with 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. |
CSS2 note on values top and bottom:
The following values align the element relative to the line box.
Since the element may have children aligned relative to it (which in
turn may have descendants aligned relative to them), these values use
the bounds of the aligned subtree. The aligned subtree of an inline element
contains that element and the aligned subtrees of all children inline
elements whose computed 'vertical-align' value is not 'top' or 'bottom'.
The top of the aligned subtree is the highest of the tops of the boxes in
the subtree, and the bottom is analogous.