RE: Re[2]: [WSG] Table-style admin layouts
Title: RE: Re[2]: [WSG] Table-style admin layouts
I see what you are getting at.
I don't see the problem with laying out a form as a table but I would give the table at least an id attribute of, for example "formtable".
The alternative is to set the form up in a of its own and then use elements to align the label with the input.
Name:
Password:
CSS:
form#inputform
{
display: block;
border: 1px solid #064;
padding: 10px;
font-family: sans-serif;
font-size: 10pt;
background-color: #ddd;
width: 500px;
}
form#inputform span.label
{
text-align: right;
padding: 5px;
width: 100px;
}
form#inputform span.input
{
text-align: left;
padding: 5px;
width: 250px;
}
input
{
border: 1px solid #064;
width: 200px;
}
Just one approach, but the one I prefer.
Peter Goddard
Web Developer/IT
PSI Global Ltd
-Original Message-
From: Tony Crockford [mailto:[EMAIL PROTECTED]]
Sent: 05 October 2004 10:00
To: [EMAIL PROTECTED]
Subject: Re: Re[2]: [WSG] Table-style admin layouts
At 09:47 on Tuesday, 05 Oct 2004, Peter Goddard wrote:
> Just because the table contains links to an edit page doesn't need for
> it to
> be defined in a form. Surely the solution is to present the information
> in a
> table and then style the 'edit' links with css, taking advantage of the
> querystring.
Sure, that makes sense.
so we're saying it's okay to have a table with buttons in it, but we
shouldn't have a form laid out as a table semantically speaking.
I'm not trolling, just looking for best practice guidance.
A list of items with edit delete buttons is okay as a table, but the edit
page should be a form laid out without tables?
;o)
--
listening to: R. Carlos Nakai - Shaman's Call [stopped]
http://wiki.workalone.co.uk
http://www.xebit.net
**
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: Re[2]: [WSG] Table-style admin layouts
At 09:47 on Tuesday, 05 Oct 2004, Peter Goddard wrote: Just because the table contains links to an edit page doesn't need for it to be defined in a form. Surely the solution is to present the information in a table and then style the 'edit' links with css, taking advantage of the querystring. Sure, that makes sense. so we're saying it's okay to have a table with buttons in it, but we shouldn't have a form laid out as a table semantically speaking. I'm not trolling, just looking for best practice guidance. A list of items with edit delete buttons is okay as a table, but the edit page should be a form laid out without tables? ;o) -- listening to: R. Carlos Nakai - Shaman's Call [stopped] http://wiki.workalone.co.uk http://www.xebit.net ** 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: Re[2]: [WSG] Table-style admin layouts
Title: RE: Re[2]: [WSG] Table-style admin layouts
Just because the table contains links to an edit page doesn't need for it to be defined in a form. Surely the solution is to present the information in a table and then style the 'edit' links with css, taking advantage of the querystring.
Eg:Edit
where 'xxx' is the server side file extension and 'nn' is the identifier for the item to be edited.
Then css can be applied by assigning an 'id' to the table itself.
A Contextual selector in action.
CSS:
Table#edit_table a
{
display: block;
border: 2px outset #064;
background-color: #042;
font-weight: bold;
color: #ddd;
text-decoration: none;
/* Optional width attribute */
width: 60px;
}
/* Now Pseudo classes can be used to define the Links behaviour if required... */
table#edit_table a:hover
{
background-color: #546;
color: #fff;
}
If styled this way, any table with the id of edit_table in the site will have links styled as buttons with rollover effects.
As you can see, the edit buttons don't need to be in an HTML form.
Styling forms is a whole other issue... the thread on that will be very interesting ... anyone care to kick things off
How about a little ...style a login form 'competition'
Two fields and a button. It will be fun to see how everyone approaches it.
Eg...
Name:
Password:
Peter Goddard
Web Developer/IT
PSI Global Ltd
-Original Message-
From: Ryan Sabir [mailto:[EMAIL PROTECTED]]
Sent: 05 October 2004 08:05
To: [EMAIL PROTECTED]
Subject: Re[2]: [WSG] Table-style admin layouts
RF> I vote for "it's tabular data - use a table".
Cool, thought so...
I was thinking that because it was more a navigation device to edit
items, rather than a display of tabular information, it would be
better implemented a different way.
at the end of the day its just a table I guess.
thanks! You'll be hearing from me again...
---
Ryan Sabir
Newgency Pty Ltd
2a Broughton St
Paddington 2021
Sydney, Australia
Ph (02) 9331 2133
Fax (02) 9331 5199
Mobile: 0411 512 454
http://www.newgency.com/index.cfm?referer=rysig
**
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: Re[2]: [WSG] Table-style admin layouts
At 12:26 AM 10/5/2004, Rick Faaberg wrote: But if those data are coming from a database and are being output via a script language for example, I think a table is the most convenient way to present the data and the buttons. It boggles my small intellect to think about outputting CSS positioning and stuff from PHP or whatever, although somebody's working on that I'm sure! Of course, the beauty of separated CSS & HTML files is that the PHP or ASP server-side script can pump out pure HTML without any regard for how it's supposed to look. The content can be dynamic while the stylesheets remain static. Paul ** 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: Re[2]: [WSG] Table-style admin layouts
On 10/5/04 12:05 AM "Ryan Sabir" <[EMAIL PROTECTED]> sent this out: > RF> I vote for "it's tabular data - use a table". > > Cool, thought so... > > I was thinking that because it was more a navigation device to edit > items, rather than a display of tabular information, it would be > better implemented a different way. You do have a point though that the buttons are kind of the main act. But if those data are coming from a database and are being output via a script language for example, I think a table is the most convenient way to present the data and the buttons. It boggles my small intellect to think about outputting CSS positioning and stuff from PHP or whatever, although somebody's working on that I'm sure! :-) Rick Faaberg ** 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[2]: [WSG] Table-style admin layouts
RF> I vote for "it's tabular data - use a table". Cool, thought so... I was thinking that because it was more a navigation device to edit items, rather than a display of tabular information, it would be better implemented a different way. at the end of the day its just a table I guess. thanks! You'll be hearing from me again... --- Ryan Sabir Newgency Pty Ltd 2a Broughton St Paddington 2021 Sydney, Australia Ph (02) 9331 2133 Fax (02) 9331 5199 Mobile: 0411 512 454 http://www.newgency.com/index.cfm?referer=rysig ** 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] Table-style admin layouts
I think we have to consider the accessibility of the information being presented. If someone using a screen reader wanted to order a (very expensive) banana they would probably want to be able to link the table headers so that they got the correct price/fruit (id and header attributes). lisa -Original Message- From: Tony Crockford [mailto:[EMAIL PROTECTED] Sent: Tuesday, October 05, 2004 4:58 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] Table-style admin layouts At 07:48 on Tuesday, 05 Oct 2004, Peter Ottery wrote: >>> Is there a best-practice way to build an item >>> display with multiple columns, but without using tables? > >>> Name Price Quantity EditDelete >>> Apple $5.0025 [edit] [delete] >>> Pear $4.00 3 [edit] [delete] >>> Banana $12.00 5 [edit] [delete] > > > 1 vote for "thats table data - use a table" A small concern here... The subject line and the presence of edit and delete columns suggest that this is in fact an interactive form, not a display of tabular data. shouldn't we be pointing to all the good stuff on form styling and layout? (eg http://www.aplus.co.yu/dots/109/) or are we saying that forms with tabular data (and edit/delete buttons) can be in tables? ;o) -- listening to: background noise http://wiki.workalone.co.uk http://www.xebit.net ** 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] Table-style admin layouts
At 07:48 on Tuesday, 05 Oct 2004, Peter Ottery wrote: Is there a best-practice way to build an item display with multiple columns, but without using tables? Name Price Quantity EditDelete Apple $5.0025 [edit] [delete] Pear $4.00 3 [edit] [delete] Banana $12.00 5 [edit] [delete] 1 vote for "thats table data - use a table" A small concern here... The subject line and the presence of edit and delete columns suggest that this is in fact an interactive form, not a display of tabular data. shouldn't we be pointing to all the good stuff on form styling and layout? (eg http://www.aplus.co.yu/dots/109/) or are we saying that forms with tabular data (and edit/delete buttons) can be in tables? ;o) -- listening to: background noise http://wiki.workalone.co.uk http://www.xebit.net ** 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] Table-style admin layouts
At 11:22 PM 10/4/2004, Ryan Sabir wrote: Is there a best-practice way to build an item display with multiple columns, but without using tables? What I want to do is build something like this: Name Price Quantity EditDelete Apple $5.0025 [edit] [delete] Pear $4.00 3 [edit] [delete] Banana $12.00 5 [edit] [delete] But without cluttering the HTML with table layout data... Yes, use a table, but no, don't clutter your html with layout attributes. Move all the rules for how things should look to a separate CSS file, leaving your html clean & sleek. The most clutter you'll need to deal with are class names in your TD tags to deal with the variety of data formats you're presenting: Apple $5.00 25 This way you can make decisions about how each cell is formatted & aligned separately from your decisions about which data appear there. Cheers, Paul ** 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] Table-style admin layouts
>> Is there a best-practice way to build an item >> display with multiple columns, but without using tables? >> Name Price Quantity Edit Delete>> Apple $5.00 25 [edit] [delete]>> Pear $4.00 3 [edit] [delete]>> Banana $12.00 5 [edit] [delete]1 vote for "thats table data - use a table"and your bananas are very expensive.:) pete
Re: [WSG] Table-style admin layouts
On 10/4/04 11:22 PM "Ryan Sabir" <[EMAIL PROTECTED]> sent this out: > Name Price Quantity EditDelete > Apple $5.0025 [edit] [delete] > Pear $4.00 3 [edit] [delete] > Banana $12.00 5 [edit] [delete] > > But without cluttering the HTML with table layout data... > > Or is this a case where its better to bite the bullet and just do it > in a table...? I vote for "it's tabular data - use a table". Rick Faaberg ** 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] Table-style admin layouts
Ryan, this is tabular data, just what tables are built for. Go for it! Grant -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Ryan Sabir Sent: Tuesday, 5 October 2004 4:23 PM To: [EMAIL PROTECTED] Subject: [WSG] Table-style admin layouts Hi all, Is there a best-practice way to build an item display with multiple columns, but without using tables? What I want to do is build something like this: Name Price Quantity EditDelete Apple $5.0025 [edit] [delete] Pear $4.00 3 [edit] [delete] Banana $12.00 5 [edit] [delete] But without cluttering the HTML with table layout data... Or is this a case where its better to bite the bullet and just do it in a table...? I'm new here to please be gentle if this is a dumb question :) thanks, bye! --- Ryan Sabir Newgency Pty Ltd 2a Broughton St Paddington 2021 Sydney, Australia Ph (02) 9331 2133 Fax (02) 9331 5199 Mobile: 0411 512 454 http://www.newgency.com/index.cfm?referer=rysig ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** This message is intended for the addressee named and may contain privileged information or confidential information or both. If you are not the intended recipient please delete it and notify the sender. ** ** 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] Table-style admin layouts
Hi Ryan, This isn't a dumb question, and is one that people often get confused about when moving towards web standards. While the correct way of presenting data like this in tables, it's more important to do it correctly. That means using the right (symantically correct) tags. Anyway, in a nut shell, make sure this type of information is presented in a table and use the element for all cells that should be read as headings. If you don't like the bold centred look you can re-style it with css. Following that, learn how to use the 'summary', 'header' and 'id' attributes - They're essential to providing equal access to all users to the data in your tables. In this situation (tablular data) is actually more appropriate than h1 - h6 as it provides a better reference/relevance to the data contained in the table. There are other elements such as caption, thead, tbody. But at least, make sure you've mastered the above. There have been some good presentations by Mark Stanton on this topic recently, one at web essentials and the other at the last WSG meeting (see you should have been there!). hope that helps, lisa -Original Message- From: Ryan Sabir [mailto:[EMAIL PROTECTED] Sent: Tuesday, October 05, 2004 4:23 PM To: [EMAIL PROTECTED] Subject: [WSG] Table-style admin layouts Hi all, Is there a best-practice way to build an item display with multiple columns, but without using tables? What I want to do is build something like this: Name Price Quantity EditDelete Apple $5.0025 [edit] [delete] Pear $4.00 3 [edit] [delete] Banana $12.00 5 [edit] [delete] But without cluttering the HTML with table layout data... Or is this a case where its better to bite the bullet and just do it in a table...? I'm new here to please be gentle if this is a dumb question :) thanks, bye! --- Ryan Sabir Newgency Pty Ltd 2a Broughton St Paddington 2021 Sydney, Australia Ph (02) 9331 2133 Fax (02) 9331 5199 Mobile: 0411 512 454 http://www.newgency.com/index.cfm?referer=rysig ** 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] Table-style admin layouts
It's tabular data, so you should use a table. It displays reliably, it's semantically correct and if implemented correctly it's usable for screen readers. It's best to use all of the semantic table elements (th, tbody, thead, summary, caption) if you can. Jake Quoting Ryan Sabir <[EMAIL PROTECTED]>: > Hi all, > > Is there a best-practice way to build an item display with multiple > columns, but without using tables? > > What I want to do is build something like this: > > Name Price Quantity EditDelete > Apple $5.0025 [edit] [delete] > Pear $4.00 3 [edit] [delete] > Banana $12.00 5 [edit] [delete] > > But without cluttering the HTML with table layout data... > > Or is this a case where its better to bite the bullet and just do it > in a table...? > > I'm new here to please be gentle if this is a dumb question :) > > thanks, bye! > > --- > Ryan Sabir > Newgency Pty Ltd > 2a Broughton St > Paddington 2021 > Sydney, Australia > Ph (02) 9331 2133 > Fax (02) 9331 5199 > Mobile: 0411 512 454 > http://www.newgency.com/index.cfm?referer=rysig > > ** > 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] Table-style admin layouts
Theres no such thing as a dumb question! Heres a tip, semantic code means using tags for the purpose they are meant to be used for eg: to for headings, for unordered lists and in your case for tabular data: Neerav Bhatt http://www.bhatt.id.au Web Development & IT consultancy Mobile: +61 (0)403 8000 27 http://www.bhatt.id.au/blog/ - Ramblings Thoughts http://www.bookcrossing.com/mybookshelf/neerav Ryan Sabir wrote: Hi all, Is there a best-practice way to build an item display with multiple columns, but without using tables? What I want to do is build something like this: Name Price Quantity EditDelete Apple $5.0025 [edit] [delete] Pear $4.00 3 [edit] [delete] Banana $12.00 5 [edit] [delete] But without cluttering the HTML with table layout data... Or is this a case where its better to bite the bullet and just do it in a table...? I'm new here to please be gentle if this is a dumb question :) thanks, bye! --- Ryan Sabir Newgency Pty Ltd 2a Broughton St Paddington 2021 Sydney, Australia Ph (02) 9331 2133 Fax (02) 9331 5199 Mobile: 0411 512 454 http://www.newgency.com/index.cfm?referer=rysig ** 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 **
[WSG] Table-style admin layouts
Hi all, Is there a best-practice way to build an item display with multiple columns, but without using tables? What I want to do is build something like this: Name Price Quantity EditDelete Apple $5.0025 [edit] [delete] Pear $4.00 3 [edit] [delete] Banana $12.00 5 [edit] [delete] But without cluttering the HTML with table layout data... Or is this a case where its better to bite the bullet and just do it in a table...? I'm new here to please be gentle if this is a dumb question :) thanks, bye! --- Ryan Sabir Newgency Pty Ltd 2a Broughton St Paddington 2021 Sydney, Australia Ph (02) 9331 2133 Fax (02) 9331 5199 Mobile: 0411 512 454 http://www.newgency.com/index.cfm?referer=rysig ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
