Table with CSS

[cancer10]

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?

[img]http://photobag.2plans.com/images/75427379.jpg[/img]

Thanx in advance

[Dogtree]

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

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

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

With tweaking you can make it more elegant, of course. ;)

[babyboy808]

Anything that tables can do... CSS can do better :)