Re: [css3-layout] shorthand for slot construction

Tab Atkins Jr. wrote:
> On Mon, Oct 19, 2009 at 11:43 AM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> CSS tables cannot reproduce <table> layout.
>> colspan/rowspan and their flex behavior.
> 
> There's been talk about adding rowspan/colspan.  It's very likely
> that'll show up in either Tables level 3 or 4.
> 
> What part of the flex behavior isn't present in the Tables module?
> 
>> width=100% in tables is very far from width:100% in CSS.
> 
> Afaik, width=100% on a <table> is just sizing the border-box.  In
> other words, <table>s just have an automatic box-sizing:border-box
> applied by the UA.

width="100%" on table is close to the following:

table
{
   width:100%;
   box-sizing: border-box;
   overflow: none; /* hypothetical "newer overflow" or this: */
   min-width: min-intrinsic;
}

But width/height="XX%" for table cells is completely different thing.

Set of cells having width="XX%" in percents in case of
sum of percents is equal or greater than 100% is turning into
the flex computation.

So this:

<TD width="30%">1</TD>
<TD width="70%">2</TD>
<TD width="50%">3</TD>

will be precisely this (using HTML 4.0 relative units [1]):

<TD width="3*">1</TD>
<TD width="7*">2</TD>
<TD width="5*">3</TD>

or this if to use flexes:

<TD style="width:3*">1</TD>
<TD style="width:7*">2</TD>
<TD style="width:5*">3</TD>


> 
>> (and <table>s have explicit flex units already like
>> <td width="1*">, btw) So vast majority of cases where we use
>> flow:"template" now are simply not reproducible by display:table
>> and even by <table>s.
> 
> Can you explain this flex behavior further?
> 

On this page:
http://www.terrainformatica.com/htmlayout/fspu.whtm
There is a table in "Example:" section just after
"Imagine that four blocks below declared in CSS as:"

It is declared as:

<TABLE width="100%">
<TR>
   <TD width="100">width:100px<br>
       <IMG height="1" src="spacer.gif" width="100">
       <!-- the ugly "strut" needed to force the cell to have
            needed size--></TD>
   <TD width="30%">width:30%%</TD>
   <TD width="70%">width:70%%</TD>
   <TD width="150">width:150px<br>
       <IMG height="1" src="spacer.gif" width="150"></TD>
</TR>
</TABLE>

If you resize UA's window you can note that this table is flexible,
two cells in the middle behave exactly as this (flow/flexes):

<div style="flow:horizontal">
   <div style="width:100px">width:100px</div>
   <div style="width:3*">width:30%%</div>
   <div style="width:7*">width:70%%</div>
   <div style="width:150px;">width:150px</div>
</div>

This is not reproducible in CSS by any means.
Not even with display:table/row/cell.

As I said without flex units display:table is a dead born
feature.

Flex layout of tables and overflow:none; (imaginable) in cells
is the main motivation why tables are used for page layouts
on the web.

Any advices to do not use tables for layout purposes
without any means to replace them in CSS are cynical at least.

[1] HTML 4.01 Relative Length Units defined here:
http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-length
(note they were defined in HTML in previous century)


> ~TJ
> 

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Tuesday, 20 October 2009 02:25:36 UTC