html table表格 - 美女信息
2019-01-20 本文已影响35人
Devops海洋的渔夫
仅供学习，转载请注明出处
table 表格
1、<table>标签：声明一个表格，它的常用属性如下：
- border属性 定义表格的边框，设置值是数值
- cellpadding属性 定义单元格内容与边框的距离，设置值是数值
- cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
- align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
2、<tr>标签：定义表格中的一行
3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
- align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
- valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
- colspan 设置单元格水平合并，设置值是数值
- rowspan 设置单元格垂直合并，设置值是数值
表格制作练习：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="0">
<!-- 表头字段 -->
<thead>
<!-- 水平合并 -->
<tr>
<th colspan="5">美女信息</th>
</tr>
</thead>
<!-- 表格内容 -->
<tbody>
<tr>
<td>姓名</td>
<td> </td>
<td>性别</td>
<td> </td>
<!-- 垂直合并，放入图片 -->
<td rowspan="5">
<img src="http://pic1.win4000.com/pic/9/a3/11f8259a0e.jpg" width="120px" >
</td>
</tr>
<tr>
<td>民族</td>
<td></td>
<td>出生日期</td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>健康情况</td>
<td></td>
</tr>
<tr>
<td>籍贯</td>
<td></td>
<td>学历</td>
<td></td>
</tr>
<tr>
<td>电子信箱</td>
<td></td>
<td>联系电话</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
关注微信公众号，回复【资料】、Python、PHP、JAVA、web，则可获得Python、PHP、JAVA、前端等视频资料。
