IceApple

项目表格的实现

October 30th 2008,05:24 PM 学习工作表格, ul, li 1 comments

今天写文档，发现用到了很多表格的展现方式
分列分享进行对比、展示
在word里很容易实现
但我同时也想到了要如何在页面中实现的问题

以往遇到这样的情况，绝对是想都不用想，拿起table就用
因为在我的意识里一直认为要用div的话可能会比较麻烦
也许是因为没有尝试过吧
今天写了一下，发现也很简单的，控制也很方便
效果如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>项目表格</title>
<style type="text/css">
*{ margin:0; padding:0}
#box{width:404px;height:154px;
border-right:1px solid #000000;
border-bottom:1px solid #000000;}
ul{ list-style:none}
ul li{border-left:1px solid #000000;
border-top:1px solid #000000;width:100px; 
height:30px; line-height:30px; 
float:left; text-align:center}
</style>
</head>

<body>
<div id="box">
   <ul>
      <li>项目1</li>
	  <li>项目2</li>
	  <li>项目3</li>
	  <li>项目4</li>
	  <li>列1</li>
	  <li> </li>
	  <li> </li>
	  <li> </li>
	  <li>列2</li>
	  <li> </li>
	  <li> </li>
	  <li> </li>
	  <li>列3</li>
	  <li> </li>
	  <li> </li>
	  <li> </li>
	  <li>列4</li>
	  <li> </li>
	  <li> </li>
	  <li> </li>
   </ul>
</div>
</body>
</html>

Run This Code

在table中如果要增加列要插入列表
而在div中只要改一下宽度就可以了
很容易的控制和改变列数

其实都挺简单的，就是利用ul li来处理
不过唯一要注意的一点就是对border的处理
因为如果直接定义li的border，那重叠的地方表格宽度就会变大
当然，边框为1px的时候可能不是那么明显，但当border变大后会有很大的问题
所以，为了解决这个问题
就需要只对li处理border的left和top值
剩下的bottom和right的值要在这个div中来处理
就是这，以前一直没想到，所以总会对那重叠部分头大

只要想通了，其实并不难，哈哈