D. McLellan's CSS tutorial - why a table?

#1

On Macromedia's site there is this CSS tutorial:

http://www.macromedia.com/devnet/mx/...2004_cssp.html

In the main content area of the page being used in this tutorial there
is a form. The form itself is laid out using table. Why do it this way
in a tutorial explaining CSS layout? Below is the code

To my problem at hand, I was looking specifically for an example of how
to layout a html form that has 2 columns - one containing text prompts
and the other containing text input boxes. I also wanted to fix two
buttons at the bottom of the form.

The tutorial would seem to suggest that trying to layout the actual form
usig CSS is not a good idea.

I'm seeking comments/opinions here. And if you think that it's not a
problem using CSS, I could use some pointers or an example.

TIA.

<div class="feature">
<form method="post" action="#" id="loginform">
<table>
<tr>
<th><label for="username">Username:</label></th>
<td><input type="text" name="username" tabindex="1" /></td>
</tr>
<tr>
<th><label for="password">Password:</label></th>
<td><input type="password" name="password" tabindex="2" /></td>
</tr>
<tr>
<td> </td>
<td><input class="submit" type="submit" value="Log in" tabindex="3"
/></td>
</tr>
</table>
</form>
</div>

#2

"Karl" <kthompson (AT) nospam (DOT) pine-grove.com> wrote

Quote:

The tutorial would seem to suggest that trying to layout the actual form
usig CSS is not a good idea.

I don't have an answer to this (I only have some very personal opinions),
but this page could be a good starting point if you are looking for
additional info:

http://css-discuss.incutio.com/?page=FormElements

----------------------------
Massimo Foti
DW tools: http://www.massimocorner.com
CF tools: http://www.olimpo.ch/tmt/
----------------------------

#3

Personally speaking I would use a two col table to layout the form. It's
much simpler and tables are, despite what you read, better to use in
some circumstances, this being one of them.

Karl wrote:

Quote:

On Macromedia's site there is this CSS tutorial:

http://www.macromedia.com/devnet/mx/...2004_cssp.html

In the main content area of the page being used in this tutorial there
is a form. The form itself is laid out using table. Why do it this way
in a tutorial explaining CSS layout? Below is the code

To my problem at hand, I was looking specifically for an example of how
to layout a html form that has 2 columns - one containing text prompts
and the other containing text input boxes. I also wanted to fix two
buttons at the bottom of the form.

The tutorial would seem to suggest that trying to layout the actual form
usig CSS is not a good idea.

I'm seeking comments/opinions here. And if you think that it's not a
problem using CSS, I could use some pointers or an example.

TIA.

div class="feature"
form method="post" action="#" id="loginform"
table
tr
th><label for="username">Username:</label></th
td><input type="text" name="username" tabindex="1" /></td
/tr
tr
th><label for="password">Password:</label></th
td><input type="password" name="password" tabindex="2" /></td
/tr
tr
td> </td
td><input class="submit" type="submit" value="Log in" tabindex="3"
/></td
/tr
/table
/form
/div

#4

I disagree. Forms are quite simple to layout using CSS.

See, for example, this page -

http://www.practicalcomponents.com/n.../amkor_rfq.htm

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

Quote:

Personally speaking I would use a two col table to layout the form. It's
much simpler and tables are, despite what you read, better to use in some
circumstances, this being one of them.

Karl wrote:

On Macromedia's site there is this CSS tutorial:

http://www.macromedia.com/devnet/mx/...2004_cssp.html

In the main content area of the page being used in this tutorial there is
a form. The form itself is laid out using table. Why do it this way in a
tutorial explaining CSS layout? Below is the code

To my problem at hand, I was looking specifically for an example of how
to layout a html form that has 2 columns - one containing text prompts
and the other containing text input boxes. I also wanted to fix two
buttons at the bottom of the form.

The tutorial would seem to suggest that trying to layout the actual form
usig CSS is not a good idea.

