<h2>استفاده از <code>vertical-align</code>در سلول های جدول</h2>

<table class="vtable">
  <tbody>
    <tr>
      <td class="td1" rowspan="2">سلول شماره 1
        <div></div>
      </td>
      <td class="td2">سلول شماره 2</td>
    </tr>
    <tr>
      <td>سلول شماره 3</td>
    </tr>
    </tfoot>
</table>

<div class="vtbtn">
  <button>baseline</button>
  <button>top</button>
  <button>middle</button>
  <button>bottom</button>
</div>

body {direction:rtl;
  text-align: center;
}

table {
  margin: 20px auto;
}

table,
td,
th {
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  border: solid 1px;
  text-align: center;
}

.vtable td {
  background: lightpink;
}

.vtable .td1 {
  vertical-align: middle;
  width: 50%;
  height: 100px;
  background: lightblue;
  padding: 20px;
  font-size: 40px;
}

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;
}

var vtbtn = document.querySelector('.vtbtn').querySelectorAll('button');

for (var i = 0; i < vtbtn.length; i++) {
  (function(index) {
    vtbtn[index].addEventListener('click', function() {
      document.querySelector('.vtable .td1').style.verticalAlign = vtbtn[index].innerHTML;
    });
  })(i);
}