clonetrooper9494 Posted December 26, 2008 Share Posted December 26, 2008 I am looking around, and I see a lot of people saying DON'T USE TABLES!So now, I ask, why?What are the disadvantages to using tables in my layout?On my site, it uses tables to display a menu, what should I use instead?Why are tables supported today if everybody says they're so bad?~clonetrooper9494 Link to comment Share on other sites More sharing options...
Ingolme Posted December 26, 2008 Share Posted December 26, 2008 Tables are not bad, they're just misused.They're supposed to hold tabular information, and aren't supposed to be used just to lay out items in a page. The problem with them is that they take a whole lot of markup and are harder to style. Besides, CSS stylesheets are saved in cache memory so they load much faster.Here's a three column table layout with header and footer: <table><tr><td colspan="3">Header</td></tr><tr><td>Left</td><td>Middle</td><td>Right</td></tr><tr><td colspan="3">Footer</td></tr></table> Here's the same layout with <div> tags: <div id="header">Header</div><div id="left">Left</div><div id="right">Right</div><div id="middle">Middle</div><div id="footer">Footer</div> Link to comment Share on other sites More sharing options...
jeffman Posted December 26, 2008 Share Posted December 26, 2008 Nothing wrong with tables -- as long as you use them for tabular data, the kind that you would put into a spreadsheet. That is their function and what they were designed for.When people say don't use tables, they mean don't use them as a layout mechanism. For simple layouts, a table is not so bad. But as soon as you introduce any complications, you start writing messy code that's hard to maintain. You end up messing with colspan and rowspan. You put smaller tables inside tablecells in order to get finer and finer control. And as soon as you need to make a change, the whole thing must be built up from scratch. I was there in the 90's, and that's what we did. Yecch.With divs and CSS you can get what you want with more control and less code. Just don't fall into the absolute-positioning trap. float is your first, best positioning tool. Link to comment Share on other sites More sharing options...
clonetrooper9494 Posted December 26, 2008 Author Share Posted December 26, 2008 Should I switch the layout on my site?Its not the data you would put in a spreadsheet...I use tables for a menu, here's the code that you need to look at: <script language="JavaScript">function displaymenu(id){ document.getElementById("div1").style.display = "none"; document.getElementById("div2").style.display = "none"; document.getElementById("div3").style.display = "none"; document.getElementById("div4").style.display = "none"; switch(id) { case 1: document.getElementById("div1").style.display = "block"; var t = 0; break; case 2: document.getElementById("div2").style.display = "block"; var t = 0; break; case 3: document.getElementById("div3").style.display = "block"; var t = 0; break; case 4: document.getElementById("div4").style.display = "block"; var t = 0; break; case -1: var t = setTimeout(displaymenu(),550); break; case -2: var t = setTimeout(displaymenu(),550); break; case -3: var t = setTimeout(displaymenu(),550); break; case -4: var t = setTimeout(displaymenu(),550); break; }}</script><body style="margin:0px;"><table border="0" style="float:left;padding:0px;border-style:solid;border-width:0px;margin:-2px;"> <tr> <td colspan="2" onmouseover="displaymenu(1)" style="padding:0px;"><a href="/" title="News of CloneDrone">News</a> |</td> <td colspan="2" onmouseover="displaymenu(2)" style="padding:0px;"><a href="/" title="The site map">Site Map</a> |</td> <td colspan="2" onmouseover="displaymenu(3)" style="padding:0px;"><a href="/" title="Some games made by me and others">Games</a> | </td> <td colspan="2" onmouseover="displaymenu(4)" style="padding:0px;">Menu 4 |</td> </tr> <tr> <td onmouseout="displaymenu(-1)" onmouseover="displaymenu(1)" style="position:absolute;"> <div style="display:none;background-color:white;border: thin solid black;min-width:75;" id="div1"> <ul style="padding-left:10px;margin-top:1px;list-style-type:none;"> <li>---</li> <li>---</li> <li>---</li> </ul> </div> </td> <td><div style="display:none;"> </div></td> <td onmouseout="displaymenu(-2)" onmouseover="displaymenu(2)" style="position:absolute;"> <div style="display:none;background-color:white;border: thin solid black;min-width:75;" id="div2"> <ul style="padding-left:10px;margin-top:1px;list-style-type:none;"> <li>SiteSearch</li> <li>About SS</li> </ul> </div> </td> <td><div style="display:none;"> </div></td> <td onmouseout="displaymenu(-3)" onmouseover="displaymenu(3)" style="position:absolute;"> <div style="display:none;background-color:white;border: thin solid black;min-width:75;" id="div3"> <ul style="padding-left:10px;margin-top:1px;list-style-type:none;"> <li>Infinite Velocity</li> <li>Uplink</li> </ul> </div> </td> <td><div style="display:none;"> </div></td> <td onmouseout="displaymenu(-4)" onmouseover="displaymenu(4)" style="position:absolute;"> <div style="display:none;background-color:white;border: thin solid black;min-width:75;" id="div4"> <ul style="padding-left:10px;margin-top:1px;list-style-type:none;"> <li>Link 4a</li> <li>Link 4b</li> <li>Link 4c</li> </ul> </div> </td> <td><div style="display:none;"> </div></td> </tr></table><div style="padding:0px;"><form action="login.html" method="post" id="login"> Username <input style="height:20px;width:100px;" type="text" name="username">Password <input style="height:20px;width:100px;" type="password" name="password"><input type="hidden" name="page_mode" value="login"><span onclick="document.getElementById('login').submit()"><u>Login</u></span></form></div><br><hr width="100%" onmouseout="displaymenu(-1)" > Link to comment Share on other sites More sharing options...
jeffman Posted December 26, 2008 Share Posted December 26, 2008 I'll say this: you have a LOT of markup and not much happening. Other methods could get the same results with much simpler code.I would definitely break the habit of using in-line style attributes. Put those definitions in a style sheet. (It's okay if it's at the top of the page.)I would also learn to write simple menus using <ul> elements and CSS. You have a lot of javascript you don't really need.And FWIW, your menus don't work right in most browsers because thissetTimeout(displaymenu(),550);should look like this:setTimeout("displaymenu()",550); Link to comment Share on other sites More sharing options...
Synook Posted December 27, 2008 Share Posted December 27, 2008 http://www.hotdesign.com/seybold/ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.