Column Graph

by JohnPasquet

HTML

<table class="grid" cellspacing="0" cellpadding="0">
        <tr>
            <td class="y-axis"><div>100</div></td>
            <td class="cell"></td>
            <td class="cell"></td>
            <td class="cell"></td>
        </tr>
        <tr>
            <td class="y-axis"><div>75</div></td>
            <td class="cell"></td>
            <td class="cell"></td>
            <td class="cell"></td>
        </tr>
        <tr>
            <td class="y-axis"><div>50</div></td>
            <td class="cell"></td>
            <td class="cell"></td>
            <td class="cell"></td>
        </tr>
        <tr>
            <td class="y-axis"><div>25</div></td>
            <td class="cell"></td>
            <td class="cell"></td>
            <td class="cell"></td>
        </tr>
        <tr class="last">
            <td class="y-axis"><div>0</div></td>
            <td class="cell"></td>
            <td class="cell"></td>
            <td class="cell"></td>
        </tr>
</table>
<table cellspacing="0" cellpadding="0" class="graph">
    <tr class="columns">
        <td class="y-axis"></td>
        <td class="column">
            <div style="height:75%;" title="First"></div>
        </td>
        <td class="column">
            <div style="height:25%;"  title="Second"></div>
        </td>
        <td class="column">
            <div style="height:50%;" title="Third"></div>
        </td>
    </tr>
</table>
<table class="labels">
    <tr>
        <td class="y-axis"></td>
        <td class="cell">
            <div>
                First
            </div>
        </td>
        <td class="cell">
            <div>
                Second
            </div>
        </td>
        <td class="cell">
            <div>
                Third
            </div>
        </td>
    </tr>
</table>

CSS

table.grid, 
{
    position:absolute;
    height: 125px;
}
table.graph
{
    position:absolute;
    top: 8px;
    height: 100px;
}
table.labels
{
    position:absolute;
    top: 107px;
    left: 4px;
}
table tr td.y-axis
{
    width: 40px;
    text-align: right;
    padding-right: 9px;
}
table.grid .y-axis div
{
    position: relative;
    top: -13px;
}
table.grid td.cell
{
    background-color: #fafafa;
    border-top:1px solid #e8e8e8;
    border-left:1px solid #e8e8e8;
    width: 75px; 
    height: 24px;
}
table.grid tr td:last-child
{
    border-right: 1px solid #e8e8e8;
}
table.grid tr.last td.cell
{
    border-right: none;
    border-left: none;
    border-top: 1px solid #e8e8e8;
    background-color: #fff;
    
}
tr.columns td.column
{
    width: 75px;    
    vertical-align: bottom;    
    height: 100px;    
}
tr.columns td div
{
    background-color: #080;
    width: 25px;    
    margin-left: 25px;
}

table.labels td.cell
{
    width: 73px;
    background-color: #666;
    color: white;
    
    text-align: center;
}
tr.labels td.cell div
{
    padding: 1px 6px;
}