如何用DIV+CSS制作表格

html-css041

如何用DIV+CSS制作表格,第1张

如下几点建议：

1）DIV+CSS是用来替换表格排版的，表格还是用table。

2）可以尝试用ul li 做简单的表格

3）用DIV+CSS做表格的方法和做页面布局的方法一致，所以你要学习一下这方面，可以参考一下相关视频教程。如果做复杂的表格因为需要反复嵌套效果就不好了。

<style>

*{

padding:0px

margin: 0px

}

div{

margin: 30px 0px 0px 30px

width: 100px

height: 100px

border: 1px solid #ccc

border-right:none

border-bottom: none

}

ul{

float: left

}

ul li{

list-style: none

width: 24px

height: 24px

border-right:1px solid #ccc

border-bottom: 1px solid #ccc

}

</style>

</head>

<body>

<div>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

</body>

效果如下：

上面为效果图，用ul、li的方法详细写法：

css代码：

.demoBox {

width:204px

}

.demoBox li {

float: left

width:100px

border: 1px solid #999

}

.demoBox li.demoLi {

width: 202px

}

html代码：

<ul class="demoBox">

<li>1</li>

<li>2</li>

<li class="demoLi">3</li>

</ul>

总体思路就是利用宽度和浮动来实现，给ul一个固定的宽度，第一行显示的li平分这个宽度，后面的li因为没有位置就自动去了第二行，让它独占一行，就可以实现这个效果。

以上，希望对你有帮助。