div+css 11 ul li 编写数据表格,使用 div + css 实现

2009-10-31 分类：DIV+CSS 标签: DIV+CSS 作者:fanzg

数据表格我相信大家在制作网页的时候一定用得很多，最经常就是 table 这个标签了。

很明显table 就是一个制作表格的标签，但是使用 ul li 也可以做到数据表格，

而且很简单的代码可以实现，主要还是用 div 和 css 来控制 ul li 吧，可以这样说。

先看看是怎样的一个数据表格。

就是这个 4列， 4行的表格，这里使用了 ul li 来实现，没有使用 table th td 这些标签。

现在写一个，看看如何实现这个效果的。

开始当然还是写一个 div 来控制表格的大小了。

这样一个 400px 的div 就出来了。关于div 还有 css 外部文件引用就不多说了，

因为在之前的视频详细讲解过，

=====================================

现在写入数据了，可以看到没有加入 css 的 ul li 原本的样子。

现在把它原来的风格去掉也就是 list-style-type: none;

去掉的前面的圆点后，再进行把字体横着分布（现在是竖着的）。

加入 float: left; 是吧，这样就出来了。

把它们之间的距离分开一下， width: 100px; 这样就会自动换行。。。

其实这个就是重点，让它自动换行，然后就可以自动产生表格效果了。

把 div 大小改一下。这样就出现 4列的效果。

看到没有，因为div控制了整个表格的大小，而 li 每添加一个数据

它都会自动换行，例如我现在再添加一个数据，

现在就只差一些基本的美化效果，例如字体居中，字体大小，是否粗体，等等

line-height: 30px; 设置每一行

margin-bottom: 1px; 这个是每一行底部空出的空隙。

margin-left: 1px; 这个是每一个小格左边空出的空隙。

最后去掉 div 原本的边框，再设置一下字体大小。

最上上面的字体大小和粗体另外设置，这样就要写多一个类，

这个可以说是一个表格的表头。如果使用 #news li.biaotou 这种写法，使用的是

class 不是 id
  <li class="biaotou">第一列</li>
  <li class="biaotou">第二列</li>
  <li class="biaotou">第三列</li>
  <li class="biaotou">第四列</li>

#news li.biaotou {
font-size: 16px;
font-weight: bold;
background: #999;
}

这样效果就出来了。再把数据填写完整，这样就完成一个表格了。。

下面使用 Firefox 3.5.3 浏览一下看看，正常显示，这样比起table 简单一些，

还有就是很方便以后对表格数据的一些显示修改都在 css 上控制了。

或者说以后例如修改成 5列，也方便一些。只要把 div 设置大一下。

或者说把 li 设置小一些就可以了，我演示一下。

看到了把，马上变成 5列了，当然数据就要修改一下，不过如果是动态数据的话，

从数据库读取出来不用人工添加是很方便的。好了就到这里 8

有任何疑问或建议，可以给作者留言：