便捷的html表格制作，合并什么的轻松搞定

1. HTML表格制作
@ouland @kayism @litterbugs

2. 目标
建立各种复杂的表格
不涉及表格的样式

3. 我们要用到的工具
Notepad++/Notepad/Vi/Emacs/Textmate/Netbeans/Eclipse/…/纯文本编辑
器
把原稿复印一下，画画格线
Excel/OpenOffice之类
不推荐使用Dreamweaver之类

4. 表格的基本类型

5. 来看一个例子

6. 表格基础
<tr> <td></td> <td></td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td></td> </tr>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>…</tr>
<tr>…</tr>
</table>

7. 单元格横向合并
colspan=“n”
<tr>
<td colspan=“2”></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan=“2”></td>
<td></td>
</tr>

8. 单元格纵向合并
rowspan=“n”
<tr>
<td rowspan=“2”></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>…</tr>

9. 单元格纵向合并
rowspan=“n” (2)
<tr>
<td></td>
<td rowspan=“2”></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>…</tr>

10. 画格线

11. 方便的工具：excel

12. 几个要注意的问题
• 宽度指定
A B C D
E
F
X
• 文字越界处理
word-wrap: break-word;
overflow: hidden;

13. 关于样式的一些补充
<table cellspacing="0" cellpadding="0">…</table>
cellspacing 属性 cellpadding 属性
规定单元格之间 规定单元边沿与
的空间。 其内容之间的空
白。

14. 关于样式的另一些补充
table {
border-collapse: /* 设置表格的边框是
collapse; 否被合并为一个单一
的边框，还是象在标
} 准的 HTML 中那样分
开显示。 */

15. 关于样式的又一些补充
.title {
border-bottom: 3px double #000000;
margin: 0 auto;
padding: 0;
width: 350px;
}
.title h1 {
letter-spacing: 20px;
margin: 0 -20px 0 0;
}

16. 不赞成使用的标签和属性

17. THX :)