Sample Table <html> <body> <table border="1"> <tr> <td>City</td> <td>Average Temp</td> </tr> <tr> <td>Atlanta</td> <td>68</td> </tr> <tr> <td>New York</td> <td>58</td> </tr> <tr> <td>San Diego</td> <td>77</td> </tr> </table> </body> </html> Sample 3 Column Div Layout <html> <style type="text/css"> #left{ float: left; width:30%; margin:0; padding:0; background:red; } #middle{ float: left; width:30% margin:0; padding:0; background:yellow; } #right{ width:30%; margin:0; padding:0;background:green; } </style> <body> <div id="left">I am on the left</div> <div id="middle">I am in the middle</div> <div id="right">I am on the right</div> </body> </html>
Need use more <div> than table. In our side, even web jobs interview testing for make a rotated/corss/slant/overlapping pictures/graphics, can't do it with table. Forgive my poor english. Ked38
Interesting Comment by all for tables... infact every one started web development in tables form of coding as the time progressed Div overcome Tables so it doesnt mean that Tables are useless to work with! Still there are thousands of websites running on same basic development done on tables
Yes,can't agree any more. Reworking the current site to be tableless. Less tables is meaning less calcultion I follow this direction .... Ked38
Not just ie6, ie7, ff, safari, Chrome, they are all possible to have some differences. But always, there's a cross-browser solution.
I, agree with Astroman. However while aiming at columns, <table> (and of course <tr> & <td>) is less likely to fall/drop or malfunction, with respect to div. Look at http://forums.digitalpoint.com/showthread.php?t=1842577&p=14417957#post14417957 It is required to apply some ie hacks, INVARIABLY, to set things straight, while using <div> with float property. <table> on the other hand will require to specify cellspacing attribute correction <table cellspacing="0"> .... </table> Code (markup): as cellspacing is different for different browsers. (read MSIE is the mischief monger) refer http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ Also, there is one property of tables that it automatically sets the column width, based on the cell content(s). This may turn out to be an advantage with IE, but the effect is not consistent across the browsers. Some layout might be pleasing with the IE and at the same time look like an eye-sore in google chrome. All in all, its more of an author's personal choice. I, for example, personally, feel div provide a better and more explicit control.
<div> is definately the way to go. As some have posted already <td> should only be used for tabular data. Sometimes it is benificial using <td> for layouts especially in email blasts. But try to use <div> instead.
I am so supprised this question is still being asked really, but am glad to see the answers are so much better than a few years ago when divs were starting to be used for layouts more widespread. Divs for layout much quicker and easier to design and edit designs at a later date (Assuming your pretty good with CSS) Tables are for tabular data only really (Or at a real push for helping make your first one or two websites as its much easier to learn how to do tables meaning you can do a basic layout for your first few web pages/sites)
Yes u are right, div more faster but div is not for IE6, Lot of developers still likes to work in IE6
And honestly, i was forget exactly how to code in Table TR TD .. lol But table still work for some purpose,.. i could not blame developer that use it. Especially for fix layout that need more convinience structure like ADMIN page at the backend. Although the dashboard WP still use table for their admin side. No problem to use tableless in IE, even IE5. Just need some adjustment to your code, maybe .. thats why some people said "IE sucks"
I personally like td than div - quicker to develop and is usually consistent accross multiple browsers (not saying that div is not, but harder)
It depends on what you want to do. For web layouts div , because tables are rigid For tabular data or rigid layouts like list of items , invoice , receipts , where size and layout should stay constant , you can use tables and td.