<!--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>