How to Create a table using CSS ?

hoangvu

New member
Joined
Jun 6, 2012
Messages
1,888
Points
0
I want to make a table only using css tag as <div> <ul>..is It possible ?
any tutorials to make this ?

Thanks
 

webdesign

New member
Joined
Jul 5, 2012
Messages
234
Points
0
Here's Example as refereces
<h4>Test Create Table with Css</h4>

<div class=”table”>
<ul>
<li class=”title”>Rank</li>
<li class=”even”>1</li>
<li class=”odd”>2</li>
<li class=”even”>3</li>
<li class=”odd”>4</li>
<li class=”even”>5</li>
</ul>
<ul>
<li class=”title”>Team</li>
<li class=”even”>Australia</li>
<li class=”odd”>South Africa</li>
<li class=”even”>India</li>
<li class=”odd”>Srilanka</li>
<li class=”even”>Pakistan</li>
</ul>
<ul>
<li class=”title”> Points</li>
<li class=”even”>5361</li>
<li class=”odd”>5360</li>
<li class=”even”>5498</li>
<li class=”odd”>3680</li>
<li class=”even”>2197</li>
</ul>
<ul>
<li class=”title”>Rating</li>
<li class=”even”>128</li>
<li class=”odd”>119</li>
<li class=”even”>117</li>
<li class=”odd”>108</li>
<li class=”even”>100</li>
</ul>
</div>
CSS code:
<style type=”text/css”>
.table{
background:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.table ul{
float:left;
margin:0;
padding:0;
border:1px solid #C9C9C9;
}
.table ul li{
list-style:none;
padding:5px 10px;
}
.table ul li.title{
font-weight:bold;
background:#333;
color:#fff;
}
.table ul li.even{
background:#fff
}
.table ul li.odd{
background:#D7EDFB
}
h1{font-size:16px;
color:#227786;
}
</style>
 

madelinekim

New member
Joined
Aug 8, 2012
Messages
34
Points
0
CSS is often used by lots of web developers with the help of table based design to mange the tables properties and some other things in yoour web pages. Because we know that without CSS tablesless design is possible.
 

aixporter

New member
Joined
Dec 12, 2012
Messages
115
Points
0
Believe it or not, tables are still actively used in HTML5.. with large data sets there simply isn't anything better than tables. Especially if you think about exporting data to CSV files.
 

web3k

New member
Joined
Dec 23, 2012
Messages
39
Points
0
You can use multiple div's inside a div container. Float left all the divs.

This only works easily when you have a fixed width on the container and divs inside, but can be done.

If the content going into the table is tabular type data, then use tables. That's what they were designed for.
 
Older threads
Replies
8
Views
6,281
Replies
1
Views
4,356
Replies
2
Views
4,713
Replies
6
Views
6,347
Newer threads
Replies
2
Views
2,599
Replies
1
Views
1,960
Replies
1
Views
2,528
Replies
3
Views
2,087
Replies
5
Views
3,651
Latest threads
Replies
3
Views
70
Replies
1
Views
57
Replies
1
Views
66
Recommended threads
Replies
8
Views
3,608
Replies
5
Views
2,811
Replies
3
Views
1,363

Referral contests

Referral link for :

Sponsors

Latest Blog ArticlesMost Viewed Threads

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top