App下載
首頁 > html > tab > Page Widget - 如何使用rowspan創(chuàng)建簡單的表格布局

Page Widget - 如何使用rowspan創(chuàng)建簡單的表格布局

我們想知道如何使用rowspan創(chuàng)建簡單的表格布局。 

<!DOCTYPE HTML>
<html lang="en">
<head>
<style type='text/css'>
.fixed-layout {
  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>