Changing some part of table code to tabless in div layout

HTML & CSS
1 
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>layOut</title>
<style type="text/css">
* { margin:0; padding:0;}
.contentWrapper{
float: left;
width: 100%;
}
.boneColor{
background-color:#ffff88;
}
#center3liquid{
margin: 0 250px 0 120px; 
background-color:#ff88ff;
}
#centerFix3liquid{
margin: 0 220px 0 220px; 
background-color:#ff88ff;
}
#left3column{
float: left;
width: 120px; 
margin-left: -100%;
background: #88ffff;
}
#leftFix3column{
float: left;
width: 220px; 
margin-left: -100%;
background: #88ffff;
}
#right3column{
float: left;
width: 250px;
margin-left: -250px; 
background: #88ffff;
}
#rightFix3column{
float: left;
width: 220px;
margin-left: -220px; 
background: #88ffff;
}

#screen { 
width:500px;
background-color:#ffaaff;
margin:auto;
padding:5px;
}
#title { 
background-color:#ffaaaa;
margin:auto;
padding:5px;
}
#left2liquid{
margin-right: 200px;
margin-top:15px;
}
#right2column{
float: left;
width: 200px;
margin-left: -200px; 
background: #ff88ff;
}

#sideBar {
 float: left;
 width: 200px; 
 margin-left: -200px; 
 background: #aaffff;
}

.wFull{width:100%}
.w10{width:10px}
.w300{width:300px}
.h5 {height:5px}
.h10 {height:10px}
.h30 {height:30px}
.m5 {margin:5px;}
.m-t5 {margin-top:5px;}
.m-t10 {margin-top:10px;}
.p2{padding:2px} 
.p3{padding:3px} 
.p-t5{padding-top:5px;}
.b1_555 { border:1px solid #555}
.alignLeft{text-align:left}
.alignCenter{text-align:center}
.alignRight{text-align:right}
.bColorWhite{background-color:#ffffff}
.marginAuto{margin:auto}
.clearBoth{clear:both}
</style>
</head>

<body>
<div class="contentWrapper">
<div id="left2liquid">
 <a href="">my domain</a>
</div></div>

<div id="sideBar">
[COLOR="#FF0000"]<table>
  <tr>                                                                                        
    <td colspan="2" class="wFull alignCenter boneColor b1_555">guest</td>
    <td class="w10"></td>
    <td class="boneColor b1_555 p2">00</td>
  </tr>  
  <tr>
    <td colspan="4" class="wFull h5 boneColor b1_555"></td>
  </tr>
</table>
<table>
  <tr>
    <td class="boneColor p2 b1_555">00</td>
    <td class="w10"></td>
    <td colspan="2" class="wFull boneColor b1_555 alignCenter">logIn</td>
  </tr>
</table>
[/COLOR]</div>

<form>
<div class="clearBoth h30 alignCenter p-t5 b1_555 boneColor">
<a href="">+</a>
<input type="text" class="w300">
<input type="submit" value="search">
</div>
</form>

<div class="clearBoth h30 m-t5 p-t5 b1_555 boneColor">
   <div class="w300 alignCenter p2 b1_555 marginAuto bColorWhite"> (navigator )  sun > earth > asia </div>
</div>

<div class="h5"></div>
<div class="contentWrapper">
  <div id="centerFix3liquid" class="h30 alignCenter">
      <p>title (liguid width)</p>
  </div>
</div>

<div id="leftFix3column">
<div class="alignCenter">
 <p class="m5"> left (fixed width)</p></div>
</div>

<div id="rightFix3column">
<div class="m5 alignCenter"><p> right (fixed width) </p></div>
</div>

<div class="h5 clearBoth"></div>
<div class="contentWrapper">
  <div id="center3liquid">
        <div id="screen">
<p>flexible width by the contents-variable. 
The left and right side of this center contents are the liquid space</p>
        </div>    
  </div>
</div>
<div id="left3column">
<div class="m5">
<p>flexible width by the left-variable</p>
</div>
</div>

<div id="right3column">
<div class="m5">
<p>flexible width by the right-variable</p>
</div></div>
</body>
</html>

How can I make the table code in the code above at http://dot.kr/x-test/tablessLayout01.php tabless with the same result of display?

2

Hi,

Are you just talking about #sidebar?

There doesn’t seem to be anything more awkward with that than what you have done for the rest of the page.

It looks four floats with appropriate widths would do what you want . Unless of course you want full equalising table behaviour and then you could use the display:table properties but are only available from ie8+.

3

I am just talking about removing the table in the page.

I am afraid that I don’t understand what you mean.

Do you mean that I need four columns for removing the table code of the page?

I don’t want table code. I want compatible code.

4

Which is what Paul was talking about.

I am afraid that I don’t understand what you mean.

To be blunt, you have coded your page poorly.

Do you mean that I need four columns for removing the table code of the page?

To replace the table you basically just need 4 of these
<div style=“float:left;width:24.5%”></div>.

For each instance of that, put each a <td> in each separate div example. That’s basically what Paul is trying to get you to do (but make those styles on a class, not inline, like my example)

I don’t want table code. I want compatible code.

I’m assuming English isn’t your first language because your response isn’t really…a valid response. Paul wasn’t talkin about table code. He was talking about using code that give table like BEHAVIOR, minus the actual code for tables. It’s compatible in IE8+, and all the other main browsers.

5

This is just rough but you could do it like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.guest-login {
	float:left;
	width:196px;
	background: #aff;
	padding:2px;
}
.guest-login p{margin:0}
.guest-login span, .guest-login strong {
	border:1px solid #555;
	background:#ff8;
	padding:2px;
	overflow:hidden;
	display:block;
	text-align:center;
}
.guest-login span {
	float:left;
	margin:0 3px 0 0;
}
.top span {
	float:right;
	margin:0 0 0 3px;
}
.hr {
	clear:both;
	border:1px solid #555;
	background:#ff8;
	padding:1px;
	margin:2px 0;
}
.hr hr {
	position:absolute;
	left:-999em;
}
.guest-login div { clear:both }
</style>
</head>

<body>
<div class="guest-login" >
		<div class="top">
				<p><span>00</span><strong>Guest</strong> </p>
		</div>
		<div class="hr"><hr></div>
		<div>
				<p><span>00</span> <strong>Login</strong></p>
		</div>
</div>
</body>
</html>