HTML：复杂表格制作
2016-12-06 本文已影响331人
Josaber
我是标题
简单表格
表格的制作可以通过<table><tr><td><th><caption>等标签的组合来构造。这样一段HTML：
<table>
<tr>
<th>row0.col1</th>
<th>row0.col2</th>
</tr>
<tr>
<td>row1.col1</td>
<td>row1.col2</td>
</tr>
<tr>
<td>row2.col1</td>
<td>row2.col2</td>
</tr>
</table>
可以得到这样的表格：
table
跨行/列表格制作
如果想制作复杂的跨行或列的表格就需要用到<td>的rowspan和colspan属性了。详细使用请参考W3School提供的示例。
那么，如果我们要做一个这样的表格：
table
分析一下：
"购物车"是表格的标题，可以使用<caption>标签；
表格中有跨行跨列的单元格，可以使用colspan和rowspan属性；
另外，2016-11-22这一格中是加粗的，我们可以使用样式font-weight:bold;，当然也可以使用<th>标签完成；
表格文字与边框之间的距离可以使用padding来完成。
我的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css">
*{margin:0 auto;}
td, th{padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px;}
</style>
</head>
<body>
<table border="1">
<caption>购物车</caption>
<tbody align="center">
<tr>
<td rowspan="2">名称</td>
<th colspan="2">2016-11-22</th>
<td rowspan="2">小计</td>
</tr>
<tr>
<td>重量</td>
<td>单价</td>
</tr>
<tr>
... ...
</tbody>
</table>
</body>
</html>
详细代码请戳这里。
当然，在这里2016-11-22这一单元格使用的是<th>标签完成的，我们完全可以使用<td style="font-weight:bold;">2016-11-22</td>来实现。（我们也可以使用<b>标签实现。）
可见，实现一个效果可以通过多种途径，但是建议使用CSS样式，这样可以将内容与表现分离，方便修改。
上边的代码稍稍改动一下：
... ...
<style type="text/css">
*{margin:0 auto;}
.bold{font-weight: bold;}
... ...
</style>
... ...
在这里我们加了一个样式的定义，只需要在要加粗的标签上使用class="bold"即可进行加粗，而不必去替换标签或添加<b>标签。具体CSS的使用这里就不进行叙述了。
通过这样的方式（代码在这里），我们很轻松就可以得到这样的效果：
table
