CSS + DIV 实现表格效果

来源：互联网发布：java中boolean默认值编辑：程序博客网时间：2024/04/29 19:29

方案一：

<style type="text/css">.csstb{font-size:12px;width:600px;}.csstb div,.csstb li{float:left;width:198px;line-height:20px;/*行高*/border:#999 solid 1px;}.csstb ul{margin:0;padding:0;list-style:none;}</style><div class="csstb"><div>第1行第1列</div><div>第1行第2列</div><div>第1行第3列</div><div>第2行第1列</div><div>第2行第2列</div><div>第2行第3列</div><div>第3行第1列</div><div>第3行第2列</div><div>第3行第3列</div></div><br />

上面这样DIV有点不知道是什么感觉，本身DIV是一个结构，这样的结构我觉得不好<br />
下面是修改过的用LI列表，其实一样的

<br /><div class="csstb"><ul><li>第1行第1列</li><li>第1行第2列</li><li>第1行第3列</li><li>第2行第1列</li><li>第2行第2列</li><li>第2行第3列</li><li>第3行第1列</li><li>第3行第2列</li><li>第3行第3列</li></ul></div>

方案二：

<style type="text/css">#d1 span{ width:197px; height:18px; float:left; border:solid 1px blue;}</style><div style="width:600px; height:60" id="d1"><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></div>