Days back my colleague asked me to create a table without using <table> tag. So i did a small sample which uses CSS to create a table. Its pretty simple and straight forward. I have put down the HTML and CSS below
/***************************************HTML***********************************/
<html>
<head>
<link href="table.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="table">
<ul>
<li class="title">Player Name</li>
<li class="even">Sachin</li>
<li class="odd">Gilchrist</li>
<li class="even">Dhoni</li>
<li class="odd">Ponting</li>
</ul>
<ul>
<li class="title">Country</li>
<li class="even">India</li>
<li class="odd">Australia</li>
<li class="even">India</li>
<li class="odd">Australia</li>
</ul>
<ul>
<li class="title">Ranking</li>
<li class="even">1</li>
<li class="odd">2</li>
<li class="even">6</li>
<li class="odd">10</li>
</ul>
</div>
</body>
</html>
/************************************************table.css************************************/
.table
{
background:#333;
}
.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:#FFFFE6
}
Hope this helps css designers around.
Subscribe to:
Post Comments (Atom)
66 comments:
very cool! Thanks for this!
thanks man...thanks for sharing..
Thanks very much. I found this topic for a long time. It so cool when I can make a table with out table tag. So I want thanks to you again.
Actually, the data in your example would be better suited to a table, because its tabular data.
Bear in mind the semantic implications of your code, because misusing lists for layout is no better than misusing tables for layout.
so I guess i'm lame as i'm not sure how to enter this code into a post to get it to show up as a table. Help please.
i searched this kind of example only, fortunitly i got this example ..
very good example
Happy to see that it is useful to handful number of developers :)
Thanks for this! Really helped when creating my site.
Nice and clean - but if you include a long piece of text in one of the "columns" it ruins the layout. Any thoughts/suggestions?
this is not working with asp.net page. it just doesn't take any CSS formatting while running but it's fine in design mode.
I like this. It works for me.
Thanks!
Hey there,
Thanks alot for your wonderful CSS-Table !
Appreciate it.
For some reason, My brain cannot comprehend tables in html..this css table was absolutely perfect..in less than 5 minutes I had it customized for my website! You rock and I am totally giving you a shout out on my blog
Thanks!
If you are trying to create the table dynamically.. you would have to traverse through your list, or array or whatever you have, as many times as the number of your columns times the number of rows. In that case, this is not "efficient". It is a very good idea though. I don't have a solution... just a problem..
Nice post, I was looking all over for this. Can you tell me how to make the color change (entire row) when I hover a row.
ooooow.... that was so awesomly easy !!!
Many thanks, i customized it in 5 minutes, it was just sooooo easy !
PD: I would add the property overflow to .table:
.table {
background:#333;
overflow:auto;
}
if you add some text it wouldn't appear below now :)
this is great...however...I have a rounded corner graphic behind it and my middle repeated 1px high graphic isn't displaying. my rounded corner graphic displays perfect for my sections that don't have this table. any suggestions??? i've tried z-index and everything. thanks!
Thanks a lot buddy !
Thanks I use your design in:
Singapore Credit Card Promtion
I can break the table easily. Simply type in much text. Floating elements do a line break (as expected). There is no relation any more between the colums then. Thanks for the idea anyway.
As anonymous @August 5, 2009 1:57:00 AM IST said:
This is completely useless. If any "cell" has a longer text the full "table" breaks. There is no practical use for this.
hey ....gr8 work.
i think ..now the use of li n Ul is simple for table design n horizontle menus.
thnx for sharing.
kidos!!thanx a ton!!
Not so good. Nobody maintains data in a table by entering data by columns as in your example. Try translating data from a 100 column spreadsheet with this code. Impractical, hard to maintain, and the method of code layout makes it very easy to introduce data errors during input.
And I agree with others above, this is no cleaner than using the table tag and just the same as abusing the table tag for layout.
I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards
I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards
Nice work. thanks.
Great! just what i needed! Thx :)
This is exactly what I was looking for. Thanks!
Wow this blows. Just plain doesn't work. How about showing a successful page with this? Thanks for wasting my time.
It's great man...
Thanks
Thanks for tutorials.
I just joined a web designer in company and your tutorials helped me with my first task.
I, of course, a newcomer to this blog, but the author does not agree
Worked for me, especially with nested lists. Thanks.
Ever heard of indenting? :P
Just kidding. Thanks for the code! Was very useful :)
Thanks a lot for the easy css code for table less design.
CSS gives me headache. But thanks for this friend. Really helpful.
This is my updated blog post http://www.prabhakaranv.com/blog/2008/03/06/create-table-using-css-no-table/
Well done! exactly what I was looking for. Thanks.
Mate, I was losing all hope of finding example "here CSS & here HTML - just copy". Thank you so much, as a begginer its easier to just copy te code and analyze it than go through pages and pages of properties, code hacks and other "useless" data :)
Big thanks!
Your example really helped me to understand it easily.
Thank you for such logic.
How to align the table in center?
What to do if I want to insert inmages in a table with 2 rows 3 columns. What would be the code?
very cool. works like a charm. thank you for posting this.
great advice!! thanks! the only thing - does search engines understand structure of css-table as well as casual html table?
Love it, thank you!
Thanks! This saved me A LOT of time. :)
Like your tutorial, very useful. Will definitely try it out.
very useful!~help me a lot, thanks for sharing~
I like your work. Professional css tables. Please continue to share more tutorials.
nice tutorial..
will be integrate on my ugly blog
btw,it must be use ul and li ??
is there any or other tag..
thanks in advance
You ROCK!
I owned a web site design company from 1991 until 2002 and have achieved a CIW Master Designer before I left to peruse other interest. I recently began a small project which requires me to create a website. My intent is to make it W3C compliant as well as mobile phone compatible and would like to arrange the content via CSS, and avoid using tables which led me to your webpage.
Thank you for your easy to follow code.
Sincerely,
Jeff Sharp
AKA, Mr. Sharp
Men.... you're my god!!!!
Thanks for this, got it working on our homepage!
hello. its helpful for textual data. but i want to add image and below it the description in the row below. how can i do that using it. thanks
thanks for ur work.. its very easily to create the css file.thanks & lot once again.
Thanks a lot. I've been having a tough time and this is very helpful.
For long text add this to your li style:
word-wrap: break-word;
-Rahul
Thanks for the code. A great starter. class names well thought out.
missleading title ... youre not creating a table using css, you're giving a html table a design using css .....
PERFECT! You saved my day :)
Thanks for the share!
what if there is a line break
or data in 2 lines? the whole table goes for a toss. Otherwise its good.
thanks a lot, I used your css table on one of articles to display data at http://www.kodyaz.com/t-sql/max-integer-values-for-sql-server-numeric-data-types.aspx
For the long text add this to your li style:
word-wrap: break-word;
I used this but it is not working on IE and chrome does work on Firefox? Any other solutions to make this work on all engines. Do I need to add something in the CSS?
Post a Comment