I wrote this just for you!
<HTML>
<STYLE>
.space {
background:url('data:images/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY5h58xUABGsCXQMuL3UAAAAASUVORK5CYII=');
height:5px;
cursor: pointer;
}
</STYLE>
<SCRIPT>
function onrow_click(t) {
var currentRowIndex = t.rowIndex;
if(currentRowIndex % 2 != 0) {
return;
}
var pickIndex;
if(t.parentElement.rows.length == t.rowIndex + 1) {
pickIndex = currentRowIndex - 1;
} else {
pickIndex = currentRowIndex + 1;
}
var col_count = t.parentElement.rows[pickIndex].cells.length;
var newRow = t.parentElement.insertRow(currentRowIndex + 1);
for(var i=0;i<col_count;i++) {
var newCol = newRow.insertCell();
newCol.innerHTML="Bold";
}
var newEmptyRow = t.parentElement.insertRow(currentRowIndex + 2);;
var newEmptyCol = newEmptyRow.insertCell();
newEmptyCol.colSpan = col_count;
newEmptyCol.className = "space";
newEmptyCol.onclick = onclick="onrow_click(this)";
}
</SCRIPT>
<BODY>
<TABLE id='dd' border=1 cellpadding=0 cellspacing=0>
<TR class="space" onclick="onrow_click(this)">
<TD colspan=3></TD>
</TR>
<TR>
<TD>TEST 1</TD>
<TD>TEST 2</TD>
<TD>TEST 3</TD>
</TR>
<TR class="space" onclick="onrow_click(this)">
<TD colspan=3></TD>
</TR>
<TR>
<TD>TEST 4</TD>
<TD>TEST 5</TD>
<TD>TEST 6</TD>
</TR>
<TR class="space" onclick="onrow_click(this)">
<TD colspan=3></TD>
</TR>
</TABLE>
</BODY>
</HTML>