Re: Table and block

On 22/11/2010 18:04, Ruslan Fayzrakhmanov wrote:
> I would like to ask you about the types of the visualized DOM-tree
> elements. At the http://www.w3.org/TR/CSS2/visuren.html (Visual
> Formatting model), it is written that there are 2 types of boxes: inline
> box and block box. What about tables? Table, is it a block?

The current version of the spec[1] contains a lot of not-the-whole-truth 
statements like that.  (Work is in progress to tidy this up a bit.)

The terminology in the spec has historically been rather muddled, and so 
things are a little more complex than your question supposes.  Using the 
most recently proposed terminology, the situation is as follows.

An element E with CSS display:table or display:inline-table generates a 
"principal box" known as a "table wrapper box", which contains none or 
more "caption boxes" (generated by child elements of E with 
display:table-caption) and one "table box".  In CSS21 these caption 
boxes, and the table box, are all block-level boxes.  The term 
"block-level" describes the outwards behaviour of the box.

The caption boxes happen to also be "block container boxes" (as they are 
now called), which means that they either contain only other block-level 
boxes or only inline-level content.  The term "block container" 
describes the inwards behaviour of the box.

Now, boxes which are both block-level and block containers are called 
"block boxes".  (Think divs and paragraphs in their typical guises.) 
Hence caption boxes are block boxes.  But what about the table wrapper 
box and the table box?

Well, the table wrapper box is either block-level or inline-level 
depending on whether the element E has display:table or 
display:inline-table, respectively.  In the former case the table 
wrapper box is a block box, and in the latter case the table wrapper box 
is an inline-level block container box, which behaves almost identically 
to the principal box generated by an element with display:inline-block.

The table box has a special inwards behaviour that allows it to contain 
rows, columns, cells etc.  Hence a table box is quite different from 
other types of boxes in CSS21.  Its name is simply "table box" and its 
outwards behaviour is always block-level, sitting (alongside any 
captions) inside the table wrapper box.

The most common source of confusion in all this is the fact that an 
element with display:table or display:inline-table generates /multiple/ 
boxes in the first place.  (That doesn't happen with 
display:block/inline-block/inline for example, although it does happen 
with display:list-item sometimes if a marker box is generated.)  Going 
hand-in-hand with this is the fact that there do not exist distinct 
document elements for the table wrapper box and the table box (and again 
nor for a list-item box and the marker box).  Hence there's only one 
element to target using CSS... and so what happens is the only thing 
that /can/ happen, namely that some CSS properties "applied" to an 
element with display:table or display:inline-table affect the table 
wrapper box (for instance 'position', 'float' and of course 'display' 
itself) whilst other properties affect the table box and not the table 
wrapper box (for instance 'color').

The terminology (and to a certain extent the behaviour) surrounding 
tables is still under consideration.  What I've been using here comes 
from the latest public Editor's Draft[2], but note that even that still 
has several flaws in its terminology usage in section 17.4.  These 
should be ironed out in due course.

[1] http://www.w3.org/TR/CSS2/tables.html#model
[2] http://www.w3.org/Style/css2-updates/css2/tables.html#model

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Thursday, 25 November 2010 18:57:22 UTC