HTML and CSS

Table with CSS

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2004

Posts: 234

Reputation: cancer10 is an unknown quantity at this point

Solved Threads: 0

cancer10

Offline

Posting Whiz in Training

Table with CSS

Jul 20th, 2006

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

FocusInterview.com - PHP Interview Questions & Answers

IGCHosting - Cheapest Web Hosting

•

Join Date: May 2005

Posts: 232

Reputation: Dogtree is an unknown quantity at this point

Solved Threads: 3

Dogtree

Offline

Posting Whiz in Training

Re: Table with CSS

Jul 20th, 2006

>> 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.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div>
  <span class="box-title">Title Stuff</span>
  <div class="box">
    <ul class="box-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    </ul>
    <span class="box-link">Link&gt;&gt;</span>
  </div>
</div>
<div>
  <span class="box-title">Title Stuff</span>
  <div class="box">
    <ul class="box-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    </ul>
    <span class="box-link">Link&gt;&gt;</span>
  </div>
</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.

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

.box {
  width:5em;
  border:solid #0000FF;
  border-top-width:1.5em;
}
 
.box-title {
  float:left;
  margin-left:.2em;
  margin-top:.3em;
  color:#FFFFFF;
}
 
.box-link {
  padding-top:-1em;
  margin-left:2em;
  padding-right:.2em;
  padding-bottom:.2em;
}
 
.box-list {
  list-style-type:circle;
  margin-left:-2em;
  margin-bottom:.5em;
}