Jump to content

Tables: What's Wrong With Them?


clonetrooper9494
 Share

Recommended Posts

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

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...