...

View Full Version : Is this semantically correct usage of a table?



r0ck1t
12-28-2003, 10:24 AM
Just wondering, as I have no idea, although from what I understand it is really a personal opinion. :confused:



<form name="nAdd" action="url" method="post">
<table>
<tr>
<td><label for="nTitle">News Title : </label></td>
<td><input name="nTitle" id="nTitle" type="text" /></td>
</tr>
<tr>
<td><label for="nArticle">News Article : </label></td>
<td><textarea name="nArticle" id="nArticle" cols="25" rows="10"></textarea></td>
</tr>
<tr>
<td><input name="nSubmit" id="nSumbit" value="Add Item" /></td>
<td>&nbsp;</td>
</tr>
</table>
</form>


TIA!

IBM
12-28-2003, 01:18 PM
well, it really depends on how standards compliant you want to be.

If you want to code in xhtml then no, it isn't correct usage.
Tables should be used to display data, not used for layouts.
Think spread sheets.

Now, if you want to code in HTML, then it's fine.
XHTML is the new standard, as opposed to HTML.

me'
12-28-2003, 06:46 PM
Originally posted by IBM
If you want to code in xhtml then no, it isn't correct usage.
Tables should be used to display data, not used for layouts.
Think spread sheets. Semantics has nothing to do with how standards compliant your code is.
There's no semantic difference between xhtml and html.
Some people (Skyzyx?) argue that laying out forms is a good semantic use of tables, and I sit on the fence. If you find it easier with tables, fine, but if you fancy your chances with CSS, go for it. I generally go for the latter.

brothercake
12-28-2003, 11:44 PM
Laying out forms is not an appropriate use of tables - a form element is not a cell of data, it's a form element. Forms may often be visually similar to tabular data in their layout, but nonetheless they're not tabular data.

So no, it isn't.

I've found the easiest way to lay out forms is to float the <label>

angiras
12-29-2003, 09:35 AM
here's (I think) what says Brothercake .. I use it too


<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Form + Label</title>
<style type="text/css" media="screen">
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;

}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br
{
clear: left;
}
</style>

</head>
<body>
<form id="MainForm">
<label for="name">Name</label>
<input id="name" /><br />

<label for="address">Address</label>
<input id="address" /><br />

<label for="city">City</label>
<input id="city" /><br />
</form>
</body>
</html>

angiras
12-29-2003, 09:38 AM
if anyone knows a way to avoid <br /> tag ??

r0ck1t
12-29-2003, 10:22 AM
<p></p>

That's what I used to separate them. And I did what brothercake suggested.

me'
12-29-2003, 10:50 AM
You don't have to use <p> or <br/> at all. If you want to be semantic and need a tag, consider <fieldset>. I don't use it at all. Here's some sample code I used when laying out the form in my CMS:

form { padding: 10px }
form * {
display: block;
float: left;
margin-bottom: .7em;}
form label {
clear: left;
margin-right: 1em;
border: 0;}XHTML:
<form method="POST" action="cms-calls.php">

<label for="title">Title:</label>
<input type="text" name="title" size="30" tabindex="1"/>

<label for="post">Post:</label>
<textarea name="post" rows="10" cols="50" tabindex="2"></textarea>

<input type="submit" value="Submit"/>
</form>

angiras
12-29-2003, 11:22 AM
when you are using Microsoft Net language you cannot do so , as far as you can have only one form tag per page

I use fieldset or div

but of course to have the render in the easiest way the best is to use table ....

Skyzyx
12-29-2003, 04:58 PM
For the first time ever (I believe), I'm going to have to outright disagree with Brothercake. ;)

I'm all-for using CSS for layouts. Anyone who's shared a thread with me should know this. If you choose to go about displaying forms using only CSS, fantastic! I'm all for it! Wonderful, you're well on your way!

With that being said, I still stand by the opinion that forms are still tabular data. If you think of it like a spreadsheet (which is basically what tables are), you have two sets (columns) of fields. The first is the type of data being requested, while the other is the data to be entered. This seems like a very logical, semantic way of displaying forms. It has the side-benefit of laying them out in an aesthetically pleasing manner.

I must admit that I haven't looked into <fieldset> or <label> yet, so maybe the advent of these tags may hold improved semantics for form elements (I'm sure they do), but I still believe that although not as good as using these two tags, form elements (in a simple, logical, column-to-column manner) are still valid tabular data. :thumbsup:

r0ck1t
12-30-2003, 03:09 AM
Originally posted by Skyzyx
The first is the type of data being requested, while the other is the data to be entered.

That is how I thought of it, but I also know I am lazy and that I make up reasons to not have to figure out a better/ the proper way of doing something.

missing-score
12-30-2003, 03:58 AM
i have to agree with brothercake, I dont think that forms represent tabular data and therefore shouldnt be laid out using tables.

Skyzyx
12-30-2003, 04:07 AM
Well then I guess that our two camps are just going to have to agree to disagree. :)

brothercake
12-30-2003, 04:17 AM
A spreadsheet is not a form - it may have architectural similarities (eg, the ability to type into its elements) - but it is not a form, it's a table, like a database.

