Tableless CSS

Hey all,

I have some pages where used table. i want to replace table with div/ul using CSS.

Sample:

DELETE CODE

HTML:

Please help me

 

well it'S not hard just read http://www.w3schools.com/css/

 

Here is the idea

style important:
Set div width, height, and add border to div, same for lists if needed. you can display them as blocks.
#table {margin: 0; padding: 0; width: 200px; height: 100px;}
#table ul {display: inline;}
#table ul li {list-style: none;}

------------------
<div id="table">
<ul>
<li>TD left</li>
<li>TD right</li>
</ul>
<ul>
<li>TD left</li>
<li>TD right</li>
</ul>
<ul>
<li>TD left</li>
<li>TD right</li>
</ul>
<ul>
<li>TD left</li>
<li>TD right</li>
</ul>
</div>
..........

 

Thanks for replay ....

but i have 40+ pages.. i want to create common CSS for All pages.
NB: tables td height are different.

 

well thats possible just create one stylesheet and link it to each page and replace the tabless with div's

 

It is always called "tableless layout" rather than "tableless css" .
Tableless layout is very flexible, reusable and for common purpose .
You can learn it by yourself, it is easy .

 

OK thanks all

 

Ummm...Just a thought but...

Using tables to control layout is an html hack...tables are meant for tabular data, not layout...agree?

The point of dispensing with tables in your layout in favor a proper css is to conform to web standards, for the purpose of better more semantic, less bloated, easier to control code...agree?

So Why would you use list elements to control layout? What is the difference between using all of that bloated code with all of those list as layout tools, that is really the same as just saving yourself the trouble and keeping the tables.

List elements are meant to identify LISTED ITEMS, not layout. Use the proper DIV elements to control DIVISIONS

<div class="left">
TD LEFT
</div>

<div class="right">
TD RIGHT
</div>

<div class="left">
TD LEFT
</div>

<div class="right">
TD RIGHT
</div>

etc


etc

If you are using tables to display tubular data, than tables are GOOD...for page layout BAD
If you are using list to display listed data GOOD...page layout BAD
If you are using h1, h2, h3, h4, h5, h6 to indicate proper hierarchy GOOD... for display purposes only (font, weight, etc) BAD

list for list, tables for tables, and divs for divs

Not trying to be a hardass, really I'm just trying to help...I highly recommend heading over to sitepoint and getting a hardcopy of:
"html utopia: designing without tables using css"... straightforward, beginner to advanced, and and excellent reference to keep on your desk and mark up for a LONG time to come.

 

if you would like us to do that for you, we can complete that with perfection