2012-07-27 0:22, Jay Tanna wrote:
I am trying to achieve, in CSS and
HTML, a menu structure like the one pictured here:
http://coffeeonmars.com/testing/menu.png
[...]
In certain situation you have to use Tables
I would rather say that in many situations, a table element is the most
adequate for all purposes (including styleability and accessibility).
> and the food menus you have produced is the ideal candidate for this.
Well, for tables, not for a table. Both structurally and in rendering,
the menu in the picture consists of three tabular setups: one table with
four columns (and with a header row); another table with three columns;
and a third table with two columns, though it might well be seen as two
such tables, due to the empty space between them, reflecting difference
in topic.
If you tried to make it one table element in HTML, you would need to
play dirty tricks with colspan or to use inner tables.
Marked up as three or four separate tables, you would still have styling
problems. For example, if you prefer rendering like the one in the
picture, then you would need to set the width of the first columns of
the first two tables the same. This is trivial if you use px or em
units, but not really possible in CSS alone if you want the width to be
"automatic" (as wide as the widest cell requires, plus some fixed
padding). And automatic widths are usually preferable in content that is
subject to changes - you wouldn't want to have to tune the CSS every
time the items in the menu (or just their names) are changed, e.g.
introducing a Supercalifragilistic drink.
Yucca
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
