By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,729 Members | 1,356 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,729 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.
Berg, thanks for taking the time to look at this. Here is the URL
( sorry for the delay in response):

http://nerdcraft.net/survey.html

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.

Problems with the progress bar:
In IE, the css progress bar is properly center aligned, but the
progress part is also center aligned within the bar , which is a
problem. The progress part should right left-aligned.

In firefox, the progress area is properly left-aligned, but the whole
bar is left-aligned. I want it to be in the center.
Also, in firefox, the 'add comment' part is broken -- it extends the
content area down past the footer.

I'm thinking the progress bar would also be easier to do as a table,
with fixed pixel widths, instead of css.
Jun 27 '08 #1
Share this Question
Share on Google+
7 Replies


P: n/a
la*****@gmail.com 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.

http://nerdcraft.net/survey.html

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
Jun 27 '08 #2

P: n/a
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!
Jun 27 '08 #3

P: n/a
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?
Jun 27 '08 #4

P: n/a
In article
<08**********************************@b1g2000hsg.g ooglegroups.com>,
la*****@gmail.com 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.456bereastreet.com/archive/200410/bring_on_the_tables/>

and follow some of the links....

--
dorayme
Jun 27 '08 #5

P: n/a
On 2008-04-13, la*****@gmail.com <la*****@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.
Jun 27 '08 #6

P: n/a
la*****@gmail.com 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
Jun 27 '08 #7

P: n/a
On 13 Apr, 05:09, lawp...@gmail.com 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.
Jun 27 '08 #8

This discussion thread is closed

Replies have been disabled for this discussion.