homepage Welcome to WebmasterWorld Guest from 54.196.197.153
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
How to Create Table format (like Rows and Columns) using DIV tags
Aravind_M_P




msg:4064982
 1:27 pm on Jan 21, 2010 (gmt 0)

Hi there, I am doing web designing and i am new to this site.
Let's come to the point.. I was trying to create a table structure layout using CSS(without using <TABLE><TR> & <TD>, means purely DIV based layout). But i am unable to get the good layout.

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">&nbsp;asdlkjdskjdkjsdj fj</div>
<div class="columnLeft">&nbsp;fdfdfdf</div>
<div class="columnLeft">&nbsp;dfdffdf</div>
<div class="columnLeft">&nbsp;fdddddddddddd</div>
<div class="columnLeft">&nbsp;sssssssssssssss</div>
<br clear="all" />
<div class="columnLeft">&nbsp;</div>
<div class="columnLeft">&nbsp;</div>
<div class="columnLeft">&nbsp;</div>
<div class="columnLeft">&nbsp;</div>
<div class="columnLeft">&nbsp;</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

 

Najim




msg:4065049
 3:31 pm on Jan 21, 2010 (gmt 0)

@ Aravind_M_P

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">&nbsp; something here</div>
<div id="col_mid">&nbsp; something here </div>
<div id="col_mid">&nbsp; 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>

Aravind_M_P




msg:4065479
 5:34 am on Jan 22, 2010 (gmt 0)

Thank you for you help Najim. things are working nice :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved