Having a hard time creating a table cell with two colour background using only HTML & CSS and no script?

Here is an example that should sort you out…

The HTML

<table>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>
        <div class="positioning">
            <div class="bg pink"></div>
            <div class="bg green"></div>
            <div class="content">
              Hi
            </div>
        </div>
    </td>
  </tr>
</table>

The CSS

table{
	border-collapse:collapse
}
table td{
	background:#f0f0f0;
	padding:0;
	border:1px solid #ccc;
	font-size: 50px;
}
.positioning{
	position:relative;
}
.bg{
    position: absolute;
	width:50%;
	top: 0;
	bottom: 0;
}
.pink{
	background:#d00778;
	left:0;
}
.green{
	background:#8cce1b;
	left:50%;
}
.content{
	position:relative;
	z-index:1;
	text-align:center;
	color:#fff;
}

Table cell with two colour background

You should now have a table cell with two colour background as below…

cell 1	cell 2
cell 3	Hi