How to Create a table using CSS ?

hoangvu

New member
Joined
Jun 6, 2012
Messages
1,889
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,009
Replies
1
Views
4,126
Replies
2
Views
4,475
Replies
6
Views
6,105
Newer threads
Replies
2
Views
2,468
Replies
1
Views
1,910
Replies
1
Views
2,479
Replies
3
Views
2,035
Replies
5
Views
3,600
Latest threads
Replies
0
Views
68
Replies
1
Views
138
Replies
1
Views
91
Recommended threads
Replies
8
Views
4,263
Replies
5
Views
2,505
Replies
0
Views
1,013

Latest postsNew threads

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