943,712 Members | Top Members by Rank

Ad:
Jul 20th, 2006
0

Table with CSS

Expand Post »
How do they make tables with only CSS without using HTML Tables? is it possible to make a table as shown on the screenshot below with only CSS and NO HTML? if yes how?


http://photobag.2plans.com/images/75427379.jpg




Thanx in advance
Similar Threads
Reputation Points: 58
Solved Threads: 1
Posting Whiz in Training
cancer10 is offline Offline
234 posts
since Dec 2004
Jul 20th, 2006
0

Re: Table with CSS

>> How do they make tables with only CSS without using HTML Tables?
Well, if you need a table, you need a table. But you can do typical table layout stuff with CSS pretty easily. Just make good use of divs.

>> is it possible to make a table as shown on the screenshot below with only CSS and NO HTML?
Absolutely! You can do it a bunch of ways. Probably the easiest would be something like this.
HTML and CSS Syntax (Toggle Plain Text)
  1. <div>
  2. <span class="box-title">Title Stuff</span>
  3. <div class="box">
  4. <ul class="box-list">
  5. <li>Item 1</li>
  6. <li>Item 2</li>
  7. <li>Item 3</li>
  8. <li>Item 4</li>
  9. <li>Item 5</li>
  10. </ul>
  11. <span class="box-link">Link&gt;&gt;</span>
  12. </div>
  13. </div>
Then the CSS is a simple div with carefully crafted borders and a float for the "title" element. Then inside the div is just a bullet list with a cut left margin and link below it with a large left margin.
HTML and CSS Syntax (Toggle Plain Text)
  1. .box {
  2. width:5em;
  3. border:solid #0000FF;
  4. border-top-width:1.5em;
  5. }
  6.  
  7. .box-title {
  8. float:left;
  9. margin-left:.2em;
  10. margin-top:.3em;
  11. color:#FFFFFF;
  12. }
  13.  
  14. .box-link {
  15. padding-top:-1em;
  16. margin-left:2em;
  17. padding-right:.2em;
  18. padding-bottom:.2em;
  19. }
  20.  
  21. .box-list {
  22. list-style-type:circle;
  23. margin-left:-2em;
  24. margin-bottom:.5em;
  25. }
With tweaking you can make it more elegant, of course.
Reputation Points: 35
Solved Threads: 3
Posting Whiz in Training
Dogtree is offline Offline
232 posts
since May 2005
Aug 8th, 2006
0

Re: Table with CSS

Anything that tables can do... CSS can do better
Reputation Points: 10
Solved Threads: 1
Newbie Poster
babyboy808 is offline Offline
6 posts
since Jun 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: html template help
Next Thread in HTML and CSS Forum Timeline: Linking Help Needed!





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC