I've always made my sites using all table and formating the style with CSS. Now i'm trying to design using <div>. It's not going very well. I understand how to positon <div>'s verticaly. However, I'm completely lost when it comes to horizontaly. I want to create the same effect as if I were using <td>. What would be the best way to do this? Ex. 4 or 5 columns.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-us"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> <style type="text/css"> #D1, #D2, #D3, #D4, #D5 { width: 20%; height: 100px; float: left; } #D1 { background-color: maroon } #D2 { background-color: purple } #D3 { background-color: navy } #D4 { background-color: black } #D5 { background-color: red } </style> </head> <body> <div id="D1"> </div> <div id="D2"> </div> <div id="D3"> </div> <div id="D4"> </div> <div id="D5"> </div> </body> </html> HTML: Internet Explorer, however, seems to give us trouble. Even though the five boxes add up to 100%, the last box is sometimes wrapped to the next line. Setting the box widths to 19.9% seems to correct that for IE. There are, in fact, CSS properties for mimicing the visual appearence of a table so you don't have to pollute your HTML document with misued tables. Once again, however, Internet Explorer does not support these properties. Crossing the IE hurdles will be one of the challenges of changing to a semantically correct HTML document.
Thank you sooooo much.. This worked great. It's the best example I've seen yet. Also I tried it in IE, FF, and Opera... It's looks fine. Again Thank You
nice reply! i hate to ask stupid questions but why is it that we're supposed to use divs instead of tables now? ive read this elsewhere as well, just wondering
tables are for tabular data, divs are meant for design. That's really what it comes down to. (This is my opinion)
Well I tried editing the code you sent and.... it's not bad. What I'm doing is trying to layout a search feature to search jobs. keywords,location,job category, and the submit button. Maybe the calls for table use. The form fields just aren't looking right Whatcha think?
Is there some documentation on this? I remember reading some developers talking about how bad it is to use tables for layouts--but that's what i've been doin for years w/out problems. anyone have links to a sort of formal explanation?
check out www.google.com/ig now move those sections around. You can't do that with tables. Also sites load faster using <div> and css. I'm starting to think that in some cases it's ok to design with tables. Yahoo and Google are both designed with tables..
Ok, I want to learn to use only CSS and <div>, but I cant get this to look right with <div> <table> <tr valign="top"> <td>Keyword(s)<br /><input type="text"><br />ie. IT, Nurse, Construction</td> <td>Location<br /><input type="text"></td> <td>Job Category<br /><input type="text"></td> <td><br /><input type="submit" value="Search"></td> </tr> </table> HTML: I'm not doing to well with the columns. Also this has to fit in a 760px container.
to me, divs are a hell lot more difficult to do. i've been using tables nicely all along... then i wrote my directory script using divs for the first time - quite a big mindset change. i have to warn you first though, make sure everything looks ok with firefox - it's real tough on standards. after you make it work on firefox, try it out using ie - fix any problems you find. i wrote my directory script based on ie first and had a tough time making it look ok on firefox - since firefox is much much more strict compared to ie.
fsmedia is right, designing with div (using xhtml & css properly) doesn't mean not using tables, but using them for what they are meant for, tabular data.
David Siegel is the man who first formally introduced tables as a way to achieve a desired layout, back in the mid-90s. A little more than a year later (1998), he recanted, stating "The Web is dead, and I killed it - read more
You're welcome kkibak. It's a very interesting read, considering browser technology was not prepared to follow his path to redemption for another two or three years
Ok, this image is a search form I created for a job board I'm making. This is made using tables, as the borders show. I just can't figure out how to create the same thing using <div>. Is it better to keep it in table? My site does not have alot of graphics and ads so i dont think it will affect the load time very much. Please someone share your ideas. Here is the code for this form: <cfform action="" method="post"> <table cellpadding="5" cellspacing="0" align="center" border="1"> <tr valign="top"> <td>Keyword(s):<br /><cfinput class="search_input" name="keyword"><br>i.e. Nurse, IT, Construction</td> <td>Category:<br /><select class="search_input" ><option>Select Category</option></select></td> <td width="145" align="center"><br /><input type="submit" value="Search" /></td> </tr> <tr valign="bottom"> <td>State/Prefecture:<br /><select class="search_input"><option>Select State/Prefecture</option></select></td> <td>City:<br /><select class="search_input"><option>Select City</option></select><br></td> <td width="145" align="center"><cfif adv is "expand">[ <a href="?page=search_jobs">less options</a> ]<cfelse>[ <a href="?page=search_jobs&adv=expand">more options</a> ]</cfif></td> </tr> <cfif adv is "expand"> <tr valign="top"> <td colspan="3">Employment Type: <input type="radio" checked name="EmpType"> Full Time <input type="radio" name="EmpType"> Part Time</td> </tr> <tr valign="bottom"> <td colspan="3">Salary Range:<br /><select class="search_input"><option>$15,000 - $20,000</option><option>$21,000 - $25,000</option></select></td> </tr> <tr valign="bottom"> <td colspan="3">Jobs Posted Within:<br /><select class="search_input"><option>30 Days</option><option>7 Days</option></select></td> </tr> </cfif> </table> </cfform>
This is an interesting case. In some sense, it is tabular. There is a distinct relationship between each form element and its corresponding label. But it's a relationship that can be expressed in the same context without tables, which means tables are not the ideal choice. All of that being said, I think this is one of those rare occasions where using tables in a questionable circumstance is not exactly a dealbreaker. I don't think you need to worry yourself too much over this one. The only thing that I could caution, for the sake of accessibility for those using text browsers/screen readers, is that the submission button be the last element in the table, and that you use <label> tags to define the relationship between form elements and inputs.
I'm kinda confused about what you are saying about the submit buttom. As far as making it the last element in to table I can do that by changing the more options link and less options link with the button. However, every thing below the less option link will only appear if the user selects to have more options for their search. So that last half of the table will be there and not be there and be there and not be there... you know what I mean? Using Coldfusion... of course
Actually, now that I think about it, I think you can achieve the same effect by setting a tab order on your form elements. The point is that in the event your tables are not recognized (mobile browsing devices, text browsers, etc.), the submit button should be the final element in the form. ColdFusion shouldn't have anything to do with the form itself. It's just for processing the form, right?
accually I will be changing the select elements to cfselect, pulling the select box content from a lookup table. I may make a whole seperate site for mobile devices. This is the english version of the site. We will have a japanese version as well and in Japan... everyone uses their cellphone to check out sites... That's alittle of topic, anyway..... I'll just stick with tables for column style designing.. The rest of my site is <div> and css..