table 合併單元格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <title>table 合併單元格</title>
 <style type="text/css">
  table{ border-left:1px solid #000;border-top: 1px solid #000; }
  td{ border-right:1px solid #000;border-bottom: 1px solid #000;width: 50px; }
 </style>
</head>
<body>
<!-- 有序列表 -->
<ol>
 <li>基本表格</li>
 <table cellspacing="0" cellpadding="5">
  <tr>
   <td>1.1</td>
   <td>1.2</td>
   <td>1.3</td>
  </tr>
  <tr>
   <td>2.1</td>
   <td>2.2</td>
   <td>2.3</td>
  </tr>
  <tr>
   <td>3.1</td>
   <td>3.2</td>
   <td>3.3</td>
  </tr>
 </table>
 <br>
 <br>
 <li>列合併表格</li>
 <table cellspacing="0" cellpadding="5">
  <tr>
   <td colspan="3">1.1</td>
   <!-- <td>1.2</td>
   <td>1.3</td> -->
  </tr>
  <tr>
   <td>2.1</td>
   <td>2.2</td>
   <td>2.3</td>
  </tr>
  <tr>
   <td>3.1</td>
   <td>3.2</td>
   <td>3.3</td>
  </tr>
 </table>
 <br>
 <br>
 <li>行合併表格</li>
 <table cellspacing="0" cellpadding="5">
  <tr>
   <td>1.1</td>
   <td>1.2</td>
   <td>1.3</td>
  </tr>
  <tr>
   <td rowspan="2">2.1<br>3.1</td>
   <td>2.2</td>
   <td>2.3</td>
  </tr>
  <tr>
   <!-- <td>3.1</td> -->
   <td>3.2</td>
   <td>3.3</td>
  </tr>
 </table>
 <br>
 <br>
 <li>複雜表格</li>
 <table cellspacing="0" cellpadding="5">
  <tr>
   <td rowspan="2">1.1<br>2.1</td>
   <td>1.2</td>
   <td>1.3</td>
  </tr>
  <tr>
   <!-- <td>2.1</td> -->
   <td>2.2</td>
   <td>2.3</td>
  </tr>
  <tr>
   <td colspan="3">3.1</td>
   <!-- <td>3.2</td>
   <td>3.3</td> -->
  </tr>
 </table>
</ol>
</body>
</html>

 

相關文章
相關標籤/搜索