Tabular data has a 2-dimensional structure; the structure is semantic because it's part of the way the data is comprehended - tabular data is in rows and columns.

Forms do not have a 2-dimensional structure, they are linear - labelA/elementA, labelB/elementB, and so on - any 2d structure you impose on them is visual, not semantic.


Originally posted by Skyzyx
For the first time ever (I believe), I'm going to have to outright disagree with Brothercake. ;)

I know it seems as though we have each other over the same barrel; but it just seems that way :p

missing-score
12-30-2003, 04:21 AM
Originally posted by Skyzyx
Well then I guess that our two camps are just going to have to agree to disagree. :)

its better than everyone having the same views. Else how would we ever progress in technology.

In reply to brothercakes post, that really explained it well. Its made it make much more sense to me now. Thanks.

r0ck1t
12-30-2003, 04:47 AM
In any case, I have gone for the <fieldset> & <label> option. I tried it, it works good, and I am too lazy to change it back. :D

Also, I looked at w3schools.com for the background on the <fieldset> tag, and they wrap the whole form in <fieldset> e.g.

<fieldset>
<form>
<input>
</form>
</fieldset>

I have used it like this:

<form>
<fieldset><label><input></fieldset>
</form>

Is the way I am using it correct usage?

realisis
12-30-2003, 04:52 AM
Just to throw a wrench into things: if you wanted to, you could instead interpret the form as being really a series of name/value pairs - in other words: a series of hashes... And what better way to semantically represent hashes than... uh... erm... a definition list!

Of course this may raise its own layout issues, but what the heck.

Kind of analogous to insisting the links in a linkbar must be represented as a list, semantically speaking, no?

Except for the possibility that embedding form elements within a <dt> or <dd> may not be valid markup... (anyone?)


<form><dl>
<dt><label for="nom">your name:</label></dt>
<dd><input id="nom" type="text"></dd>

<dt><label for="addy">your address:</label></dt>
<dd><input id="addy" type="text"></dd>

<dt><label for="shoe">your shoe-size:</label></dt>
<dd><input id="shoe" type="text"></dd>
</dl></form>

angiras
12-30-2003, 06:31 AM
yes with float:left; for the label ...... all seems more logical, but the most practicle from far to get a good render is table

me'
12-30-2003, 01:52 PM
Forms do not have a 2-dimensional structure, they are linear - labelA/elementA, labelB/elementB, and so on - any 2d structure you impose on them is visual, not semantic.Forms can be arranged as 2D tables, for example:
+-------+---------+
| label | element |
+-------+---------+
| 1 | A |
+-------+---------+
| 2 | B |
+-------+---------+Starting to look like a table now?

missing-score
12-30-2003, 03:01 PM
but surely then anything can become a table?



-------------------
| Paragraph | text |
-------------------
| 1 | text |
-------------------
| 2 | text |
-------------------


so is it ok to use tables to layout paragraphs?

brothercake
12-30-2003, 03:37 PM
Exactly - just because something can look like tabular data, doesn't mean that it is.

Definition lists are possibly appropriate, yes, but I think it's a moot point because forms already have structural semantic elements - fieldsets and label. To use DT and DD would be duplicating the semantics, but I don't think it would be wrong per se, just extraneous.

r0ck1t - yes that is a correct useage of fieldset. Use a fieldset to group a number of related elements - such as "name", "address" and "zip" in a postal address - or if it's only a small form wrap all the element in a single fieldset.

r0ck1t
12-31-2003, 01:31 AM
Thanks for the help guys.

My question has been answered but feel free to continue the discussion.

ReadMe.txt
01-01-2004, 02:33 PM
just to throw a spanner in the works, there's actually another usage of the label element with inputs. The label minimal content model is defined as (PCDATA | Inline - label)* and the XHTML1.1 forms module defines

Formctrl
input | select | textarea | label | button

As an inline content set, therefore form elements can be placed inside their label.

this eliminates the need for the for attribute but still provides the same semantics.

ie:


<form id="login" action="login.htm">
<label>Username: <input type="text" size="20" name="user" /></label>
<label>Password: <input type="password" size="20" name="pass" /></label>
</form>


so how to style this?



form#login label {
width: 200px;
}
form#login label input {
float: right;
}


and everything should line up nicely, unless i'm missing something?

jkd
01-01-2004, 09:35 PM
That's my preferred way to use <label>, however I think it is W3C's WAI guidelines that state you need to use id and for attributes... which kind of makes that ability moot. Due to legacy browsers or something... unfortunate too. I really like just doing it that way.

brothercake
01-01-2004, 09:52 PM
Why is that unfortunate? You can put the element inside the label, and still do for/id binding as well..

jkd
01-01-2004, 11:35 PM
Originally posted by brothercake
Why is that unfortunate? You can put the element inside the label, and still do for/id binding as well..

Eh. I hate extraneous markup. It being a child of <label> makes the relationship 100% clear already. id/for is just extraneous... which I've already established I hate.

brothercake
01-01-2004, 11:53 PM
Aye, you've certainly made that clear :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum