How to Create a table using CSS ?

hoangvu

New member
Joined
Jun 6, 2012
Messages
1,844
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
232
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
7,912
Replies
1
Views
5,817
Replies
2
Views
6,207
Replies
6
Views
7,986
Newer threads
Replies
2
Views
3,865
Replies
1
Views
2,504
Replies
1
Views
3,083
Replies
3
Views
2,779
Replies
5
Views
4,281
Latest threads
Replies
1
Views
80
Replies
1
Views
175
Replies
4
Views
383
Replies
11
Views
524
Replies
2
Views
228
Recommended threads
Replies
0
Views
4,942
Replies
5
Views
3,320
Replies
24
Views
6,399
Replies
4
Views
3,599

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

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