RE: [WSG]Tables or DIVs / Spans?
Thanks James, Yeah, I get that. It's just that in the example file it shows the legend taking the place of the label - do you reckon that is still correct, or should their be a label for each input/group of inputs even if the fieldset only has one question? I guess the question is 'does the legend tag perform the role of a label when the fieldset only has one input'? My feeling is that it doesn't. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of James Ellis Sent: Saturday, 3 April 2004 5:15 PM To: [EMAIL PROTECTED] Subject: Re: [WSG]Tables or DIVs / Spans? Hi James The legend tag is most useful for grouping fieldset sections of forms, the label tag describes only one input element. I've put this to use on sydney.ug.php.net HTH James James Gollan wrote: >Just looking through my archives for some info on forms and found this. >I am wondering about the use of the legend tag in the first example >(http://www.amonline.net.au/sand/using/survey.htm) to set out the >question. Would this be better suited/more semantically correct in the >label tag? I guess I am trying to figure out the exact role of the >legend tag and if it is describing the structure/grouping of the >questions rather than the questions themselves? > >Any comments? > >James > >-Original Message- >From: russ weakley [mailto:[EMAIL PROTECTED] >Sent: Thursday, 25 September 2003 2:01 AM >To: Web Standards Group >Subject: Re: [WSG]Tables or DIVs / Spans? > >Hi Beau, > >Where possible I'd try and go for non-tables, and use standard form >elements >and form-accessibility elements in conjunction with CSS to control the >visual layout of a form. This means that "fieldsets" could be used to >contain each question block, and "legends" as the form questions. The >hidden >ones would include "id" and "label for". > >Here is one example I did a while ago with all style controlled by >accessibility elements (it looks at little wide on a full page as it is >designed for a popup window - it is set to flow out to width of >containing >box): >http://www.amonline.net.au/sand/using/survey.htm > >Another even simpler (and older) example is where spans can be used to >position the elements so they can control the width of elements so they >line >up as if in a table (but without all the extra code): >http://www.hhmc.com.au/downloads/index.htm > >This second form example above uses 3 paragraphs, and the questions are >set >within spans set to specific widths - pushing them out to line up with >each >other down the page. If I were to do that form now I'd use labels or >standard form elements to do the job so no spans were required - >semantically more pure. > >Having said all that, I'm sure there are complex forms where it would be >harder to simple use standard accessibility elements or form elements as >the >basis for CSS controlled layout - divs or simple containing tables may >have >to be used. > >One quick comment about the first example above is that using >"fieldsets" >and "legends" forced me to lay out the form in a simpler, cleaner manor. >This made the table easier to use for normal vision users as well. The >visible containers (which are actually containers to help blind users) >helped to contain each question for those with vision as well. > >What do others think? >Russ > > > > > >>Hi all, >>along a simliar vein to this question, how's this one; >> >>If you are designing a form/survey, would you also go for a table? >> >> >It's not > > >>*really* tabular data, you are using the table for layout/perhaps >> >> >grouping > > >>of elements more than anything. >> >>I know we should be using things like fieldsets, tab order, labels and >> >> >all > > >>other wonderful form elements like that, but they are also compatible >> >> >with > > >>tables (except perhaps fieldsets to some extent...), but what's the >> >> >verdict > > >>about the overall layout? >> >>I know some forms are easily re-designed to avoid tables, but others >> >> >would > > >>really struggle without some sort of rigid, grid-based layouts. >> >>Where do we sit on this one? >> >>Personally, I think I'd go for a table-based design if the layout was >>particularly complex or I thought it required it, but I'd attempt to >>redesign the form (if that was an option) so that this wasn't >> >>
Re: [WSG]Tables or DIVs / Spans?
Hi James The legend tag is most useful for grouping fieldset sections of forms, the label tag describes only one input element. I've put this to use on sydney.ug.php.net HTH James James Gollan wrote: Just looking through my archives for some info on forms and found this. I am wondering about the use of the legend tag in the first example (http://www.amonline.net.au/sand/using/survey.htm) to set out the question. Would this be better suited/more semantically correct in the label tag? I guess I am trying to figure out the exact role of the legend tag and if it is describing the structure/grouping of the questions rather than the questions themselves? Any comments? James -Original Message- From: russ weakley [mailto:[EMAIL PROTECTED] Sent: Thursday, 25 September 2003 2:01 AM To: Web Standards Group Subject: Re: [WSG]Tables or DIVs / Spans? Hi Beau, Where possible I'd try and go for non-tables, and use standard form elements and form-accessibility elements in conjunction with CSS to control the visual layout of a form. This means that "fieldsets" could be used to contain each question block, and "legends" as the form questions. The hidden ones would include "id" and "label for". Here is one example I did a while ago with all style controlled by accessibility elements (it looks at little wide on a full page as it is designed for a popup window - it is set to flow out to width of containing box): http://www.amonline.net.au/sand/using/survey.htm Another even simpler (and older) example is where spans can be used to position the elements so they can control the width of elements so they line up as if in a table (but without all the extra code): http://www.hhmc.com.au/downloads/index.htm This second form example above uses 3 paragraphs, and the questions are set within spans set to specific widths - pushing them out to line up with each other down the page. If I were to do that form now I'd use labels or standard form elements to do the job so no spans were required - semantically more pure. Having said all that, I'm sure there are complex forms where it would be harder to simple use standard accessibility elements or form elements as the basis for CSS controlled layout - divs or simple containing tables may have to be used. One quick comment about the first example above is that using "fieldsets" and "legends" forced me to lay out the form in a simpler, cleaner manor. This made the table easier to use for normal vision users as well. The visible containers (which are actually containers to help blind users) helped to contain each question for those with vision as well. What do others think? Russ Hi all, along a simliar vein to this question, how's this one; If you are designing a form/survey, would you also go for a table? It's not *really* tabular data, you are using the table for layout/perhaps grouping of elements more than anything. I know we should be using things like fieldsets, tab order, labels and all other wonderful form elements like that, but they are also compatible with tables (except perhaps fieldsets to some extent...), but what's the verdict about the overall layout? I know some forms are easily re-designed to avoid tables, but others would really struggle without some sort of rigid, grid-based layouts. Where do we sit on this one? Personally, I think I'd go for a table-based design if the layout was particularly complex or I thought it required it, but I'd attempt to redesign the form (if that was an option) so that this wasn't necessary. Beau * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
RE: [WSG]Tables or DIVs / Spans?
Just looking through my archives for some info on forms and found this. I am wondering about the use of the legend tag in the first example (http://www.amonline.net.au/sand/using/survey.htm) to set out the question. Would this be better suited/more semantically correct in the label tag? I guess I am trying to figure out the exact role of the legend tag and if it is describing the structure/grouping of the questions rather than the questions themselves? Any comments? James -Original Message- From: russ weakley [mailto:[EMAIL PROTECTED] Sent: Thursday, 25 September 2003 2:01 AM To: Web Standards Group Subject: Re: [WSG]Tables or DIVs / Spans? Hi Beau, Where possible I'd try and go for non-tables, and use standard form elements and form-accessibility elements in conjunction with CSS to control the visual layout of a form. This means that "fieldsets" could be used to contain each question block, and "legends" as the form questions. The hidden ones would include "id" and "label for". Here is one example I did a while ago with all style controlled by accessibility elements (it looks at little wide on a full page as it is designed for a popup window - it is set to flow out to width of containing box): http://www.amonline.net.au/sand/using/survey.htm Another even simpler (and older) example is where spans can be used to position the elements so they can control the width of elements so they line up as if in a table (but without all the extra code): http://www.hhmc.com.au/downloads/index.htm This second form example above uses 3 paragraphs, and the questions are set within spans set to specific widths - pushing them out to line up with each other down the page. If I were to do that form now I'd use labels or standard form elements to do the job so no spans were required - semantically more pure. Having said all that, I'm sure there are complex forms where it would be harder to simple use standard accessibility elements or form elements as the basis for CSS controlled layout - divs or simple containing tables may have to be used. One quick comment about the first example above is that using "fieldsets" and "legends" forced me to lay out the form in a simpler, cleaner manor. This made the table easier to use for normal vision users as well. The visible containers (which are actually containers to help blind users) helped to contain each question for those with vision as well. What do others think? Russ > Hi all, > along a simliar vein to this question, how's this one; > > If you are designing a form/survey, would you also go for a table? It's not > *really* tabular data, you are using the table for layout/perhaps grouping > of elements more than anything. > > I know we should be using things like fieldsets, tab order, labels and all > other wonderful form elements like that, but they are also compatible with > tables (except perhaps fieldsets to some extent...), but what's the verdict > about the overall layout? > > I know some forms are easily re-designed to avoid tables, but others would > really struggle without some sort of rigid, grid-based layouts. > > Where do we sit on this one? > > Personally, I think I'd go for a table-based design if the layout was > particularly complex or I thought it required it, but I'd attempt to > redesign the form (if that was an option) so that this wasn't necessary. > > Beau * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
Re: [WSG]Tables or DIVs / Spans?
Hi
I recently moved a form from table layout to css/form control markup. Lot more
maintable than
farting around with colspans and rowspans etc etc.
Here's a code snippet
Mailbox
Mail Server
Email Password
CSS :
/** form input fields **/
LABEL
{
padding : 2px;
margin : 3px 1px 3px 1px;
border : none;
display : block;
width : 100px;
text-align : right;
float : left;
}
.formfield
{
text-align : left;
padding : 2px;
margin : 0px 1px 0px 1px;
width : 300px;
}
.textfield
{
border: 1px solid #999;
background-color: #ededed;
color : #333;
padding : 2px;
margin : 3px 4px 3px 0px;
width : 150px;
}
James Ellis
www.webqs.com
---
WSG - http://webstandardsgroup.org | Web Standards Group
syd::php - http://sydney.ug.php.net | Sydney PHP Developers
---
#300 - http://www.sitepoint.com/articlelist/300
---
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG]Tables or DIVs / Spans?
Hi Beau, Where possible I'd try and go for non-tables, and use standard form elements and form-accessibility elements in conjunction with CSS to control the visual layout of a form. This means that "fieldsets" could be used to contain each question block, and "legends" as the form questions. The hidden ones would include "id" and "label for". Here is one example I did a while ago with all style controlled by accessibility elements (it looks at little wide on a full page as it is designed for a popup window - it is set to flow out to width of containing box): http://www.amonline.net.au/sand/using/survey.htm Another even simpler (and older) example is where spans can be used to position the elements so they can control the width of elements so they line up as if in a table (but without all the extra code): http://www.hhmc.com.au/downloads/index.htm This second form example above uses 3 paragraphs, and the questions are set within spans set to specific widths - pushing them out to line up with each other down the page. If I were to do that form now I'd use labels or standard form elements to do the job so no spans were required - semantically more pure. Having said all that, I'm sure there are complex forms where it would be harder to simple use standard accessibility elements or form elements as the basis for CSS controlled layout - divs or simple containing tables may have to be used. One quick comment about the first example above is that using "fieldsets" and "legends" forced me to lay out the form in a simpler, cleaner manor. This made the table easier to use for normal vision users as well. The visible containers (which are actually containers to help blind users) helped to contain each question for those with vision as well. What do others think? Russ > Hi all, > along a simliar vein to this question, how's this one; > > If you are designing a form/survey, would you also go for a table? It's not > *really* tabular data, you are using the table for layout/perhaps grouping > of elements more than anything. > > I know we should be using things like fieldsets, tab order, labels and all > other wonderful form elements like that, but they are also compatible with > tables (except perhaps fieldsets to some extent...), but what's the verdict > about the overall layout? > > I know some forms are easily re-designed to avoid tables, but others would > really struggle without some sort of rigid, grid-based layouts. > > Where do we sit on this one? > > Personally, I think I'd go for a table-based design if the layout was > particularly complex or I thought it required it, but I'd attempt to > redesign the form (if that was an option) so that this wasn't necessary. > > Beau * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG]Tables or DIVs / Spans?
Hi all, along a simliar vein to this question, how's this one; If you are designing a form/survey, would you also go for a table? It's not *really* tabular data, you are using the table for layout/perhaps grouping of elements more than anything. I know we should be using things like fieldsets, tab order, labels and all other wonderful form elements like that, but they are also compatible with tables (except perhaps fieldsets to some extent...), but what's the verdict about the overall layout? I know some forms are easily re-designed to avoid tables, but others would really struggle without some sort of rigid, grid-based layouts. Where do we sit on this one? Personally, I think I'd go for a table-based design if the layout was particularly complex or I thought it required it, but I'd attempt to redesign the form (if that was an option) so that this wasn't necessary. Beau -- Beau Lebens Information Architect [EMAIL PROTECTED] Dented Reality - www.dentedreality.com.au Information Architecture, Usability, Web Development // -Original Message- // From: Adam Carmichael [mailto:[EMAIL PROTECTED] // Sent: Wednesday, 24 September 2003 9:01 AM // To: [EMAIL PROTECTED] // Subject: Re: [WSG]Tables or DIVs / Spans? // // // Thanks for your feedback :) // // I thought td with class was correct for tabular data - I just needed some // confirmation. // // James: I might do a chmod 100 on the php code. *grin*. then again i might // not - i'd need to change root passwords or obfuscate to actually // enforce it // as I don't have any of encode or compile utilites (but now i'm // getting off // topic). // // - Original Message - // From: // To: <[EMAIL PROTECTED]> // Sent: Wednesday, September 24, 2003 10:20 AM // Subject: Re: [WSG]Tables or DIVs / Spans? // // * // The discussion list for http://webstandardsgroup.org/ // * // // // * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG]Tables or DIVs / Spans?
Thanks for your feedback :) I thought td with class was correct for tabular data - I just needed some confirmation. James: I might do a chmod 100 on the php code. *grin*. then again i might not - i'd need to change root passwords or obfuscate to actually enforce it as I don't have any of encode or compile utilites (but now i'm getting off topic). - Original Message - From: To: <[EMAIL PROTECTED]> Sent: Wednesday, September 24, 2003 10:20 AM Subject: Re: [WSG]Tables or DIVs / Spans? * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG]Tables or DIVs / Spans? [Virus checkedAU]
This email is to be read subject to the disclaimer below. Hi Adam, I assume that the invoice looks something like: Item | quantity | price Blah | Blah | blah Total: In short it's tabular data, in which case it does belong in a table. Cheers, Vik -- Viktor Radnai Web Developer Business Innovation Online Ernst & Young Australia http://www.eyware.com/ http://www.eyonline.com/ Direct: +612 9248 4361 Fax: +612 9248 4073 Mobile: +61408 662 546 NOTICE - This communication contains information which is confidential and the copyright of Ernst & Young or a third party. If you are not the intended recipient of this communication please delete and destroy all copies and telephone Ernst & Young on 1800 655 717 immediately. If you are the intended recipient of this communication you should not copy, disclose or distribute this communication without the authority of Ernst & Young. Any views expressed in this Communication are those of the individual sender, except where the sender specifically states them to be the views of Ernst & Young. Except as required at law, Ernst & Young does not represent, warrant and/or guarantee that the integrity of this communication has been maintained nor that the communication is free of errors, virus, interception or interference. Liability limited by the Accountants Scheme, approved under the Professional Standards Act 1994 (NSW) * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG]Tables or DIVs / Spans?
Hi Adam Tables are fine for laying out grouped data - i.e an invoice, medal tally, price lists, webmail inbox listing etc etc. Divs and spans are the generic presentational (?sp) and positional (?sp) containers. If you are doing invoices I'd suggest using a table with the appropriate thead's etc - reason being that screen readers will interpret the invoice correctly. Roger Hudson's article in the WSG archive will have something on this I'm sure as it was part of his pres a few meetings ago. Now the question being is how to style the cell contents... Is it appropriate to put classes on td cells for presentation or should we use div, spans etc inside the td cell? Good links on tables include chapter 17 in the CSS2 rec, ch11 in the html4 rec. Also look for the white-space attr in CSS which (when in pre or nowrap) works much the same as the nowrap attr in html. The border-collapse : collapse; property is the css alernative to the ugly cellpadding and cellspacing = 0 malarkey. Yes, you can put the td cell in a foreach loop and generate valid html or xhtml... just don't put presentation elements in the html such as align etc. One thing with PHP that you shouldn't do is use the interpreter to parse static html...thats what the browser is for. i.e do this not this $job"; ?> The beauty of server side code is that no one sees it :D (apart from your boss but there are ways around that). Cheers James Ellis www.webqs.com --- WSG - http://webstandardsgroup.org | Web Standards Group syd::php - http://sydney.ug.php.net | Sydney PHP Developers --- #300 - http://www.sitepoint.com/articlelist/300 --- -- Original Message --- From: "Adam Carmichael" <[EMAIL PROTECTED]> To: <[EMAIL PROTECTED]> Sent: Wed, 24 Sep 2003 05:10:09 +1000 Subject: [WSG]Tables or DIVs / Spans? > Hi all! > > I converted my boss to using CSS (and he's even validating his own external > stylesheets now! w00t!), however when we started designing an invoicing > page, we ran into a small question of best practise (we can get fairly good > visual results either way we look at our problem). > > John built the entire page using span / div tags, the header, the banner the > footer all done with div tags, but also every single 'cell' in the 'table' > that makes up an invoice. Although I can repeat the invoice items in a > simple foreach() (loop in PHP) and make valid HTML, I'm not quite sure it's > best practice. I'm also not sure it's what the W3 intended. > > Is it more acceptable to use a table and repeat a bunch of table rows with > cell data (which is how I would have done it, and styled the content with > CSS) -- or -- is it better to create new span elements for each 'cell' in > the 'table'. > > It'll be a nice site (and my biggest project so far) to show off when it's > finished, but I can't post any URLs just yet. > > Thanks in advance, > > -- > Adam Carmichael - [EMAIL PROTECTED] --- End of Original Message --- * The discussion list for http://webstandardsgroup.org/ *
