<!--table标签的使用
表格的表头：<th></th> 默认加粗，单元格居中
<常用属性>
1 border:给表格添加边框。
当border属性增大时，只有外围框线增加，单元的边框始终为1px
2 bordercolor=“” 边框颜色
3 width，height：边框的宽高
4 cellspacing：单元格与单元格之间的间隙距离。
当你的cellspacing=“0”，只会使单元格的间隙为0.但不会合并边框线。
表格边框合并：style="border-collapse:collapse;"，无需再写cellapsing=“0”
（注：在h5中并不支持此属性，但是仍可使用）
5 cellpadding：每个单元格中的内容与边框线的距离。
6 align：表格在屏幕的左中右位置显示，left center right
注意：给表格加上align颜色，相当于让表格浮动 。会直接打破表格后面元素的原有排列方式
7 background：background=“image/computer.jpg"设置背景图片等同于
style=”background-image：“；且背景图会覆盖背景色
8 backgroundcolor：背景色 等同于style=“bakcground-color；”-->
<!--tr和td相关的属性
1 width和height：单元格的宽高
2 bgcolo：单元格的背景颜色
3 align：left center right 单元格的文字，水平对齐方式
4 valign：top center bottom 单元格中的文字，垂直对齐方式
5 nowrap=“nowrap”单元格中文字不换行
注意：
1：当表格属性与行属性冲突时，以行属性为准（近者优先，就近原则）
2：表格的align属性，是控制表格自身在浏览器的显示位置；
行和列的align属性，是控制单元格中文字在单元格中的对齐方式
3：表格的align属性，并不影响表格内，文字的水平对齐方式
tr的align或者valign属性，可以控制一行中所有单元格的水平或者垂直对齐方式-->
代码实现部分：
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="2">
<tr>
<td>手机充值</td>
<td>IP卡</td>
<td>网游</td>
</tr>
<td>移动</td>
<td>联通</td>
<td>电信</td>
</table>
<br/>
<table>
<tr>
<th>姓名</th>
<th>学号</th>
<th>数学成绩</th>
<th>语文成绩</th>
<th>英语成绩</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>100</td>
<td>120</td>
<td>120</td>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>100</td>
<td>120</td>
<td>120</td>
</tr> <tr>
<td>1001</td>
<td>张三</td>
<td>100</td>
<td>120</td>
<td>120</td>
</tr>
</table>
<!--跨行跨列的表格制作-->
<!--rowspan 跨行
colspan 跨列-->
<table border="1">
<tr>
<td>第一行第一列</td>
<td colspan="3">第一行第二列</td>
</tr>
<tr>
<td rowspan="3">第二行跨三列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
</tr>
<tr>
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
</tr>
<tr>
<td>第四行第二列</td>
<td>第四行第三列</td>
<td>第四行第四列</td>
</tr>
</table>
<br/>
<hr/>
<table border="1">
<tr>
<td colspan="4">电子产品</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="3">1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<hr/>
<hr/>
<table border="1">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</table>
<br/>
<table border="1" width="400px"height="200px"align="center">
<tr>
<td rowspan="6"></td>
<td rowspan="3"></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<br/>
<br/>
<table border="1"width="400px"height="200px">
<caption>我是标题头！</caption>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
