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
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
>> 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>></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. ;)
Anything that tables can do... CSS can do better :)
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.