码迷,mamicode.com
首页 > Web开发 > 详细

HTML高级标签之表格标签

时间:2015-04-01 13:29:36      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:html   web app   标签   

 前面学习了一下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.代码示例:

<!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   web app   标签   

原文地址:http://blog.csdn.net/anig2014/article/details/44804201

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!