版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
HTML实现表格的核心是table（表格）、tr（行）、td（单元格）。
基础结构
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
效果如下：
复杂结构
合并单元格
依赖colspan和rowspan属性，分别表示跨几列、跨几行.
<table>
<tr>
<th>no</th>
<th>c1</th>
<th>c2</th>
<th>c3</th>
</tr>
<tr>
<td>1</td>
<td colspan="2">r1-c12</td>
<td rowspan="2">r12-c3</td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td colspan="2" rowspan="2">r34-c12</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
</tr>
</table>
| no | c1 | c2 | c3 |
|---|---|---|---|
| 1 | r1-c12 | r12-c3 | |
| 2 | |||
| 3 | r34-c12 | ||
| 4 | |||
边框、行高、间距等样式
有些浏览器渲染时，表格和单元格的边框可能会渲染两条线，可以通过样式
border-collapse:collapse;解决。
有些浏览器中，空单元格的样式渲染会有奇怪的问题，可以将单元格内容设置一个空格(
)来解决。
具体可参考下面文章：
工具
推荐一款可视化编辑、快速生成表格代码的工具：http://www.tablesgenerator.com/html_tables