How to Create a table using CSS ?

hoangvu

New member
Joined
Jun 6, 2012
Messages
1,876
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,955
Replies
1
Views
4,983
Replies
2
Views
5,373
Replies
6
Views
7,014
Newer threads
Replies
2
Views
2,925
Replies
1
Views
2,118
Replies
1
Views
2,666
Replies
3
Views
2,251
Replies
5
Views
3,820
Latest threads
Replies
0
Views
14
Replies
5
Views
43
Replies
2
Views
36

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