[MC-XOBAHCK]

да и да

Ещё раз большое вам СПАСИБИЩЕ! Я разобрался с вашим кодом.

Получается, что выделение ячеек вы реализовали, а нужно доработать последнюю функцию - вот эту:

function mergeTd(event) {
    var tds = document.querySelectorAll("td.sel"),
        len = tds.length,
        colspan = 1,
        parent;

    if (len) {
        [].forEach.call(tds, function (el, i) {
            if (i) {
                var elParent = el.parentNode;
                parent == elParent && colspan++;
                elParent.removeChild(el)
            } else parent = el.parentNode
        });
        tds[0].colSpan = colspan;
        tds[0].rowSpan = len / colspan
    }
}
document.querySelector("#margeTd").addEventListener("mousedown", mergeTd);

1. У функции принимающий параметр event можно убрать или лучше оставить? Я понимаю так, что он вообще не нужен и никакие события в функции не отслеживаются. Работа происходит только с массивом выделенных ячеек.

2. Последние две строчки функции

tds[0].colSpan = colspan;
tds[0].rowSpan = len / colspan

Это тоже самое что:

tds[0].setAttribute('colspan', colspan, 0);
tds[0].setAttribute('rowspan', len / colspan, 0);

?

3. Идея как считать высоту и ширину для объединённой ячейки у меня появилась. Буду пробовать. Нужно немного посидеть поисследовать. Думаю у меня должно получиться, основная логика всё таки уже написана.

4. А вот что мне сложно будет доработать, это сделать правильное выделение. Вот только что обнаружил возможность вот такого выделения ячеек:

<style>table, th, td{min-width:50px;min-height:100px;border:solid 1px #ccc} th, td{min-width:50px;min-height:15px}</style>

<table>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td rowspan="2" style="background:red"></td></tr>
    <tr><td></td><td style="background:red"></td></tr>
</table>

вот же блин...