Create a table using CSS
Posted on: April 9, 2009
- In: CSS | HTML
- 16 Comments
Few days back my colleague was developing a website using Div’s. It was very difficult for him to create a structure of table using div’s. So he asked me for look for some way to develop such a structure like a table.
Here is how we can do it, its so simple and easy to understand. Down below are the html and css for the same
HTML code :
<html>
<head>
<title>Creating a table using CSS</title>
</head>
<body>
<h1>Test Rankings</h1>
<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>
</body>
</html>
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>
16 Responses to "Create a table using CSS"
April 9, 2009 at 5:14 pm
Another option is to use floating divs in the very same manner you used the UL’s, and with divs you’re open to use all sorts of extra parameters. This tutorial isn’t very useful at all, in that it’s an easier way out of the TRUE div-table css method.
April 9, 2009 at 5:48 pm
Ya floating div’s can also be used, but when you use div’s you need to specify the width and height, all these extra parameters are required. But with ul’s you dont.
August 2, 2009 at 11:50 am
its doesnt work with me, am i miss something?
already put css code in too
August 2, 2009 at 4:12 pm
Just check with the double cotes(“).. replace all double cotes with the keyboard double cotes one and try and let me know if its working or not..
August 4, 2009 at 8:14 pm
it works!!
its just because I forgot to include the CSS file
my bad T_T
August 9, 2009 at 3:16 pm
i m not getting a table .
I have pasted the above code in notepad and saved it. When i open in IE an FF i am not getting the table
Can you please help me .
August 10, 2009 at 12:29 am
did u put in the CSS, if yes just check with the double cotes(“) there might be problem with this.
Just delete the double cotes and add it from ur keyboard in the same places.
If this also did not work tell me i will check it and try to sort it out.
February 26, 2010 at 4:32 pm
When i type some very big string in one of the column, the other columns are displaying as a new row. This scenario is not going to happen always. But still if you could give me a suggestion to wrap the text when the entire table is fulfilling the width of the screen. (Just like Table tag, if we have some bigger txt, it will wrap automatically)
Thanks
Sathish
February 26, 2010 at 5:19 pm
Well in that case then you can use word-wrap: break-word;. Try with this and see..
May 19, 2010 at 10:18 pm
hi!, nice tips
how to add hover effect entire row?
May 19, 2010 at 11:33 pm
for hover effect you can check in this blog.. https://mywebdunia.wordpress.com/2009/12/09/how-to-give-a-anchor-tag-to-the-table/
December 17, 2011 at 8:49 pm
This works great. . just what I was looking for. . .I plan to mix in a sprinkle of jQuery and this is perfect! Thanks!
Mywebdunia's Blog 
April 9, 2009 at 4:16 pm
Why not just use a table tag?
April 9, 2009 at 5:50 pm
Its an another option, instead of using table tr, td’s blah blah… just use div’s or ul’s and CSS..