- From: Anton Prowse <prowse@moonhenge.net>
- Date: Thu, 25 Nov 2010 19:56:46 +0100
- To: www-style@w3.org
- CC: Ruslan Fayzrakhmanov <ruslanrf@gmail.com>
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