title: Set colspan/rowspan for a cell
body: <p>I have a table and I want to change <code>colspan</code>/<code>rowspan</code> property of a cell on runtime. Here is an example:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript"&gt;
              function setColSpan() {
                  document.getElementById('myTable').rows[0].cells[0].colSpan = 2
              }
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;table id="myTable" border="1"&gt;
              &lt;tr&gt;
                  &lt;td&gt;cell 1&lt;/td&gt;
                  &lt;td&gt;cell 2&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;cell 3&lt;/td&gt;
                  &lt;td&gt;cell 4&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;form&gt;
              &lt;input type="button" onclick="setColSpan()" value="Change colspan"&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>My problem is that the cells shift. Am I supposed to remove the cells over which the cell in question spans?</p>
  
  <p>I can I do without removing?</p>
  
  <p>I want to implement a simple spreadsheet. For now I managed to be able to select a rectangular range of cells and show a menu with a "Merge selected cells" option. I would like to be able to "unmerge" cells, so it would be good to span cells without having to remove other cells.</p>