如何用DIV+CSS制作表格

html-css015

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

如下几点建议:

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

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

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

<!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/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

.tab{ margin:0padding:0/*合并边线*/border-collapse:collapse/*宽高自定*/ width:200pxheight:200px}

.tab td{ border:solid 1px #000}

</style>

</head>

<body>

<table class="tab">

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

属性都写在CSS里就可以了

快速可视化制作CSS推荐使用第三方工具,推荐如下:

1、Bootstrap的可视化制作工具:Jetstrap:

Jetstrap是一个基于 Bootstrap 前端框架的可视化设计工具。通过 Jetstrap制作出来的网页 100% 符合 Bootstrap 标准。比如说你只要设计了电脑端的页面,它会自动适配手机端和 Pad 端(响应式设计)。

2、Bootstrap可视化编辑器工具-LayoutIt

简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站?是的,LayoutIt 是一个 Twitter Bootstrap 界面生成器,能够帮助你快速制作出网站和界面模型,同时能够下载生成的网站代码。

3、Bootstrap的可视化制作工具:bootswatchr

bootswatchr是从地面上创建一个自定义的BootStrap主题的可视化工具。最大的方便就是 我们可以在左侧修改css或者html代码,然后修改结果会直接会显示在右侧。更重要是一个在线编辑和免费生成Bootstrap主题的酷站。