Closed Bug 11384 Opened 21 years ago Closed 20 years ago

Tables ignore 'text-align' property


(Core :: Layout: Tables, defect, P3)






(Reporter: udz20, Assigned: karnaze)




(Keywords: css1, Whiteboard: [PDT-])


(1 file)

The inherited 'text-align' style, which should apply to all block-level
elements, is ignored by tables.

Since the implemented alternative - the ALIGN property - is not STRICT HTML 4.0,
the people at w3c are probably not too happy...
Whiteboard: [MAKINGTEST]
BTW, the testcase on this bug is invalid.  text-align should center what's
inside the table, not the table itself.  However, there are still issues here.
I interpret the spec in the same way as the original reporter, that when text-

align is applied to block-level elements it aligns the element itself not

necessarily any text within the element. For example, the HTML 4.01 spec states


To center the entire document with CSS:


<TITLE>How to Carve Wood</TITLE>

<STYLE type="text/css">

BODY {text-align: center}



...the body is centered...


This seems to denote everything in the body, not just the text. Additionally,

there is also mention of text-align being instead of depracated tags such as

<center> or <div align="center"> which apply to other elements contained by the

tags not just the text.
You're overinterpreting the example.  The only thing in BODY is text, and that's

The CSS 'text-align' property describes the alignment of line boxes within a
block box.  That's all it does.

The various ALIGN attributes within HTML, on the other hand, are a mess, and do
different things in different places.
OS: Linux → All
Hardware: PC → All
There seem to be more severe problems with centering in Mozilla. For instance,

consider the example

The document contains three block-level elements: a paragraph, a DIV, and a

TABLE, all of which are defined to be 50% wide.

Suppose that our aim is to center all three blocks within the viewport.

First, apply text-align:center to the body itself.  No luck.  All three blocks

align left, though the contents of the first two blocks centers, as one would

expect given that text-align is supposed to be inherited by descendant blocks.

Strangely, the third, table block does not inherit the body's text-align.

Second, enclose everything inside the body in a DIV, and apply text-align:center

to it.  Additionally, specify that it be 100% wide, just to be sure.  All three

blocks still align left.

Third, throw CSS to the wind and set the old HTML ALIGN="CENTER" property on the

primary DIV.  Mozilla still aligns all three blocks left.

After testing this page on Mac IE 4.5, Mac Nav 4.7, and Mac Mozilla M11, no

browser displays this page properly. IE 4.5 fails to center the paragraph, but

does center the DIV and the TABLE, and all three blocks also correctly inherit

text-align:center (it also correctly displays the DIV with the proper dimensions

of 50% by 50%).  Nav 4.7 centers all three blocks, but fails to inherit to the

DIV and the TABLE (not to mention failing to handle the background colors

properly).  Mozilla, as previously mentioned, fails to center any blocks, fails

to inherit to the TABLE, and also fails to apply the proper 50% height to the


As to the assertion that text-align applies only to "line boxes" inside a block

is contradicted by the CSS1 spec itself: see "

align", which specifically states that all blocks within a block that has text-

align:center set will be centered.  This would seem to suggest that text-align is

to be applied to both line and block level elements.
In your last paragraph, you're confusing line boxes and inline boxes (I think).
All inline content within block-level elements is divided into line boxes (in
the line-breaking algorithm).  These line-boxes are then positioned vertically
using the rules in section 10.8 of CSS2, and positioned horizontally within the
block according to the 'text-align' property.
I'm a little hesitant to rely too much on CSS2, since Mozilla technically is only

going to support CSS1. Anyway, I suspect they're mostly the same with respect to

block and inline elements.  CSS1's Formatting Model section ("

TR/REC-CSS1#formatting-model") states that all elements generate a box, except

for inline elements which may share a box.

I must admit that it's still unclear how text-align is supposed to operate.  The

first paragraph states that it "describes how text is aligned within the

element," but the next paragraph talks about contained boxes aligning relative to

the width of the element.  After all, even unmarked-up text inside a block must

have a box generated for it to even display, mustn't it?  Thus, is the block

centered, or the text within it?

In any event, there are still problems with centering in Mozilla, which I hope

are appropriately reported within the context of this bug.
Target Milestone: M15
The url appears to be invalid.
Whiteboard: [MAKINGTEST]
Summary: Tables ignore 'text-align' style → {css1} Tables ignore 'text-align' property
The suggested fix in bug 7112 says "This doesn't handle the compat issues for
text-align at all", so I guess this bug should handle that issue. David?
Keywords: css1
Migrating from {css1} to css1 keyword. The {css1}, {css2}, {css3} and {css-moz}
radars should now be considered deprecated in favour of keywords.
I am *really* sorry about the spam...
In reexaming my example, I notice that when the three enclosed blocks are given

margin:auto, the centering happens properly.  Problem is, I thought margins were,

by default, supposed to be auto.
Summary: {css1} Tables ignore 'text-align' property → Tables ignore 'text-align' property
I just worked on 7112 and deliberately disallowed the text-align property to 
behave this way figuring it was a bug in Nav rather than a quirk. Maybe it 
should be a quirk. Adding beta1 keyword, since I was just in the relevant code, 
and there are probably pages that rely on the behavior.
Keywords: beta1
Putting on the PDT- radar for beta1.
Whiteboard: [PDT-]
I have a fix (not checked in) for the test case with the "strict" DTD removed 
that will center the table and not the text (like Nav and IE). With the "strict" 
DTD in place, it will center the text of the table but not the table, which 
conforms more closely to the intent of the specs. 
I am going to attach the fix (I mentioned) as an attachment and mark this bug 
WONTFIX. Aligning the table instead of the text is contrary to the CSS 2 spec, 
and dbaron explained how to do the right thing using CSS 2. If there are real 
web pages that rely on this behavior, I will reconsider.
Closed: 20 years ago
Resolution: --- → WONTFIX
Verified WONTFIX
*** Bug 273470 has been marked as a duplicate of this bug. ***
You need to log in before you can comment on or make changes to this bug.