第六章 使用表格
表格更多的用在网页布局上，很多网页都是以表格布局的
6.1 创建表格
6.1.1 表格的基本构成
表格基本构成：行、列、单元格
表格：<table>
行：<tr>
单元格：<td>
- 行：表格的水平间隔
- 列：表格的垂直间隔
- 单元格：表格的行列相交的区域
语法：
<table>
<tr>
<td>单元格文字</td>
<td>单元格文字</td>
... ...
</tr>
<tr>
<td>单元格文字</td>
<td>单元格文字</td>
... ...
</tr>
</table>eg：
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<table>
<tr>
<td>(1,1)</td><td>(1,2)</td><td>(1,3)</td>
</tr>
<tr>
<td>(2,1)</td><td>(2,2)</td><td>(2,3)</td>
</tr>
<tr>
<td>(3,1)</td><td>(3,2)</td><td>(3,3)</td>
</tr>
</table>
<hr>
<dl><!--定义列表嵌套表格-->
<dt>九宫图</dt>
<dd>
<table>
<tr>
<td>(4)</td><td>(9)</td><td>(2)</td>
</tr>
<tr>
<td>(3)</td><td>(5)</td><td>(7)</td>
</tr>
<tr>
<td>(8)</td><td>(1)</td><td>(6)</td>
</tr>
</table>
</dd>
</dl>
</body>
</html>
运行结果：
6.1.2 设置表格标题 caption
可以用<caption>来设置标题单元格，表格的标题一般位于整个表格第一行，一个<table>表格只能含有一个表格标题。
语法： <caption>title</caption>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果：
提示：<caption>标记创建表格标题的好处是标题定义包含在表格内，若表格移动或在HTML中重定位，标题会随着表格相应地移动。
6.1.3 表头 th
表头<th>是单元格<td>的一种变体，实质上仍然是一种单元格。一般用在第一行，第一列，表明这一行或这一列的内容类别。一般情况下，浏览器会以粗体和居中的样式显示<th>元素中的内容
语法：
<table>
<tr><!--第一行设置表头-->
<th>姓名</th>
<th>XXX</th>
...
</tr>
<tr>
<td>XXX</td><td>XXX</td><td>XXX</td>
</tr>
</table>说明:<th>起始标记必须有，结尾标记可选，也即可有可无
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr>
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
<hr>
<table>
<caption>考试成绩表</caption>
<tr>
<th>姓名 <!--结尾标记可有可无-->
<th>C
<th>java
<th>c++
</tr>
<tr>
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果：
6.2 表格基本属性
表格的宽度，高度，对齐方式等
6.2.1 表格宽度 width
可以使用表格width属性设置表格宽度，若不指定宽度，浏览器会根据表格内容的多少自动调整宽度
语法： <table width="表格宽度">
说明：表格宽度值可以是像素值，也可以是百分比
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="100%">
<caption>考试成绩表</caption>
<tr>
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr>
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果:
6.2.1 表格高度 height
可以使用表格height属性设置表格高度，若不指定高度，浏览器会根据表格内容的多少自动调整高度
语法： <table height="表格高度">
说明：表格高度值可以是像素值，也可以是百分比
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table height="100%">
<caption>考试成绩表</caption>
<tr>
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr>
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>运行结果：
6.2.3 表格对齐方式 align
语法：<table align="对齐方式">
说明：
| 属性值 | 说明 |
| left | 整个表格在浏览器页面左对齐 |
| center | 整个表格在浏览器页面居中对齐 |
| right | 整个表格在浏览器页面右对齐 |
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table height="200" width="200" align="center">
<caption>考试成绩表</caption>
<tr>
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr>
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果:
6.3 表格的边框
border属性来设置表格边框效果，包括边框宽度，颜色
6.3.1 表格边框宽度border
默认情况下不指定border属性，浏览器不显示表格边框
语法：<table border="边框宽度">
eg：
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="100%" border="5">
<caption>考试成绩表</caption>
<tr >
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果：
说明:border属性设置的边框宽度只能影响表格四周边框宽度，而并不能影响单元格之间边框尺寸。建议边框宽度值不超过5
6.3.2 表格边框颜色 bordercolor
默认边框颜色黑色，可以用bordercolor来调节
语法：<table border="大于0的宽度" bordercolor="边框颜色">
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="100%" border="5" bordercolor="red">
<caption>考试成绩表</caption>
<tr >
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果：
6.3.3 内框宽度 cellspacing
cellspacing用来设计表格内部每个单元格之间的间距
语法：<table cellspacing="内框宽度值">
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="100%" border="5" bordercolor="red" cellspacing="10">
<caption>考试成绩表</caption>
<tr >
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果：
6.3.4 表格内文字与边框宽度 cellpadding
默认情况下，单元格里的内容会紧贴着表格边框，这样看上去非常拥挤。可用cellpadding设置单元格边框与单元格里的内容之间的距离。
语法： <table cellpadding="文字与边框距离值">
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20">
<caption>考试成绩表</caption>
<tr >
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果：
6.4 表格背景
表格背景颜色和背景图像
6.4.1 表格背景颜色 bgcolor
表格背景颜色针对整个表格，bgcolor定义的颜色可被行列或单元格定义的背景颜色所覆盖
语法：<table bgcolor="背景颜色">
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20" bgcolor="green">
<caption>考试成绩表</caption>
<tr >
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果：
6.4.2 表格背景图像
语法：<table background="背景图像地址">
说明：地址可以是相对地址或绝对地址
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20" bgcolor="green" background="image/timg.jpeg" background="image/timg.jpeg">
<caption>考试成绩表</caption>
<tr >
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
</table>
</body>
</html>
运行结果：
6.5 表格行属性
表格行也有自己的属性，用这些属性可以对单独一行进行设计，有：行高，行边框颜色，行里内容的对齐方式
6.5.1 高度控制 height
语法：<tr height="本行的高度">
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20">
<caption>考试成绩表</caption>
<tr >
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
<tr height="200">
<td colspan="4">详细备注:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格-->
</tr>
</table>
</body>
</html>
运行结果：
6.5.2 行边框颜色 bordercolor
语法： <tr bordercolor="行边框颜色">
eg：
<html>
<head>
<meta charset="UTF-8">
<title>行边框颜色</title>
</head>
<body>
<table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20">
<caption>考试成绩表</caption>
<tr >
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
<tr height="200" border="5" bordercolor="green">
<td colspan="4">详细备注:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格-->
</tr>
</table>
</body>
</html>
运行结果：
单独给某一行设置边框颜色，不知为何不起作用了？现在的浏览器似乎不支持了
6.5.3 行背景 bgcolor,background
仅仅作用与当前行，且bgcolor颜色可以覆盖<table>的bgcolor或者background属性,不过若更小一级的单元格<td>也定义了背景色，同样会被之覆盖。
语法: <tr bgcolor="行的背景颜色">
说明：默认透明色，即和文档背景颜色相同
eg：
<html>
<head>
<meta charset="UTF-8">
<title>行背景</title>
</head>
<body>
<table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20" bgcolor="gray">
<caption>考试成绩表</caption>
<tr >
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr>
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr>
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
<tr height="200" bgcolor="green">
<td colspan="4">详细备注1:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格-->
</tr>
<tr height="200" background="image/timg.jpeg">
<td colspan="4">详细备注2:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格-->
</tr>
</table>
</body>
</html>
运行结果：
6.5.4 行文字的水平对齐方式 align
<tr>的align属性用来控制表格当前行的水平对齐方式。它不受表格整体对齐方式的影响，却能够被单元格的对齐方式定义所覆盖
语法：<tr align="水平对齐方式">
eg:
<html>
<head>
<meta charset="UTF-8">
<title>行对齐方式</title>
</head>
<body>
<table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20">
<caption>考试成绩表</caption>
<tr>
<th>姓名</th><th>C</th><th>java</th><th>c++</th>
</tr>
<tr align="center"> <!--行也有对齐属性-->
<td>张三</td><td>80</td><td>90</td><td>99</td>
</tr>
<tr align="center">
<td>李四</td><td>70</td><td>80</td><td>90</td>
</tr>
<tr align="center">
<td>王五</td><td>60</td><td>70</td><td>80</td>
</tr>
<tr height="100" align="left">
<td colspan="4">详细备注:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格-->
</tr>
<tr height="100" align="right">
<td colspan="4">日期</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格-->
</tr>
</table>
</body>
</html>
运行结果：
6.5.5 行文字的垂直对齐方式 valign
语法:<tr valign="行垂直对齐方式">
说明:行垂直对齐方式取值有三种，top(文字顶端对齐),middle(文字居中对齐)，bottom(文字底端对齐)
eg：
<html>
<head>
<meta charset="UTF-8">
<title>行文字垂直对齐方式</title>
</head>
<body>
<table width="80%" border="5" bordercolor="red" cellspacing="10" align="center">
<tr valign="middle" height="100">
<td>仙的寿命虽然动辄千年，却依然会有走到尽头的一天，凡人由生到死不过百年，自然会羡慕仙人，但是比起蜉蝣蝼蚁，人又何尝不是寿命长久？ </td>
</tr>
<tr valign="top" height="100">
<td>仙的寿命虽然动辄千年，却依然会有走到尽头的一天，凡人由生到死不过百年，自然会羡慕仙人，但是比起蜉蝣蝼蚁，人又何尝不是寿命长久？ </td>
</tr>
<tr valign="bottom" height="100">
<td>仙的寿命虽然动辄千年，却依然会有走到尽头的一天，凡人由生到死不过百年，自然会羡慕仙人，但是比起蜉蝣蝼蚁，人又何尝不是寿命长久？ </td>
</tr>
</table>
</body>
</html>
运行结果：
6.6 单元格属性
可以自定义设置单元格的各项属性，这些样式将覆盖<table>和<tr>已经定义的样式
6.6.1 单元格大小 width height
默认情况下，单元格的宽度高度会根据内容自动调整，也可以通过width和height设置单元格的宽度和高度
语法：<td width="单元格宽度" height="单元格高度">
说明：单位都是像素
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CC99CC">
<tbody>
<tr>
<td width="150" height="30" bgcolor="#ffffff">产品</td>
<td bgcolor="#ffffff">价格</td>
<td bgcolor="#ffffff">点击率</td>
<td bgcolor="#ffffff">次数</td>
</tr>
<tr>
<td height="20" bgcolor="#ffffff">TOXIC TIDE </td>
<td bgcolor="#ffffff">$860元</td>
<td bgcolor="#ffffff">点击率:</td>
<td bgcolor="#ffffff">620次</td>
</tr>
<tr>
<td bgcolor="#ffffff">飞过 Flutter</td>
<td bgcolor="#ffffff">$375元</td>
<td bgcolor="#ffffff">点击率:</td>
<td bgcolor="#ffffff">630次</td>
</tr>
<tr>
<td height="40" bgcolor="#ffffff">伊比利亚小</td>
<td bgcolor="#ffffff">$1200元</td>
<td bgcolor="#ffffff">点击率:</td>
<td bgcolor="#ffffff">443次</td>
</tr>
<tr>
<td height="20" bgcolor="#ffffff">斯沃琪</td>
<td bgcolor="#ffffff">$580元</td>
<td bgcolor="#ffffff">点击率:</td>
<td bgcolor="#ffffff">495次</td>
</tr>
<tr>
<td height="100" bgcolor="#ffffff"> 手表</td>
<td bgcolor="#ffffff">$380元</td>
<td bgcolor="#ffffff">点击率:</td>
<td bgcolor="#ffffff">700次</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
6.6.2 水平跨度 colspan （合并列单元格）
语法：<td colspan="跨度的列数">
eg：
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CC99CC"> <!--这里定义bgcolor-->
<tbody bgcolor="#ffffff"><!--这里也定义bgcolor(或者每个tr里定义) 从而达到最细边框的目的-->
<tr>
<td colspan="2" align="center">产品</td>
</tr>
<tr>
<td >华为</td>
<td>小米</td>
</tr>
<tr>
<td>联想</td><td>三星</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
6.6.3 垂直跨度rowspan
同上，不过在垂直方向合并单元格罢了 略
语法: <td rowspan="2">类别:</td>
6.6.4 对齐方式align、valign
语法: <td align="水平对齐方式" valign="垂直对齐方式">
说明:水平对齐方式:left，center,right
垂直对齐方式:top，middle,bottom
<!--和行的对齐方式完全一致-->
6.6.5 单元格的背景色
语法:<td bgcolor="背景颜色">
设置单个单元格的颜色
<!--用法和行，表格bgcolor一样-->
6.6.6 单元格的边框颜色 bordercolor
语法:<td bordercolor="颜色">
颜色为16进制数值
<!--用法和行，表格bordercolor一样 不过和行一样 不怎么有效-->
6.6.7 单元格的亮边框 bordercolorlight
单元格亮边框指的是单元格边框向光的部分 bordercolorlight可以设置亮边框颜色
语法:<td bordercolorlight="亮边框颜色">
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table width="500" border="1" align="center" cellpadding="0" cellspacing="1" bgcolor="#ffffff"> <!--这里定义bgcolor-->
<tbody >
<tr>
<td colspan="2" align="center">产品</td>
</tr>
<tr>
<td bordercolorlight="#3300ff">华为</td>
<td>小米</td>
</tr>
<tr>
<td>联想</td><td>三星</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果:
同行边框颜色一样，ubuntu下google浏览器就是不起作用
6.6.8 单元格暗边框 bordercolordark
语法:<td bordercolordark="暗边框颜色">
<!--用法同上-->
6.6.9 单元格的背景图像 background
语法: <td background="图片地址">
eg：
<html>
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table>
<tr>
<td align="center">仙四语录</td>
</tr>
<tr>
<td background="image/dzr.jpg">
玄霄：阴阳两隔便已无解，除非时光倒流，不然一切都只是枉然……
重光：我们为赎罪而活，但是否又不断在犯下新的罪……
衔烛之龙：本尊今日令你得偿所愿，但是等你有朝一日，尝遍世间辛酸之时，或许又会怨恨这样的命运。
壬癸：你们人的情爱本来就没什么道理可言，明知不可为，偏要去做的事，恐怕比天上的星星还多！
道臻：我从未想过，有朝一日，要守住其中一个誓言，便要毁去另一个……
句芒/九天玄女：盘古有训，纵横六界，诸事皆有缘法！凡人仰观苍天，无明日月潜息、四时更替，幽冥之间，万物已循因缘，恒大者则为“天道”。
柳梦璃：人力虽然微渺，可是人的相争之心，却比任何东西都要可怕。
夙玉：容貌美丑，皆是皮下白骨，表象声色，又有什么分别？
婵幽：万灵盛衰，乃是常理，无恒强、无恒弱。
</td>
</tr>
</table>
</body>
</html>
运行结果：
6.7 表格的结构
还有一些标记是用来表示表格结构的，包括表首标记<thead>、表主体标记<tbody>以及表尾标记<tfoot>。这些通过成对出现的标记设置，应用到表格里用于整体规划表格的行列属性。使用这些标记能对表格的一行或多行单元格属性进行统一修改，从而省去了逐一修改单元格属性的麻烦。
6.7.1 表格的表首标签<thead>
用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字垂直对齐方式等。
语法：
<thead bgcolor="背景颜色" align="对齐方式">
......
</thead>说明：thead还有属性bgcolor,align,valign,td,th,tr.但一个<table>只能有一个<thead>标签
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格表首标签</title>
</head>
<body>
<table width="400" border="1" align="center" cellspacing="2" cellpadding="5">
<caption>购物网站列表</caption>
<thead bgcolor="#FF33FF" align="center">
<tr>
<td>产品名称</td><td>类型</td><td>价格</td>
</tr>
</thead>
<tr>
<td>手工编织围巾</td><td>围巾</td><td>50.00元</td>
</tr>
<tr>
<td>音盒MP3</td><td>数码</td><td>1500.00元</td>
</tr>
<tr>
<td>彩石巾手链</td><td>银饰</td><td>90.00元</td>
</tr>
<tr>
<td colspan=3 align="right">欢迎光临本购物网站!</td>
</tr>
</table>
</body>
</html>
运行结果:
6.7.2 表格的表主体标记<tbody>
与表首标签类似，表主体标签用于统一设计表主体部分的样式，标记为<tbody>
语法:
<tbody bgcolor="背景颜色" align="对齐方式">
......
</tbody>
说明:bgcolor,align,valign等一系列样式。一个表中只能有一个<tbody>标记
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表格表首标签</title>
</head>
<body>
<table width="400" border="1" align="center" cellspacing="2" cellpadding="5">
<caption>购物网站列表</caption>
<thead bgcolor="#FF33FF" align="center">
<tr>
<td>产品名称</td><td>类型</td><td>价格</td>
</tr>
</thead>
<tbody bgcolor="green" align="center"><!--可以定义一部分为主体-->
<tr>
<td>手工编织围巾</td><td>围巾</td><td>50.00元</td>
</tr>
<tr>
<td>音盒MP3</td><td>数码</td><td>1500.00元</td>
</tr>
<tr>
<td>彩石巾手链</td><td>银饰</td><td>90.00元</td>
</tr>
</tbody>
<tr>
<td colspan=3 align="right">欢迎光临本购物网站!</td>
</tr>
</table>
</body>
</html>
运行结果:
6.7.3 表格的表尾标记<tfoot>
语法:
<tfoot bgcolor="背景颜色" align="对齐方式">
......
</tfoot>
eg：
<html>
<head>
<meta charset="UTF-8">
<title>表格表首标签</title>
</head>
<body>
<table width="400" border="1" align="center" cellspacing="2" cellpadding="5">
<caption>购物网站列表</caption>
<thead bgcolor="#FF33FF" align="center">
<tr>
<td>产品名称</td><td>类型</td><td>价格</td>
</tr>
</thead>
<tbody bgcolor="green" align="center"><!--可以定义一部分为主体-->
<tr>
<td>手工编织围巾</td><td>围巾</td><td>50.00元</td>
</tr>
<tr>
<td>音盒MP3</td><td>数码</td><td>1500.00元</td>
</tr>
<tr>
<td>彩石巾手链</td><td>银饰</td><td>90.00元</td>
</tr>
</tbody>
<tfoot bgcolor="red" align="right">
<tr>
<td colspan=3 align="right">欢迎光临本购物网站!</td>
</tr>
</tfoot>
</table>
</body>
</html>
运行结果：
第六章小结
6.1创建表格
<html>
<head>
<meta charset="UTF-8">
<title>创建表格</title>
</head>
<body>
<table>
<caption>表格标题</caption>
<th><!---->
<td>类别一</td><td>类别二</td><td>类别三</td>
</th>
<tr><!--行-->
<td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td><!--各列-->
</tr>
<tr>
<td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td>
</tr>
<!--......-->
</table>
</body>
</html>
6.2 表格基本属性
<html>
<head>
<meta charset="UTF-8">
<title>创建表格</title>
</head>
<body>
<table width="表格宽度" height="表格高度" align="表格于页面对齐方式" border="边框宽度12" bordercolor="边框颜色" cellsapcing="内框宽度(内部单元格之间的间距)" cellpadding="表格内文字与边框距离值" bgcolor="表格背景色" background="b表格背景图地址">
XXXXXX
</table>
</body>
</html>
6.5 表格的行属性
<html>
<head>
<meta charset="UTF-8">
<title>创建表格</title>
</head>
<body>
<table>
<tr height=“行高” bordercolor="行边框颜色" bgcolor="行背景色" background="行背景图地址" align="行文字水平对齐方式" valign="行文字垂直对齐方式">
<td></td>
......
</tr>
</table>
</body>
</html>
6.6 单元格属性
<html>
<head>
<meta charset="UTF-8">
<title>创建表格</title>
</head>
<body>
<table>
<tr>
<td width="单元格宽度(由本列最宽的单元格决定)" height="单元格高度(由本行最高的单元格决定)" colspan="横向合并单元格数" rowspan="纵向合并单元格数" align="单元格内文字水平对齐方式" valign="单元格内文字垂直对齐方式" bgcolor="单元格背景色" bordercolor="单元格边框颜色" bordercolorlight="亮边框颜色" bordercolordark="暗边框颜色" background="单元格背景图地址"></td>
......
</tr>
</table>
</body>
</html>
6.7 表格结构
<html>
<head>
<meta charset="UTF-8">
<title>表格表首标签</title>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表首-->
<thead bgcolor="#FF33FF" align="center">
<tr>
<td>产品名称</td><td>类型</td><td>价格</td>
</tr>
</thead>
<!--表主体-->
<tbody bgcolor="green" align="center"><!--可以定义一部分为主体-->
<tr>
<td>手工编织围巾</td><td>围巾</td><td>50.00元</td>
</tr>
<tr>
<td>音盒MP3</td><td>数码</td><td>1500.00元</td>
</tr>
<tr>
<td>彩石巾手链</td><td>银饰</td><td>90.00元</td>
</tr>
</tbody>
<!--表尾-->
<tfoot bgcolor="red" align="right">
<tr>
<td colspan=3 align="right">欢迎光临本购物网站!</td>
</tr>
</tfoot>
</table>
</body>
</html>