Welcome to WebHeadStart.org

Web Technologies

Sponsored By

WebHeadStart.org is currently in beta.
Please pardon our appearance as we work to provide you with the most comprehensive reference on today's web technologies.

Interested in advertising on WebHeadStart? Become an advertising partner today!

[WWW-HTML Mailing List Archive Home] [Messages By Thread] [Messages By Date]

Re: Flexible table/grid

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Fri, 13 Jan 2006 19:08:23 -0800
To: www-html@w3.org
Message-ID: <dq9pv9$lq3$1@sea.gmane.org>


"Markus Jonsson" <carnaby@passagen.se> wrote in message 
news:22289053.1132760129420.JavaMail.root@e......
>
> Shouldn't there be a Grid element, similar to the GtkIconView of the GTK+ 
> toolkit?
> Unlike a TABLE, you wouldn't have to specify rows and
> columns. The number of cols/rows would be rearranged automatically due to 
> the measures of the container.
>
>

This could be done with some addition to CSS:

"flow" attribute [1] which describes layout algorithm for
blocks like DIV, TD, etc. (containers)
"flow" has four values so far:
1) vertical - blocks are laid out as
    normally in div - single column, from top to bottom.
2) horizontal - single row - all blocks have same height.
    This pretty much inversion of vertical. See [2]
3) h-flow - blocks wrap in multiple rows, all block in single
   row have the same width. From left to right, top to bottom.
4) v-flow - blocks wrap in columns, from top to bottom and
   left to right.

Illustration:
This is how such flow implemented in my HTMLayout:
http://www.terrainformatica.com/htmlayout/images/selects2.jpg 
Last <select> on the screenshot has style flow:h-flow;

Note: all inputs in HTMLayout are fully styleable as
they are "made from DOM elements" with applied
"input behaviors"  so <select> is just a <div> with
arbitrary markup inside. behavior:select just enumerates
<options> contained inside.

Thus it is possible to say:

<select>
   <table><tr>
     <td><option>opt1</option>
     ...
     <td><option>optN</option>
   </tr></table>
 </select>

Links:
[1] http://www.terrainformatica.com/htmlayout/flow.whtm 
[2] http://www.terrainformatica.com/htmlayout/images/image1.png 

Andrew Fedoniouk.
http://terrainformatica.com 
Received on Saturday, 14 January 2006 03:09:12 GMT
Valid XHTML 1.0! Valid CSS! Site Map | Privacy Policy | Terms of Use | WebHeadStart.org © 2005 All Rights Reserved.