Table でレイアウトするのは推奨されていないのと、案外難しかったりします。(幅高さ固定のために1pxの透過GIFを使うようなテクニックなどもある)
なので、flex でどうでしょう。モダンブラウザなら問題なし。floatなどでレイアウトを作るのもできたほうが良いですが、ブラウザ対応の問題もほぼなくなりかけているのでお勧めです。
CSS
1div {
2 box-sizing: border-box;
3 min-height: 1vh;
4 min-width: 1vw;
5}
6
7.root {
8 border: 1px solid #ddd;
9 height: 90vh;
10 width: 90vw;
11}
12.root .wrap {
13 height: 100%;
14}
15
16.wrap {
17 display: flex;
18}
19.wrap > .left {
20 flex-basis: 5%;
21 flex-grow: 0;
22}
23.wrap > .right {
24 flex-basis: calc(100% / 3);
25 flex-grow: 0;
26}
27.wrap > .center {
28 flex-grow: 1;
29}
30.wrap > div:not(:last-child) {
31 border-right: 1px solid #ddd;
32}
33
34.v {
35 display: flex;
36 flex-direction: column;
37 height: 100%;
38}
39.v > div {
40 flex-grow: 1;
41}
42.v > div:not(:last-child) {
43 border-bottom: 1px solid #ddd;
44}
45
46.item.main {
47 flex-basis: 70%;
48}
49.item .left {
50 flex-basis: 20%;
51}
HTML
1<div class="root wrap">
2 <div class="left"></div>
3 <div class="center">
4 <div class="v">
5 <div class="item"><div class="wrap"><div class="left"></div><div class="right"></div></div></div>
6 <div class="item"><div class="wrap"><div class="left"></div><div class="right"></div></div></div>
7 <div class="item"><div class="wrap"><div class="left"></div><div class="right"></div></div></div>
8 <div class="item main"><div class="wrap"><div class="left"></div><div class="right"></div></div></div>
9 <div class="item"><div class="wrap"><div class="left"></div><div class="right"></div></div></div>
10 </div>
11 </div>
12 <div class="right">
13 <div class="v">
14 <div class="box"></div>
15 <div class="box"></div>
16 <div class="box"></div>
17 </div>
18 </div>
19</div>
【これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/
【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html
【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024