# 表格的标签
# 常用标签
<table>
<tr>
<td>
<th>
<col>
<colgroup>
1
2
3
4
5
6
2
3
4
5
6
# 示例
<table align="center">
<tr>
<td>首页 </td>
<td>课程培训 </td>
<td>教学保障 </td>
<td>免费视频 </td>
<td>公开课 </td>
<td>企业合作 </td>
<td>免就业喜报 </td>
<td>学员天地 </td>
<td>关于千锋 </td>
<td>学员论坛 </td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 合并
合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格）
# 示例
- 合并行单元格(codpan)
<table border="1">
<caption>通讯录</caption>
<tr>
<th>姓名</th>
<th colspan="2">邮箱</th>
</tr>
<tr>
<td>zhang kai</td>
<td>123456@qq.com</td>
<td>123456@163.com</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
- 合并列单元格（rowspan）
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="3">邮箱</th>
<td>123456@qq.com</td>
</tr>
<tr>
<td>123456@163.com</td>
</tr>
<tr>
<td>123456@sina.com</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 格式设置
# 单元格的边框
通过设置"border"属性的值来改变边框
- 普通边框
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 加粗边框
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 特粗边框
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 单元格的对齐
在对应的标签上增加 align 键值(center,left,right)，生效方式为"就近原则"。
- “就近原则”：下方“男的”单元格“left”生效
<table width="300" border="2">
<tr align="right">
<td align="left">男</td>
<td>女</td>
</tr>
</table>
1
2
3
4
5
6
2
3
4
5
6
# 单元格的边距（cellpadding）
<table width="600" border="2" cellpadding="8">
1
2
2
# 单元格间的距离（cellspacing）
<table width="600" border="2" cellspacing="8">
1
# 单元格背景色、图片
在单元格的标签上增加 bgcolor 或者 background，就可以添加背景色或者背景图片
<td align="left" bgcolor='red' >
1
# 表格背景色、图片
在表格的标签上增加 bgcolor 或者 background，就可以添加背景色或者背景图片
<table width="600" border="2" background="pictures\transparent.jpg">
1
2
2
# 表格的嵌套
# 两张表格的嵌套
# 示例
- 一行三列的表格
<table border="1" width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td>**</td>
<td align="center">**</td>
<td align="right">**</td>
</tr>
</table>
</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
*一张父表格，两张子表格 1
<table border=6 bordercolor="##00FFFF" width="100%">
<tbody>
<tr><td>
<table border=5 bordercolor=#ffcc00 width="100%" height=200>
<tbody><tr><td></td></tr></tbody>
</table>
<table border=5 bordercolor=#ffcc00 width="100%" height=200>
<tbody><tr><td></td></tr></tbody>
</table>
</td></tr>
</tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
*一张父表格，两张子表格 2
<TABLE borderColor=#ccffcc width="100%" border=4>
<tbody>
<tr>
<td width="50%">
<TABLE borderColor=#666666 height=300 width="100%" border=4>
<TBODY><TR><TD></TD></TR></TBODY>
</TABLE>
</td>
<td width="50%">
<TABLE borderColor=#666666 height=300 width="100%" border=4>
<TBODY><TR><TD></TD></TR></TBODY>
</TABLE>
</td>
</tr></tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15