您的位置：首页 > Web前端 > HTML

HTML高级标签之表格标签

2016-01-17 14:01 651 查看

前面学习了一下HTML的经常使用标签, 今天開始高级标签之路!

一.表格标签

1.作用: 创建一张表格

2.各属性作用:

<table cellspacing="0" cellpadding="0"></table> 

<caption> </caption> 

<td colspan="1" rowpan="3"></td> 

<th></th> 

3.代码演示样例:

<!DOCTYPE html>
<html>
<head>
<title>表格的应用</title>

<meta charset="utf-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
<a href="Main.html">返回主页</a>

<!-- table: 表格标签. cellspacing:单元格边距. cellpadding:单元格间距 -->
<table border="1" width="400" align="center" cellspacing="0" cellpadding="0">
<caption align="center"> <!-- caption: 置于table标签内部, <tr>标签之前, 未设置特定的位置时,会随着表格的移动而移动 -->
<h1>我的表格</h1>
</caption>
<tr>
<th>编号</th> <!-- 与<td>标签唯一不同: 加粗居中 -->
<th>姓名</th>
<th>性别</th>
<th>职务</th>
<th>手机</th>
</tr>

<tr>
<td>1</td>
<td>老大</td>
<td>男</td>
<td>董事长</td>
<td>18910504201</td>
</tr>

<tr>
<td>2</td>
<td>老二</td>
<td colspan="1" rowspan="3" align="center">女</td> <!-- colspan: 规定单元可横跨的列数. rowspan: 规定单元格可横跨的行数,
这两种属性使用时, 要将被合并的单元格删除, 否则会出现单元
格被挤出 -->
<td>总经理</td>
<td>133111111111</td>
</tr>

<tr>
<td>3</td>
<td>老三</td>
<td colspan="1" rowspan="2" align="center">副总</td>
<td>13322222222</td>
</tr>

<tr>
<td>4</td>
<td>老四</td>
<td>13333333333</td>
</tr>

<tr>
<td>5</td>
<td>老五</td>
<td>男</td>
<td>总监</td>
<td>13344444444</td>
</tr>
</table>
</body>
</html>

4.执行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航