Forum Moderators: open
I used CSS code like below......
body { margin:20px 0 0 0;}
#table_main
{
margin-left:10%;
margin-right:10%;
width:80%;
border:solid #CCCCCC 3px;
background-color:#f5f5f5;
}
.columnLeft
{
float:left;
width:19.5%;
background:#f6fafd;
vertical-align:middle;
text-align:left;
border-width:1px;
border-style:solid;
border-right:#a9a9a9;
border-bottom:#a9a9a9;
border-collapse:collapse;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
color:#000000;
padding:1px 1px 1px 1px;
}
And HTML code like below......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="tableformat.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="table_main">
<div class="columnLeft"> asdlkjdskjdkjsdj fj</div>
<div class="columnLeft"> fdfdfdf</div>
<div class="columnLeft"> dfdffdf</div>
<div class="columnLeft"> fdddddddddddd</div>
<div class="columnLeft"> sssssssssssssss</div>
<br clear="all" />
<div class="columnLeft"> </div>
<div class="columnLeft"> </div>
<div class="columnLeft"> </div>
<div class="columnLeft"> </div>
<div class="columnLeft"> </div>
<br clear="all" />
</div>
</body>
</html>
Now, can anyone help me to get the layout exactly like table structure? Please help me to solve this.
Thanks
well this might be too much for want you really want, lets start with making a couple of columns with css then you definitely get the idea of doing table with CSS
=====
CSS dump save as sample.css
==========
#container
{
width: 100 %;
clear: both;
border: 1px solid #CCC;
}
#col_left
{
float: left;
width: 20%;
margin: 0 5px 0 0;
border: 1px solid #CCC;
}
#col_mid
{
float: left;
width: 20%
margin: 0 5px 0 0;
border: 1px solid #CCC;
}
#col_right
{
float: right;
width; 35%;
margin: 5px;
border: 1px solid #CCC;
}
=========
HTML Dump save as sample.html
==========
<html>
<head>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="col_left"> something here</div>
<div id="col_mid"> something here </div>
<div id="col_mid"> something here</div>
<div style="clear: both"></div>
</div>
</body>
</html>
inside the col Div you can add other Div this will eventually create something close to tables without the use of <Table><tr><Td>
