text-align compatibility

Question

In a table heading, the default text alignment for the th tag is center.

Consider the following code:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                background-color: aliceblue;
            }
            .default_grid {
                text-align: left;
                width: 600px;
                color: white;
            }
                .default_grid th {
                    /*  text-align: left;  */
                }
                .default_grid .first {
                    background-color: purple;
                }
                .default_grid .second {
                    background-color: orange;
                }
        </style>
    </head>
    <body>
        <table class="default_grid">
            <thead>
                <tr>
                    <th class="first">Test One</th>
                    <th class="second">Test Two</th>
                </tr>
            </thead>
        </table>
    </body>
</html>

In Firefox, Internet Explorer 7 (& lower), Safari, Chrome and Opera the text in <th> is aligned left. While in Internet Explorer 8 and Internet Explorer 9, the text is aligned center unless the rule is specified directly on <th> tag (uncomment line# 14).

Which one is the correct behavior?

score 19 · Accepted Answer · edited Jan 31 '16 at 11:01

According to W3C's Recommendation for TH,

Visual user agents typically render TH elements vertically and horizontally centered within the cell and with a bold font weight.

There is no mentioning of how it must behave(?) Whether or not must it inherit style from the parent?

Facts are:

By default all browsers center align text in TH element.
Internet Explorer 7 & lower, Firefox, Chrome, Safari and Opera set the (only †) text-align property of TH to inherit from the parent <thead>, <table>, <body> and so on.
Internet Explorer 8 and later doesn't let the TH to inherit text-align property from parent. You have to target the TH tag via a CSS selector to change its value.
† All browsers don't inherit the font-weight property from parent. You have to target the TH tag via a CSS selector to change its value.

Looking at this picture, we can't generalize which browser is doing the right job. Either disallowing both text-align and font-weight to inherit value (Internet Explorer 8 and later way) or "allowing one and dropping other" (non-Internet Explorer 8+ way) is better; it's on the vendor's discretion.

Being a designer, a general rule of thumb is we must choose those practices which work for all browsers. In this case, always target TH to change the value of text-align and font-weight.

"You have to target the TH tag via a CSS selector to change its value"... This worked. Thanks. — Himalaya Garg, Aug 19 '17 at 04:21

score 4 · Answer 2 · answered Feb 03 '15 at 19:52

Although @vulcanraven’s answer was essentially correct when posted, the situation has changed. The current HTML specification HTML5 describes “expected rendering”, which is not mandatory but can be regarded as implicitly recommended, and browser vendors may, if they wish, claim conformance to it. The “expected rendering” rules for th include the following:

“User agents are expected to have a rule in their user agent stylesheet that matches th elements that have a parent node whose computed value for the 'text-align' property is its initial value, whose declaration block consists of just a single declaration that sets the 'text-align' property to the value 'center'.”

That’s a rather complicated way of saying that th elements are centered by default. (It is also odd, because CSS has no way of referring to the computed value for a property that way.) But it really says that this is expected to apply only if the parent, namely a tr element, does not have text-align set to differ from left.

However, many modern browsers fail to implement this. In Chrome and Firefox, the cells are left-aligned. If you test with a simple table with no CSS or presentational attributes and inspect it using dev tools, you can see that th cells are centered but this is not reflected in CSS; those browsers calculate the properties as per CSS rules (and do not have a browser style sheet rules as described in “expected rendering”), but if text-align is not set at all for a th, it is centered and text-align is shown as center, as if from blue sky. This means that those browsers have ad hoc rules that deal with “default centering”. IE 11 seems to implement “suggested rendering” and shows the cells here as centered, but it does not show what CSS rules this is based on.

Thanks, this helped me. The same unexpected behavior of a `{text-align: center;}` coming out of nowhere on a `` happens also in Safari on macOS. — Jim Danner, Mar 22 '20 at 16:13

text-align compatibility

2 Answers2

Linked