<html>
  <head>
    <style>
      div {
        width: 200px;
        height: 200px;
        border: 3px solid red;
        text-align: center;
        float: left;
      }
    </style>
    <script>
      a = "200px"
      function f()
      {
        a = a=="200px" ? "350px" : "200px";
        document.getElementById("d").style.width=a;
        document.getElementById("d").style.height=a;
      }

      function t()
      {
        s = "";
        s += "col 1: " + document.getElementById("c1").offsetWidth + "\n";
        s += "col 2: " + document.getElementById("c2").offsetWidth + "\n";
        s += "col 3: " + document.getElementById("c3").offsetWidth + "\n";
        s += "row 1: " + document.getElementById("r1").offsetHeight + "\n";
        s += "row 2: " + document.getElementById("r2").offsetHeight + "\n";
        s += "row 3: " + document.getElementById("r3").offsetHeight + "\n";
        alert(s);
      }
    </script>
  </head>
  <body>
    <table border="1">
      <tr>
        <td></td>
        <td id="c1">col 1</td>
        <td width="50" id="c2">col 2</td>
        <td id="c3">col 3</td>
      </tr>
      <tr>
        <td id="r1">row 1</td>
        <td rowspan=3 colspan=3>
          <div id="d">tjosan</div>
        </td>
      </tr>
      <tr>
        <td height="50" id="r2">row 2</td>
      </tr>
      <tr>
        <td id="r3">row 3</td>
      </tr>
    </table>
    <input type="button" onClick="f();" value="expand">
    <input type="button" onClick="t();" value="sizes">
  </body>
</html>
