<h2>Using <code>vertical-align</code> on table cells</h2>

<table class="vtable">
      <td class="td1" rowspan="2">Example text.
      <td class="td2">Example text.</td>
      <td>Example text.</td>

<div class="vtbtn">

<p>Press the buttons to change the <code>vertical-align</code> value of the blue table cell.</p>

<p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>
body {
  text-align: center;

table {
  margin: 20px auto;

th {
  border-collapse: collapse;

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;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.