html各类表格制作,HTML：复杂表格制作

我是标题

简单表格

表格的制作可以通过

等标签的组合来构造。这样一段HTML：

row0.col1	row0.col2
row1.col1	row1.col2
row2.col1	row2.col2

可以得到这样的表格：

table

跨行/列表格制作

如果想制作复杂的跨行或列的表格就需要用到

的rowspan和colspan属性了。详细使用请参考W3School提供的示例。

那么，如果我们要做一个这样的表格：

table

分析一下：

"购物车"是表格的标题，可以使用

标签；

表格中有跨行跨列的单元格，可以使用colspan和rowspan属性；

另外，2016-11-22这一格中是加粗的，我们可以使用样式font-weight:bold;，当然也可以使用

标签完成；

表格文字与边框之间的距离可以使用padding来完成。

我的代码是这样的：

购物车

*{margin:0 auto;}

td, th{padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px;}

购物车

名称	2016-11-22		小计
	重量	单价

... ...

详细代码请戳这里。

当然，在这里2016-11-22这一单元格使用的是

标签完成的，我们完全可以使用2016-11-22来实现。(我们也可以使用 标签实现。)

可见，实现一个效果可以通过多种途径，但是建议使用CSS样式，这样可以将内容与表现分离，方便修改。

上边的代码稍稍改动一下：

... ...

*{margin:0 auto;}

.bold{font-weight: bold;}

... ...

... ...

在这里我们加了一个样式的定义，只需要在要加粗的标签上使用class="bold"即可进行加粗，而不必去替换标签或添加标签。具体CSS的使用这里就不进行叙述了。

通过这样的方式(代码在这里)，我们很轻松就可以得到这样的效果：

table