HTML高级标签之表格标签
2015-04-01 11:10
375 查看
前面学习了一下HTML的常用标签, 今天开始高级标签之路!
一.表格标签
1.作用: 创建一张表格
2.各属性作用:
<table cellspacing="0" cellpadding="0"></table> <!--表格标签 cellspacing:单元格边距. cellpadding: 单元格间距-->
<caption> </caption> <!--caption: 置于table内部,<tr>标签之前, 未设置特定位置时, 会随着表格的移动而移动 -->
<td colspan="1" rowpan="3"></td> <!--colspan: 规定单元格可横跨的列数. rowpan: 规定单元格可横跨的行数. 注意: 这两种属性使用时, 要将被合并的单元格删除, 否则会出现单元格被挤出-->
<th></th> <!--与<td>标签区别: 加粗居中-->
3.代码示例:
4.运行结果
一.表格标签
1.作用: 创建一张表格
2.各属性作用:
<table cellspacing="0" cellpadding="0"></table> <!--表格标签 cellspacing:单元格边距. cellpadding: 单元格间距-->
<caption> </caption> <!--caption: 置于table内部,<tr>标签之前, 未设置特定位置时, 会随着表格的移动而移动 -->
<td colspan="1" rowpan="3"></td> <!--colspan: 规定单元格可横跨的列数. rowpan: 规定单元格可横跨的行数. 注意: 这两种属性使用时, 要将被合并的单元格删除, 否则会出现单元格被挤出-->
<th></th> <!--与<td>标签区别: 加粗居中-->
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.运行结果
相关文章推荐
- HTML高级标签之表格标签
- HTML高级(表格标签)
- HTML高级(表格标签)
- HTML高级标签(1)————表格标签
- html工作中表格<tbody>标签的使用技巧
- NO.11 HTML之表格标签中最后一个知识点---行列合并
- Chapter 1. HTML---标签、表格
- HTML&CSS 高级表格 可访问性进阶
- HTML高级(分区标签)
- html中meta标签link标签无序有序列表表格表单
- HTML的<table>标签基础 - HTML 表格
- HTML高级标签(2)————窗口分帧(2)————后台管理页面
- html 常用标签[3]-表格
- HTML高级标签(2)————窗体分帧(2)————后台管理页面
- html列表、表格、超链、字体标签————web前端分享2
- HTML <tbody> 标签---带有 thead、tbody 以及 tfoot 元素的 HTML 表格
- Html标签使用——文字、列表、表格、超链接
- html基础-图片标签、表格的属性、链接的属性及链接的分类、name定义锚点的名称、网页的自动刷新、基本字符
- html表格、表单元素、img标签、图像映射技术、html4引入flash
- HTML-列表,表格与超链接标签使用方法