Monday, October 15th, 2007
CSS Vertical Bar Graphs
Category: CSS
HTML:
-
-
<table id="q-graph">
-
<caption>Quarterly Results</caption>
-
<th></th>
-
<th class="sent">Invoiced</th>
-
<th class="paid">Collected</th>
-
</tr>
-
</thead>
-
<tr class="qtr" id="q1">
-
<th scope="row">Q1</th>
-
-
</tr>
-
<tr class="qtr" id="q2">
-
<th scope="row">Q2</th>
-
</tr>
-
<tr class="qtr" id="q3">
-
<th scope="row">Q3</th>
-
-
</tr>
-
<tr class="qtr" id="q4">
-
<th scope="row">Q4</th>
-
</tr>
-
</tbody>
-
</table>
-
-
<div id="ticks">
-
-
</div>
-
i.e. a bog standard table with some divs, and make it look like this:
Related Content:
3.5 rating from 51 votes
Looks like that in Firefox, in IE is looking different :)
but still nice :)
In IE it looks like a buggy output. We all know that IE ***** and all that, but how about 80% of users?
It’s just because of the png’s he uses, if you’d use gif’s there wouldn’t be a problem in IE. Nice graph though.
It’s not a secret, but I’ve seen it few months back and just because I need vertical bargraph :) So if somebody need such thing he will find it very easy on the net :D
I followed the trail, some of the stuffs in the comments to his “credits due” page too and MAN I was impressed how people could tune HTML, CSS and JS…!
Hint; Google for “slants”… ;)