css for centering a 'table' in a layout

Hello all -

I'm working on a site that has a survey page for users. I'm fairly new
to css, but I want to use it for layout.

In the page, the user has a a set of radio buttons, five of them, to
pick from. What I want is a center-aligned table layout, with the top
row being the titles of each radio button, and the bottom row being
the radio buttons. Each cell would be the same width.

If I were formatting this using html, I would simply use the table
tags. But, I'm trying to do this using pure css. I have a css layout
that properly center-align and evenly space my radio buttons and their
titles in IE 6, but in firefox, they are left-aligned.

All of the css tutorials that I've looked at so far talk about getting
text to flow around an image, or right- and left- aligning various
navigation features. I haven't found a tutorial about center-aligning
html elements, evenly spacing them, etc. Basically I want to emulate
features of the <table> tags.

Now I know some purists bristle at the suggestion that one call
something a 'table' when it's not a table of data. Please keep in mind
that when I say table, I'm talking about the 2-dimensional structure
of the layout, not the abstract concept of a dataset with columns and
rows. Yes, I am misappropriating the table tags.

Thank you!

In article
<d261c888-e5e8-47dd-9d12-b305f8e93905 (AT) s12g2000prg (DOT) googlegroups.co
m>,
lawpoop (AT) gmail (DOT) com wrote:

Hello all -

I'm working on a site that has a survey page for users. I'm fairly new
to css, but I want to use it for layout.

In the page, the user has a a set of radio buttons, five of them, to
pick from. What I want is a center-aligned table layout, with the top
row being the titles of each radio button, and the bottom row being
the radio buttons. Each cell would be the same width.

If I were formatting this using html, I would simply use the table
tags. But, I'm trying to do this using pure css.

You seem confused about whether it is you who is doing the
formatting or not? Why don't you live out your wildest dream and
use a table considering that this is the correct way to do this
and considering it is what tables are for, namely laying out
tabular data.

--
dorayme

lawpoop (AT) gmail (DOT) com wrote:

I have a css layout
that properly center-align and evenly space my radio buttons and their
titles in IE 6, but in firefox, they are left-aligned.

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

--
Berg

On Mar 11, 6:58 pm, Bergamot <berga... (AT) visi (DOT) com> wrote:

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.

lawpoop (AT) gmail (DOT) com wrote:

On Mar 11, 6:58 pm, Bergamot <berga... (AT) visi (DOT) com> wrote:
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

On Apr 12, 6:28 pm, Bergamot <berga... (AT) visi (DOT) com> wrote:

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!

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?

On 2008-04-13, lawpoop (AT) gmail (DOT) com <lawpoop (AT) gmail (DOT) 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?

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.

lawpoop (AT) gmail (DOT) 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

In article <slrng03j9s.bm8.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-04-13, lawpoop (AT) gmail (DOT) com <lawpoop (AT) gmail (DOT) 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?

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.

The OP's case is clearly one that can count as tabular data and
therefore justifying the use of an html table. But to less pedestrian
matters now.

Almost all quick responses to such questions are this circular "tables
are for tabular data". Circular definitions are not useless. But they
are not particularly informative to outsiders. To insiders, they are
nice slogans. It rallies the troops and serves as a reminder to try to
separate content from presentation.

There is likely no set of necessary and sufficient conditions to define
an appropriate use of tables. Many people, especially those who are the
quickest off the mark to condemn certain uses are not short of various
definitions. But they always fall short because the range of cases for
which the very idea of a table is appropriate is simply too large and
varied. There would be some features that run through many cases without
there being some common thing throughout all the cases.

Perhaps it could be usefully said that an html table starts to be
particularly appropriate where the table itself provides information to
the user. How is this possible? By common knowledge and education, most
people know that a table is being presented (clues like borders to
delineate rows and columns, headings and so on all help) and this
knowledge immediately alerts the user that there is a correct way to
read the layout. Read it one way and you get true things, read it
another way and you get false things. There is order and structure. It
is a particularly meaningful thing.

Compare the use of an html table for mere aesthetic purposes. A notable
example is a photo that is sliced up by the PS and Macromedia brigades
and the bits stuck in a table for - you have to see it to believe it! -
no particular reason at all (they might as well have img'd and src'd it
whole). Here there is no way to "read" the cells to extract truth or
falsity. The table contributes no information.

Another way to understand this semantic component is to look at how
elements might be treated by browser coders. Information about the
headers might be used to read the table in a certain way for those who
require voice interpretations. But with a purely aesthetic arrangement
via tables, there is no sensible col headers or any particular
meaningful way of reading the layout.

I happen to think that some layouts that use tables for columning where
navigation is one column and content is another is not merely
presentational. There can be a logic and structure to it and the headers
to the two columns can be understood to be implied. Here are the links
for navigating this site, here is the content for this page. The crime,
if it be a crime, to use tables for structural columns is a different
crime to the usual 'abusing' of tables. Fundamentalist types will not be
wanting to make these distinctions.

I don't think table columning is a crime against semantics because it
simply has a semantic intent to begin with. You can practically hear the
column headings in a simple two col layout. It may well be inadvisable
for other reasons. For flexibility and maintenance, for accessibility on
some machines.

--
dorayme