How to set a table cell 2 colors?

Question

How to create <td> with 2 colors?

This is my code :

<table cellspacing=0>
   <tr>
    <td bgcolor=green><img src='pic/s.gif' width=8 height=5></td>
    <td bgcolor=#AAAAAA><img src='pic/s.gif' width=72 height=5></td>
    <td style="color: green;">10%</td>
   </tr>
</table>

but I want use one td and write 10% on td with z-index=1 but I don't know how.

Answer 1

Interesting concept, but do you really need a table layout?

Here's a FIDDLE with a slightly different approach.

HTML

<table>
    <tr><td>
            <div class='celldiv'>20%
                <div class='variablediv'></div>
            </div>
        </td></tr>
</table>

CSS

td {
    height: 20px;
    width: 100px;
    padding-left: 30px;
}
.celldiv {
    height: 100%;
    width: 100%;
    background-color: red;
}
.variablediv {
    float: left;
    height: 100%;
    width: 20%;
    background-color: blue;
    margin-right: 5px;
}

And you can dynamically change the width of the blue and the number with jQuery.

Just an idea.

Answer 2

I hope you are expecting the result like this...

DEMO JsFiddle

HTML

    <table>
       <tr>
           <td class="red"></td>
           <td class="green"><span class="ten">10%</span></td>
       </tr>
    </table>

CSS

table
{
    border-collapse: collapse;
}
.red
{
    background-color: red;
    width: 10px;
    height: 5px;
}
.green
{
    background-color: green;
    width: 90px;
    height: 5px;
}
.ten
{
    color: #ffffff;
}