building off @cimmanon's answer, here's two improvements for your markup and styles,:

1: Accessibility Improvements:
the example needs a header, so lets add that along with thead and tbody to the markup. the header spans two columns, so we're going to use the colspan attribute to stretch the th across both.
in the same fashion, the table body header spans the four rows of the table body's content, so lets add rowspan="4" to it and force it to stretch across all four rows of content.
styling here (one table, not three like your image) is minimal and gets the job done, except for older versions of IE in regards to the translate property declaration. but thats just the icing on the cake, and to prove my points: the really important part is the markup, which is Accessible, as well as valid html5.
you can view this example here:
http://codepen.io/jalbertbowden/pen/yugAH

2: Accessible Altered Styles Working Demo:
you can use thead for each table, although i do not think that markup will work in this case; however, you should be using thead in your tables for semantics, but more importantly accessibility. implemented them gives you markup like:

<table class="table-color-01">
  <thead>
    <tr><th colspan="2">Category</th></tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="4">Landscape</th>
      <td>Range Geography</td>
    </tr>  
    <tr><td>Size</td></tr>
    <tr><td>Topography</td></tr>
    <tr><td>Elevation</td></tr>
  </tbody>
</table>
<table class="table-color-02">
  <thead>
    <tr><th>Pendleton</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
  </tbody>
</table>
<table class="table-color-03">
  <thead>
    <tr><th>Warm Springs</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
  </tbody>
</table>

and the styles:

table{float: left; margin-left:10px; width:250px; text-align:center; border-collapse:collapse}

.table-color-01 thead{background-color:#666}
.table-color-02 thead{background-color:#333}
.table-color-03 thead{background-color:#999}

tbody th,td{border-width:1px; border-style:solid}

.table-color-01 td,.table-color-01 tbody th{color:#666; border-color:#666}
.table-color-02 td{color:#333}
.table-color-03 td{color:#999}

thead{color:#fff; text-transform:uppercase}

tbody th{transform:rotate(-90deg);}

you can view a codepen of this here:
http://codepen.io/jalbertbowden/pen/luAGo

the class names are blatant for the example's sake, and i would give the tbody th a class instead of targeting it how it is, but i prefer classes to document element chains, typically providing better performance in doing such.
i ditched the span because its unnecessary in this case, and as such is just bloat.