My XHTML Tables and Forms Are Suck

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
supermike
Forum Contributor
Posts: 193
Joined: Tue Feb 28, 2006 8:30 pm
Location: Somewhere in the Desert, USA

My XHTML Tables and Forms Are Suck

Post by supermike »

I'd love to see some CSS that styles tables (tabular data) and forms in a modern, Web 2.0 way. I'm needing to upgrade my themes. Anyone got any samples that they recommend?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: My XHTML Tables and Forms Are Suck

Post by JAB Creations »

supermike
Forum Contributor
Posts: 193
Joined: Tue Feb 28, 2006 8:30 pm
Location: Somewhere in the Desert, USA

Re: My XHTML Tables and Forms Are Suck

Post by supermike »

JAB Creations wrote:You may fancy my website then...
Sorry, but that didn't seem to work out. This is what it looks like on Ubuntu Linux with FF3:
middle.png
middle.png (82.84 KiB) Viewed 1511 times
And the footer looks like:
footer.png
footer.png (10.11 KiB) Viewed 1511 times
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: My XHTML Tables and Forms Are Suck

Post by JAB Creations »

You have referrers disabled.
supermike
Forum Contributor
Posts: 193
Joined: Tue Feb 28, 2006 8:30 pm
Location: Somewhere in the Desert, USA

Re: My XHTML Tables and Forms Are Suck

Post by supermike »

In FF3, here's my setting:

network.http.sendRefererHeader = 1
supermike
Forum Contributor
Posts: 193
Joined: Tue Feb 28, 2006 8:30 pm
Location: Somewhere in the Desert, USA

Re: My XHTML Tables and Forms Are Suck

Post by supermike »

On tables, so far I like the way columns are handled at the bottom of this page:

http://fluidmind.org/test/css/tables.html

And then I like this mediagroove theme too, although I would probably swap the orange with some other color:

http://icant.co.uk/csstablegallery/index.php?css=79#r79

So I like alternating rows and columns, and this use of a mild gradient at the top of each row.

I'm still looking for the best column headers, though.

As for forms, I like how people are putting subtle gradients at the top of them like the one above the word "Vintage":

http://www.arsgeek.com/2008/09/06/vinta ... tain-kirk/

which uses:

http://www.arsgeek.com/wp-content/theme ... -trans.png

Although I'm still looking for the best field styling.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: My XHTML Tables and Forms Are Suck

Post by JAB Creations »

Set it to 2 and reload the page.
supermike
Forum Contributor
Posts: 193
Joined: Tue Feb 28, 2006 8:30 pm
Location: Somewhere in the Desert, USA

Re: My XHTML Tables and Forms Are Suck

Post by supermike »

I've restyled my forms to something suitable. Let me know if you like it.
sampleform.png
sampleform.png (4.93 KiB) Viewed 1481 times
The HTML and CSS are attached to this message.

Note I didn't do any styling on the button except to add some padding and change the font. This is because all browsers besides IE6 and 7 now style default buttons rather nicely and blend them in with the desktop interface. But on IE8, we shall see if Microsoft gets with the program and follows suit.
Attachments
sampleform.tar.gz
(958 Bytes) Downloaded 92 times
supermike
Forum Contributor
Posts: 193
Joined: Tue Feb 28, 2006 8:30 pm
Location: Somewhere in the Desert, USA

Re: My XHTML Tables and Forms Are Suck

Post by supermike »

JAB Creations wrote:Set it to 2 and reload the page.
Okay, did that like you said.

Well, a little better, but still have text showing up on top of other text.

I also went to your default website and it's saying something to the effect that hotlinking is disabled and costing you bandwidth cash, and the text is jumbled up on top of other items.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: My XHTML Tables and Forms Are Suck

Post by JAB Creations »

Typically you'll have to reload the page because Gecko doesn't send the referrers in some circumstances.

Try a fresh profile for Firefox, it should do the trick. It kind of sounds like you have some over-zealous privacy extension, plugin, etc installed that is messing with your current profile.

I giving your labels styling, float, display as a block, a border, and some other things I do with mine. If you load my site with Safari I really like how it triggers each field's hover/focus pseudo-element when merely moving the mouse cursor over it's associated label. Remember to use the label's for attribute in conjunction with the id of the associated input field.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: My XHTML Tables and Forms Are Suck

Post by matthijs »

It's kind of difficult to have a single (or even a few) default form and table styling. How they should look should totally depend on the general design of the site and page, the context in which the table/form is used, it's purpose, etc.

With tables, it will depend on it's data how you style it. Is the table showing horizontal data rows, vertical data rows, are some data more important, what is the purpose of the table, etc etc

The same with forms. Who is going to use the form? In which context? How often? What is the purpose of the form?
Post Reply