zones

by jbb43

HTML

<table class='twidth' border-collapse: collapse;>
 <tr>
    <td colspan='4' class='center p33'>Mkt: $289</td>
    <td colspan='4' class='center p33'></td>
    <td colspan='4' class='center p33'></td>
  </tr>
  <tr>
    <td colspan='4' class='center p33'>|</td>
    <td colspan='4' class='center p33'></td>
    <td colspan='4' class='center p33'></td>
  </tr>
  <tr style='height:15px;'>
    <td colspan='4' class='buy-color p33'></td>
    <td colspan='4' class='hold-color p33'></td>
    <td colspan='4' class='sell-color p33'></td>
  </tr>
  <tr>
    <td colspan='4' class='center p33 ht lb rb'> </td>
    <td colspan='4' class='center p33'></td>
    <td colspan='4' class='center p33 ht lb rb'></td>
  </tr>
 <tr>
    <td colspan='3' class='left p25'>$0</td>
    <td colspan='3' class='center p25'>$547</td>
    <td colspan='3' class='center p25'>$1500</td>
    <td colspan='3' class='right p25'>$max</td>
  </tr>
</table>

CSS

.twidth {width:300px;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.buy-color {background-color:green;}
.hold-color {background-color:yellow;}
.sell-color {background-color:red;}
.p33 {width:100px}
.ht {height:10px}
.lb {border-left: 1px solid #cdd0d4;}
.rb {border-right: 1px solid #cdd0d4;}
.p25 {width:75px}