用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

表格标签使用table

2014-08-04 作者: jun举报

[html]代码库

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>演示表格标签</title>
  </head>
  <body>
	 <!-- 
	 	表格标签使用table
	 	表格的应用:
	 		1、可以划分页面
	 		2、把数据进行格式化显示
	 	表格组成:
	 		表格由行和列组成。
	 		在html中表格有三部分组成:
	 		表格的头
	 		表格体
	 		表格尾
	 	<table>
	 		表格的头 <thead>
	 		表格体<tbody>
	 		表格尾<tfoot>
	 	</table>
	 	
	 	注意:如果使用表格划分页面,只有整个表格加载完成之后,页面数据才会显示出来。
	 		建议可以加上
	 		表格的头 <thead>
	 		表格体<tbody>
	 		表格尾<tfoot>
	 		在加载页面的时候,tbody加载一行页面上就会显示一行。
	 	学习表格最重要的是学习表格体的控制:
	 		表格体中表头部分可以使用th
			表格中的一个使用 tr标签来描述
			表示中的一列(一个单元格)td标签来描述	 	
	  -->
	  
	  <!-- 创建一个三行四列的表格 -->
	  
	  <table align="center" border="1px" width="600px" cellpadding="10px" cellspacing="0px">
	  	<!-- 先创建行 -->
	  	<tr>
	  		<!-- 创建这以行的列 -->
	  		<th>姓名</th>
	  		<th>年龄</th>
	  		<th>住址</th>
	  		<th>电话</th>
	  	</tr>
	  	<tr>
	  		<!-- 创建这以行的列 -->
	  		<td>旺财</td>
	  		<td>22</td>
	  		<td>上海</td>
	  		<td>110</td>
	  	</tr>
	  	<tr>
	  		<!-- 创建这以行的列 -->
	  		<td>小强</td>
	  		<td>19</td>
	  		<td>北京</td>
	  		<td>119</td>
	  	</tr>
	  </table>
	  
	  <br/>
	  <br/>
	  <br/>
	  
	  <!-- 设置跨列的表格 -->
	  <table align="center" border="1px" width="600px" cellpadding="10px" cellspacing="0px">
	  	<!-- 第一行占四列 -->
	  	<tr>
	  		<th colspan="4">登记信息</th>
	  	</tr>
	  	<!-- 先创建行 -->
	  	<tr>
	  		<!-- 创建这以行的列 -->
	  		<th>姓名</th>
	  		<th>年龄</th>
	  		<th>住址</th>
	  		<th>电话</th>
	  	</tr>
	  	<tr>
	  		<!-- 创建这以行的列 -->
	  		<td>旺财</td>
	  		<td>22</td>
	  		<td>上海</td>
	  		<td>110</td>
	  	</tr>
	  	<tr>
	  		<!-- 创建这以行的列 -->
	  		<td>小强</td>
	  		<td>19</td>
	  		<td>北京</td>
	  		<td>119</td>
	  	</tr>
	  </table>
	  
	  <hr/>
	  
	   <!-- 设置跨列和跨行的表格 -->
	  <table align="center" border="1px" width="600px" cellpadding="10px" cellspacing="0px">
	  	<!-- 第一行占四列 -->
	  	<caption>不知道写什么</caption>
	  	<tr>
	  		<!-- 设置跨列的表格 -->
	  		<th colspan="4">学校信息</th>
	  	</tr>
	  	<!-- 先创建行 -->
	  	<tr>
	  		<!-- 设置跨行的表格 -->
	  		<th rowspan="4">传智播客</th>
	  	</tr>
	  	<tr>
	  		<!-- 创建这以行的列 -->
	  		<td>校名</td>
	  		<td>地址</td>
	  		<td>电话</td>
	  	</tr>
	  	<tr>
	  		<!-- 创建这以行的列 -->
	  		<td>北京传智播客</td>
	  		<td>北京西三旗</td>
	  		<td>010-11112222</td>
	  	</tr>
	  	<tr>
	  		<!-- 创建这以行的列 -->
	  		<td>上海传智播客</td>
	  		<td>上海</td>
	  		<td>021-11112222</td>
	  	</tr>
	  </table> 
  </body>
</html>


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...