Welcome visitor
* Login
* Register
It is currently May 19th, 2019, 8:23 am
All times are UTC [ DST ]
* Search
View unanswered posts - View active topics

FORUMS » Client Side » HTML



Post new topic Reply to topic  [ 3 posts ] 
Author Message
  Make a table look like a bar graph
PostPosted: October 25th, 2009, 1:13 am 

Posts: 21
Im using a table to display some data on my site but tables are compleatelly square and I would like to have something like a bar graph display, all square but of different sizes.

Any help is welcomed. Thank you.


Top
 Profile  
 
  Re: Make a table look like a bar graph
PostPosted: October 25th, 2009, 5:36 am 
User avatar

Posts: 79
you can put an empty background for the cells you dont want and collspan or rowspan to increase the size of the cells you want to use:
<style type="text/css">
  *{
  margin: 0px;
  padding: 0px
  }
  body{
  background-color: #000
  }
  table{
  width: 300px;
  height:100px;
  border-spacing: 0px
  }
  td{
  background-color: #ffa
  }
  .white{
  background-color: #fff
  }
</style>
<table>
  <tr>
    <td class="white">&nbsp;</td>
    <td class="white">&nbsp;</td>
    <td class="white">&nbsp;</td>
    <td rowspan="5">4</td>
  </tr>
  <tr>
    <td class="white">&nbsp;</td>
    <td rowspan="4">2</td>
    <td class="white">&nbsp;</td>
   
  </tr>
  <tr>
    <td rowspan="3">1</td>
   
    <td class="white">&nbsp;</td>
   
  </tr>
  <tr>
 
 
    <td class="white">&nbsp;</td>
   
  </tr>
  <tr>
 
 
    <td>3</td>
   
  </tr>
</table>
<!--the empty lines represent the cells that were collapsed with the rowspan -->


Top
 Profile  
 
  Re: Make a table look like a bar graph
PostPosted: October 26th, 2009, 11:30 am 

Posts: 26
wouldn't it be easier if you just use divs with border style?
<div style="border: 1px solid #000; display inline; width: 90px; height: 200px">bla bla bla</div>


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

FORUMS » Client Side » HTML


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron