Re: css for centering a 'table' in a layout

**Bergamot** · Jun 27 '08, 07:17 PM

Re: css for centering a 'table' in a layout

lawpoop@gmail.c om wrote:

On Mar 11, 6:58 pm, Bergamot <berga...@visi. comwrote:

>Post a URL so we can see what you have done. Do not post code.

>

>
I have the grid of 1-5 questions and radio button answers layed out in
a table. I couldn't find a tutorial for a css grid, so I hacked it for
now. Ideally, I would like to have the question layout in css.

Why? the radio buttons look like tabular data to me. Use a table, except
don't use icky presentational HTML attributes, like align=center. Mixing
HTML and CSS styles will only make a mess, and a real PITA to maintain.
BTW, putting the radio buttons in a table doesn't mean the whole page
needs to be in a table.

And use a better doctype. The one in that test page triggers quirks
mode, which will not give consistent results across browsers as you've
already discovered. Use HTML 4.01 strict if you want the best compatibility.

In firefox, the progress area is properly left-aligned, but the whole
bar is left-aligned. I want it to be in the center.

Drop the align=center on that cell - that is for aligning text within
the block, not for aligning blocks themselves. Look up margin:auto

--
Berg

**lawpoop@gmail.com** · Jun 27 '08, 07:17 PM

Re: css for centering a 'table' in a layout

On Apr 12, 6:28 pm, Bergamot <berga...@visi. comwrote:

Why? the radio buttons look like tabular data to me. Use a table, except
don't use icky presentational HTML attributes, like align=center. Mixing
HTML and CSS styles will only make a mess, and a real PITA to maintain.
BTW, putting the radio buttons in a table doesn't mean the whole page
needs to be in a table.

So what exactly is the complaint people make about using table tags
for 'tabular data'? This certainly isn't a train schedule or a chart
in table format.
When they say 'tabular data', do they mean simply 'grid'?

Do the labels for the radio buttons also belong in the table? I'd
assume so; I can't imagine how you get them to line up with their
radio buttons without it.

And use a better doctype. The one in that test page triggers quirks
mode, which will not give consistent results across browsers as you've
already discovered. Use HTML 4.01 strict if you want the best compatibility.
>

In firefox, the progress area is properly left-aligned, but the whole
bar is left-aligned. I want it to be in the center.

>
Drop the align=center on that cell - that is for aligning text within
the block, not for aligning blocks themselves. Look up margin:auto

Awesome! Thanks, Berg!

**lawpoop@gmail.com** · Jun 27 '08, 07:17 PM

Re: css for centering a 'table' in a layout

Or, let me ask a more general question: Is an html table an
appropriate way to align any set of elements of an HTML page that are
to be in a grid layout?

Or is there a pure css way to do a grid-style layout? Something where
you wanted, say, two rows and four columns of some elements, that all
have the same width and spacing distribution?

**dorayme** · Jun 27 '08, 07:17 PM

Re: css for centering a 'table' in a layout

In article
<085e9945-c12f-4121-add3-e75cd826d5bd@b1 g2000hsg.google groups.com>,
lawpoop@gmail.c om wrote:

Or, let me ask a more general question: Is an html table an
appropriate way to align any set of elements of an HTML page that are
to be in a grid layout?
>

There is an idea that a grid does not necessarily imply anything more
than a set of shapes and that you should not use a html table for where
you need no more than a visual arrangement that does not relate
information in rows and columns.

Even though the whole basis of this distinction is not as clear as most
church goers think, best to get the idea first.

The reason you have been advised to use a table is not because of the
purely visual look of a grid but because a cell in which you place a
button is logically related to the information in the cell adjoining it
in the same row (or something like this).

Or is there a pure css way to do a grid-style layout? Something where
you wanted, say, two rows and four columns of some elements, that all
have the same width and spacing distribution?

Yes there is. There are difficulties for some situations that sort of
fit your description, given that not all browsers respect all the CSS
2.1 recommendations or differ amongst themselves for other reasons.

You might read something like:

<http://www.456bereastr eet.com/archive/200410/bring_on_the_ta bles/>

and follow some of the links....

--
dorayme

**Ben C** · Jun 27 '08, 07:17 PM

Re: css for centering a 'table' in a layout

On 2008-04-13, lawpoop@gmail.c om <lawpoop@gmail. comwrote:

Or, let me ask a more general question: Is an html table an
appropriate way to align any set of elements of an HTML page that are
to be in a grid layout?

Supposedly not. You're only meant to use an HTML table if there's
something abstractly tabular about the data independently of how it
might be displayed.

"Abstractly tabular" is a contrived idea since really a table is a kind
of presentation.

Perhaps a better criterion is whether the table layout is part of the
meaning of the data.

Or is there a pure css way to do a grid-style layout? Something where
you wanted, say, two rows and four columns of some elements, that all
have the same width and spacing distribution?

Yes, you just put display: table, display: table-row, display:
table-cell etc. on the elements you want to be tables, rows and cells.
It should all work exactly the same (but with the added feature that you
can leave out bits of the structure and have it filled in for you in a
defined way). It doesn't work in IE.

**Bergamot** · Jun 27 '08, 07:17 PM

Re: css for centering a 'table' in a layout

lawpoop@gmail.c om wrote:

Or, let me ask a more general question: Is an html table an
appropriate way to align any set of elements of an HTML page that are
to be in a grid layout?

It depends on what you mean by "grid". A data grid has relationships
between rows and columns, and is tabular. If you're thinking of the
general design principle of grid layouts, that's not tabular. In your
case there was a direct relationship between the radio button and its
corresponding label, as well as the buttons as a group. Granted, it
could have been laid out various ways, but a table is not wrong for
this, IMO.

Or is there a pure css way to do a grid-style layout? Something where
you wanted, say, two rows and four columns of some elements, that all
have the same width and spacing distribution?

There are plenty of CSS templates with varying numbers of columns.

--
Berg

**Andy Dingley** · Jun 27 '08, 07:17 PM

Re: css for centering a 'table' in a layout

On 13 Apr, 05:09, lawp...@gmail.c om wrote:

Or, let me ask a more general question: Is an html table an
appropriate way to align any set of elements of an HTML page that are
to be in a grid layout?

Yes!

Or is there a pure css way to do a grid-style layout?

No.

To get "grid like" behaviour (the grid relations between cells take
precedence over other size or positioning constraints applied to
cells) you must apply the CSS "table-*" property values and behaviours
to the CSS display property. You can do this most easily by using the
default CSS properties for <table>.

You may also do this by applying these same CSS values to a <div(or
any suitable element) through a stylesheet. However this isn't
recommended - it's not supported by all browsers, and as it was
originally added to the CSS specification as a means of working with
CSS + XML rather than HTML, there's no pressing need why its support
should ever be extended for HTML in general.

Re: css for centering a 'table' in a layout

Re: css for centering a 'table' in a layout

Comment

Comment

Comment

Comment

Comment

Comment

Comment