<table border="1" width="100%">
<tr>
<td colspan="2" style="background-color:red;margin:0px;padding:0px;" width="25%"><div id="barre" style="border:solid 1px green;background-color:lightgreen;width:50%;text-align:center;">50%</div></td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
</table>
<input type="button" value="+" onclick="document.getElementById('barre').style.width=parseInt(document.getElementById('barre').style.width)+5+'%';document.getElementById('barre').innerHTML=document.getElementById('barre').style.width"/>
<input type="button" value="-" onclick="document.getElementById('barre').style.width=parseInt(document.getElementById('barre').style.width)-5+'%';document.getElementById('barre').innerHTML=document.getElementById('barre').style.width"/> |