Is this a time to use a table over CSS?

[MikeTheVike]

The site I'm working on is laid out using css, and now I'm adding little details. there is a div that will contain a username and password login, plus another link under those for registering. So it will basically be text, image, image, text, text input box, image. Would using a table here be appropriate? If not, how would I set these items up with varying amoutns of space between each item. Thanks

[Crimson]

you got a sample?

[fiend]

I'm pretty sure you could do that with a bunch of nested divs and it would be slick, but it might be easier with a table. Tables are not evil, they still have their place. :)

[MikeTheVike]

you got a sample?

I attached a pic of what it looks like. There is a mix of text, small images, and a text input box. yesterday I created it using a table placed in the search bar div and it worked, but if there is a better way to do it...

[Crimson]

If it ain't broke - don't fix it. Sorry I asked for the sample in hopes that I could give you a brilliant answer but I am learning too. Glad you figure something out. In a sense, that is part of the creative problem solving of web design that makes it interesting. Sometime it hurts to bang your head on the monitor but it is thrilling when it works. Soooooo. Tables are evil?

[MikeTheVike]

If it ain't broke - don't fix it. Sorry I asked for the sample in hopes that I could give you a brilliant answer but I am learning too. Glad you figure something out. In a sense, that is part of the creative problem solving of web design that makes it interesting. Sometime it hurts to bang your head on the monitor but it is thrilling when it works. Soooooo. Tables are evil?

yea, I'm learning too, on a small e-commerce site no less. I just noticed that the table cells are different widths in Safari than in other browsers using the "width" tag in the <td> soooo, i guess I'll try some cell padding instead. Thanks!

[Drazan]

Many seek tables as the evil of layout because divs have more options of control and flexability in a website. There are people out there who believe using a table of any kind means that you are behind the times and a hack.

The theory is that tables are for data only and that divs are all for style. I remember when divs first hit the trend and you were supposed to make a table for the container and have the divs float around the container. Now the div with the container class controls the sub divs.

I use both as needed. Typically I use tables because it's what I've used since starting web design. Some say it is lazy to not advance, but it is functional - it not going to depreciate any time soon. I have used all div sites before and actually rewrote a major layout component for G1 (http://gallery.sf.net ) because of the layout restrictions and demand from users to move to div.

Tables can get unweildly unless you structure your site in pure box form. It forces you to plan in boxes.

Divs have more control on where and how you want to place your information. You can also overlap and layer divs wereas you can't do that with tables. There's also many more manipulations you can do between div, css, and php (ajax) to display the information.

I'm starting another website for a client that will probably be 90% divs using Ajax for navigation technique. Depending on how I feel about the SEO values of using an Ajax driven site vs using static pages. Ajax still as a way to go before it is SEO friendly.

The other 10% is from a prebuilt e-commerce system using tables.

[EC]

If I were coding that mike, I'd use CSS.

Semantically it would not be correct to use a table because it's not tabular data.

As for layout, a table wouldn't be easier really - you just need a div and to stick all the elements inside of it, much less code actually. In the CSS just give the div a width and height and everything should fall in line just fine. The html would be as simple as:


<div id="search">
Text Size
<img src="plus.gif" /><img src="minus.gif" /><img src="search.gif" /> Search <input type="text" name="textfield"><img src="go.gif" />
</div>

[MikeTheVike]

If I were coding that mike, I'd use CSS.

Semantically it would not be correct to use a table because it's not tabular data.

As for layout, a table wouldn't be easier really - you just need a div and to stick all the elements inside of it, much less code actually. In the CSS just give the div a width and height and everything should fall in line just fine. The html would be as simple as:


<div id="search">
Text Size
<img src="plus.gif" /><img src="minus.gif" /><img src="search.gif" /> Search <input type="text" name="textfield"><img src="go.gif" />
</div>


Thanks EC, how would I put larger spaces in between certain items, like in between the text size buttons and the search icon? I actually switched over to using divs, but I put every element into a seperate div, which is just about as much code as using a table. Plus I need to vertically center everything...

[MikeTheVike]

One more question since I can't find this answer anywhere on the net...

Is there a way to change the height of the input text box? I used "line-height" and it worked in Firefox and Safari, but not in IE. Any ideas? "width" wouldn't work either.

[EC]

So you would do this:

.search {
padding-left: 20px;
}

<img src="search.gif" class="search" />

You can do vertical align on the main div: http://www.w3schools.com/css/pr_pos_vertical-align.asp

[EC]

One more question since I can't find this answer anywhere on the net...

Is there a way to change the height of the input text box? I used "line-height" and it worked in Firefox and Safari, but not in IE. Any ideas? "width" wouldn't work either.

for width, you do that by characters (i.e. space for 50 characters) i.e.

<input name="textfield" type="text" size="50">

Height I don't know that you can do that with this type of input field. Text area you can though (well, you can assign number of rows). Good question, I gracefully admit ignorance. :p

[MikeTheVike]

So you would do this:

.search {
padding-left: 20px;
}

<img src="search.gif" class="search" />

You can do vertical align on the main div: http://www.w3schools.com/css/pr_pos_vertical-align.asp

ok, I see, just add a class to the image, then padding. Easy enough!

When I change the size="blahblah" in the <input>, it works in Firefox and IE, but not Safari :( this is so frustrating

[Crimson]

Many seek tables as the evil of layout because divs have more options of control and flexability in a website. There are people out there who believe using a table of any kind means that you are behind the times and a hack.

The theory is that tables are for data only and that divs are all for style. I remember when divs first hit the trend and you were supposed to make a table for the container and have the divs float around the container. Now the div with the container class controls the sub divs.

I use both as needed. Typically I use tables because it's what I've used since starting web design. Some say it is lazy to not advance, but it is functional - it not going to depreciate any time soon. I have used all div sites before and actually rewrote a major layout component for G1 (http://gallery.sf.net ) because of the layout restrictions and demand from users to move to div.

Tables can get unweildly unless you structure your site in pure box form. It forces you to plan in boxes.

Divs have more control on where and how you want to place your information. You can also overlap and layer divs wereas you can't do that with tables. There's also many more manipulations you can do between div, css, and php (ajax) to display the information.

I'm starting another website for a client that will probably be 90% divs using Ajax for navigation technique. Depending on how I feel about the SEO values of using an Ajax driven site vs using static pages. Ajax still as a way to go before it is SEO friendly.

The other 10% is from a prebuilt e-commerce system using tables.

I understood most of that and found it very insitefull. Thx

[CurtisS]

I use tables for well...uh... tables... like this (the specifications list in the middle of the page)...
http://www.huntron.com/products/trackerpxi.htm#specs

[MikeTheVike]

Ok, the web site is going great! I've come to a point where I have to work on the registration form. I can do this using divs or a table. Which one is "correct". Sitepoint has a good article on setting up a form, and it uses a table...Thanks!

[CurtisS]

They both will work. Go with the one you are more comfortable with.

[EC]

well, just because something works doesn't make it "correct" ... there's probably an argument that can be made for both though. I wouldn't think it's correct to use a table if you're concerned about semantic markup.

Chris and I got into a discussion about this recently -- whether or not it would be "correct" to use a table for a form. To be honest, I don't know. I'd say try to do it with divs and then if it's a pain in the arse, go with a table. lol

[Benjamin]

No need for a table. But I would certainly use 2 distinct DIVs. The text resizer and the search bar are 2 distinct functions, so you wouldn't really want them as 1 long line of inline elements. Then one way to position the DIVs is just to float them both.