[Sweet]

belbek, а ты уверен, что потянешь такой проектище?
Мой вариантик (сделал just for fun, так что объединяет один раз из-за id-шников):

<table border="1" height="30" width="270">
  <tr>
    <td id="c1">abc</td><td id="c2">def</td><td id="c3">ghi</td>
    <td id="c4">jkl</td><td id="c5">mno</td><td id="c6">pqr</td>
    <td id="c7">stu</td><td id="c8">vwx</td><td id="c9">yz!</td>
  </tr>
</table>
<input type="button" onclick="unite()" value="Объединять" />
<script>
var table = document.getElementsByTagName('table')[0], 
allCells = document.getElementsByTagName('td'),
start, finish, clicked=false

table.onmousedown = function(){
  clicked=true
  for(var i=0,j=allCells.length;i<j;i++) allCells[i].style.background = 'white'
  var event = arguments[0] || window.event,
  cell = event.target||event.srcElement
  cell.style.background = 'blue'
  start = cell.id.match(/\d+/g)
  return false
}
table.onmouseout = function(event){
  if(!clicked) return
  var event = event || window.event,
  cell = event.relatedTarget || event.toElement
  if(cell.tagName != 'TD') return
  finish = cell.id.match(/\d+/g)
  for(var i=0,j=allCells.length;i<j;i++) allCells[i].style.background = 'white'
  var i,j
  if(start[0]<=finish[0]){ i=start[0]; j=finish[0] }
  else{ j=start[0]; i=finish[0] }
  for(;i<=j;i++) document.getElementById('c'+i).style.background = 'blue'
  return false
}
table.onmouseup = function(){
  clicked = false
}

function unite(){
  var i,j,inner='',cellsToDel=[]
  if(start[0]<=finish[0]){ i=start[0]; j=finish[0] }
  else{ j=start[0]; i=finish[0] }

  for(;i<=j;i++){
    var c = document.getElementById('c'+i)
    inner += c.innerHTML
    cellsToDel.push(c)
  }
  for(var a=1, b=cellsToDel.length;a<b;a++) cellsToDel[a].parentNode.removeChild(cellsToDel[a])
  cellsToDel[0].innerHTML = inner
}
</script>

Но это упрощенный пример. Если его расширять, то количество проблем будет множиться в геометрической прогрессии