Html表格制作

HTML表格制作
@ouland @kayism @litterbugs

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

我们要用到的工具

Notepad++/Notepad/Vi/Emacs/Textmate/Netbeans/Eclipse/…/纯文本编辑
器

把原稿复印一下，画画格线

Excel/OpenOffice之类

不推荐使用Dreamweaver之类

表格基础
<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>

单元格横向合并
colspan=“n”

<tr>
<td colspan=“2”></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td colspan=“2”></td>
<td></td>
</tr>

单元格纵向合并
rowspan=“n”

<tr>
<td rowspan=“2”></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>…</tr>

单元格纵向合并
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>

几个要注意的问题
• 宽度指定

A B C D
E
F

X
• 文字越界处理
word-wrap: break-word;
overflow: hidden;

关于样式的一些补充
<table cellspacing="0" cellpadding="0">…</table>

cellspacing 属性 cellpadding 属性
规定单元格之间规定单元边沿与
的空间。其内容之间的空
白。

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

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

不赞成使用的标签和属性

Html表格制作

More Related Content

Recently uploaded (10)

Featured (20)

Html表格制作