2

Question

Why do th elements have centered text when text-align: center; is not specified by browser default?

System setup

  • MacBook Pro, mid-2014
  • OS X v 10.10.2
  • Google Chrome v 40.0.2214.94 (64-bit)
  • all software up-to-date as of time of this posting

Example Code

<!-- no external or internal CSS applied.
     browser default styles only. -->
<table width="500" border="1"> <!-- attributes for debugging only. never use these attributes in real code (use CSS instead). -->
    <tr><th> table heading </th><th> centered text     </th></tr>
    <tr><td> table data    </td><td> left-aligned text </td></tr>
</table>

Screen Shots

HTML rendering: screen shot of Google Chrome's rendering of a sample table. the text in the th elements is aligned center while the text in the td elements is aligned left.

Dev Tools on first th element: screen shot of Google Chrome Developer Tools showing browser-default styles applied to a th element. th{font-weight:bold;} td,th{display:table-cell;vertical-align:inherit;}/*inherited from table*/table{border-collapse:separate;border-spacing:2px;border-color:gray;}

Nowhere here do I see text-align: center;, yet clearly the text in th is center-aligned. Is this a Chrome bug?

Related Question

<th> text-align compatibility

Update

As of Chrome v67, th now has a specified text-align: -internal-center; by browser default.

chharvey
  • 8,580
  • 9
  • 56
  • 95
  • I'd guess that `` appears that way by default because (as far as I'm aware) there's no requirement for it to be anything else according to the HTML specification. **EDIT:** In fact, [this W3 page](http://www.w3.org/TR/CSS2/sample.html) suggests that the default style for `` should be `{ font-weight: bolder; text-align: center }` – GoBusto Feb 03 '15 at 19:19
  • I'm aware that [HTML recommends `th` elements appear centered and bold](http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2). What I'm not aware of is how Google Chrome renders it that way without `text-align: center;` in the CSS. However I do see `font-weight: bold;`, as shown in my screen shot. – chharvey Feb 03 '15 at 19:23

1 Answers1

4

I have now posted a new answer to the old question mentioned. I hope it clarifies the situation, but since this question isn’t really a duplicate but a specific question about browser behavior, I include the relevant point here:

Chrome (and Firefox) implements th elements in special way, which is not consistent with any specifications, including the “suggested rendering” in HTML5, even though it often leads to the same results. Effectively, there is no browser default style sheet rule for th, but when normal CSS cascade has been applied and it does not result in any value for text-align for th, then magically the value center is assigned to it (instead of the initial value of left as per the specs). This is probably a holdover from old pre-CSS days when th was simply centered.

If you inspect, in dev tools “Computeted” tab, a th element in a table that has no CSS settings, there is no value shown for text-align, even though the content is actually centered. If you check the “Show inherited properties” (which thus means more than the name says), you can see text-align: center.

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390