Page Widget How to - Create Simple table layout with rowspan

Question

We would like to know how to create Simple table layout with rowspan.

Answer


<!DOCTYPE HTML>
<html lang="en">
<head>
<style type='text/css'>
.fixed-layout {<!--   w  w  w  .  j a  va  2 s.  c o  m-->
  table-layout: fixed;
}
.fixed-layout>tbody>tr>td {
  vertical-align: top;
  background: #0FF;
}
.col1 {
  width: 200px;
}

.col2 {
  width: 100px;
}

.w100 {
  width: 100px;
}

.w200 {
  width: 200px;
}

.h50 {
  height: 50px;
}

.h100 {
  height: 100px;
}

.h150 {
  height: 150px;
}
</style>
</head>
<body>
  <table class="fixed-layout" border="0" cellpadding="0" cellspacing="10">
    <tr>
      <td class="col1 w200 h150" rowspan="2"><div></div></td>
      <td class="col2 w100 h100"><div></div></td>
    </tr>
    <tr>
      <td class="col2 w100 h100" rowspan="2"><div></div></td>
    </tr>
    <tr>
      <td class="col1 w200 h50"><div></div></td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: