table表格單元格橫向和屬性合併程式碼例項

青衫無名發表於2018-03-01
利用單元格可以能夠有效的組織資料，如果能夠靈活熟練的利用，則對於組織清晰明瞭的資料有著重要意義，下面是一段表格佈局的程式碼例項，它實現了橫向和縱向的單元格合併效果。

程式碼如下:















01


02


03


04


05


06


07


08


09


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


26


27


28


29


30


31


32


33


34


35


36


37


38


39


40


41


42


43


44


45






<!DOCTYPE html>



<html>




<head>




<meta charset=" utf-8">




<meta name="author" content="http://www.softwhy.com/" />




<title>螞蟻部落</title>




<style>



html,body{



  padding:10px;




  margin:0px;




  width:100%;




  height:100%;




  overflow:hidden;



}


table{



  border:1px solid #ccc;



}


td{



  width:100px;




  height:100px;




  text-align:center;




  font-family:arial;




  border:1px solid #aaa;




  vertical-align:center;



}



</style>




</head>




<body>




<table border="1" cellspacing="0" cellpadding="10">




  <tr>




    <td></td>




    <td rowspan=`2`></td>




    <td></td>




  </tr>




  <tr>




    <td></td>




    <td></td>




  </tr>




  <tr>




    <td></td>




    <td colspan="2"></td>




  </tr>




</table>




</body>




</html>

















關鍵是利用了rowspan和colspan屬性。






原文釋出時間為：2017-2-13


本文作者：admin


本文來自雲棲社群合作伙伴“螞蟻部落”，瞭解相關資訊可以關注螞蟻部落


原文連結：table表格單元格橫向和屬性合併程式碼例項










相關文章