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

我是标题

简单表格

表格的制作可以通过

可以得到这样的表格：

table

跨行/列表格制作

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

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

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这一单元格使用的是

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

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

... ...

*{margin:0 auto;}

.bold{font-weight: bold;}

... ...

... ...

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

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

table