I'm seeking comments/opinions here. And if you think that it's not a
problem using CSS, I could use some pointers or an example.

TIA.

div class="feature"
form method="post" action="#" id="loginform"
table
tr
th><label for="username">Username:</label></th
td><input type="text" name="username" tabindex="1" /></td
/tr
tr
th><label for="password">Password:</label></th
td><input type="password" name="password" tabindex="2" /></td
/tr
tr
td> </td
td><input class="submit" type="submit" value="Log in" tabindex="3"
/></td
/tr
/table
/form
/div

#5

Karl wrote:

Quote:

In the main content area of the page being used in this tutorial there
is a form. The form itself is laid out using table. Why do it this way
in a tutorial explaining CSS layout?

Perhaps if you read the W3C specifications, you might not need to ask
the question. Here is the very first sentence in the HTML 4.01
definition of tables:

"The HTML table model allows authors to arrange data -- text,
preformatted text, images, links, forms, form fields, other tables, etc.
-- into rows and columns of cells."

http://www.w3.org/TR/html4/struct/tables.html#h-11.1

The myth that tables go counter to the spirit of CSS is precisely that -
a myth.

--
David Powers
Author, "Foundation PHP 5 for Flash" (friends of ED)
Co-author "PHP Web Development with DW MX 2004" (Apress)
http://computerbookshelf.com

#6

We'll agree to disagree.

That page doesnt take much text enlargement before it breaks down. It
would be difficult for the end user to see which category belongs to
which text field. Why complicate the issue when a table will do it
easier and quicker, plus keep elements from breaking.

Murray *TMM* wrote:

Quote:

I disagree. Forms are quite simple to layout using CSS.

See, for example, this page -

http://www.practicalcomponents.com/n.../amkor_rfq.htm

#7

"Karl" <kthompson (AT) nospam (DOT) pine-grove.com> wrote in message

Quote:

On Macromedia's site there is this CSS tutorial:
http://www.macromedia.com/devnet/mx/...2004_cssp.html

In the main content area of the page being used in this tutorial there is
a form. The form itself is laid out using table. Why do it this way in a
tutorial explaining CSS layout?

Because there's nothing wrong with using a table to lay out a form, when
necessary.

--
Irvin
-------------------------
http://www.pixel69.com

#8

Oh, heck. I'll just specify the text size in pixels, then....

<ducking and running>

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

Quote:

We'll agree to disagree.

That page doesnt take much text enlargement before it breaks down. It
would be difficult for the end user to see which category belongs to which
text field. Why complicate the issue when a table will do it easier and
quicker, plus keep elements from breaking.

Murray *TMM* wrote:

I disagree. Forms are quite simple to layout using CSS.

See, for example, this page -

http://www.practicalcomponents.com/n.../amkor_rfq.htm

#9

As already pointed out, there is no hard and fast rule. Nothing wrong at
all with using a table to layout a form.
I have a styled form here that uses a 2 column table:
http://www.dreamweaverresources.com/...tyled_form.htm

--
Nadia
--------------------------------------------
Templates | http://www.DreamweaverResources.com
Dropdown Menu Designs | SEO Articles |Tutorials
CSS Templates | http://www.dreamweaverresources.com/CSS-templates
---------------------------------------------
Team MM Volunteer for Dreamweaver
www.macromedia.com/go/team
MM Dreamweaver Tutorials
http://macromedia.com/devnet/mx/dreamweaver/
---------------------------------------------
Skype ID: nadiaperre
---------------------------------------------

"Karl" <kthompson (AT) nospam (DOT) pine-grove.com> wrote

Quote:

I'm seeking comments/opinions here. And if you think that it's not a
problem using CSS, I could use some pointers or an example.

#10

Slightly longer than a moment, however.... 8)

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"irvin" <noone (AT) none (DOT) com> wrote

Quote:

That was just a moment of weakness.