首页 > Web开发 > 详细

Day1_HTML_表格

时间:2015-08-08 06:52:34      阅读:308      评论:0      收藏:0      [点我收藏+]


6.表格标记


1、知识点

    table: 表格

    属性:border:边框

    width:宽度

    height:高度

    align:表格的对齐方式

    cellpadding:单元格内容到边的距离

    cellspacing:单元格和单元格之间的距离

    bgcolor:背景颜色

    background:背景图片

    bordercolorlight:表格的上,左边框,以及单元格的右,下边框的颜色

    bordercolordark: 表格的右,下边框,以及单元格上,左的边框的颜色

    dir:单元格内容的排列方式 取值:ltr 从左到右, rtl:从右到左

  tr: 行

    属性:dir:

    bgcolor:

  td: 单元格

    属性: align: 内容的横向对齐方式

     valign: 内容的纵向对齐方式 top,middle,bottom

     width: 绝对值或者相对值(%)

     height:单元格的高度

  单元格的合并:

        单元格的属性:

         colspan: 横向合并

      rowspan: 纵向合并

   th: 相当于<td> + <b>

      属性同<td>

  caption: 表格的标题

     属性:align: 取值:left,center,right,top,bottom


  thead

  tbody

  tfoot

     写与不写的区别:

             1. 当表格非常大的时候,如果不写,则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话,那么边下载边显示。 2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了,那么顺序任意,浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容


2、需求

技术分享

固定标签的位置,定位,显示在任意位置

一个表格由行组成

合并单元格


3、实现

 <body>
 <table border = "1" width = "800" height = "100" align = "center" cellpadding = "" cellspacing = "1"
	    bordercolordark = "red" bordercolorlight = "green" bgcolor = "" background = "" dir = "ltr">

		 
		<caption align = "top">学员信息</caption>

		<tbody>
 
		<thead>
		 <tr bgcolor = "#00cc00" >
			   <th>产品</th>
			   <th>行为</th>
               <th> </th>
			   <th>无忧币</th>
			   <th>每天上限</th>
		  </tr>
		  </thead>

		   <tbody>
		   
			   <td bgcolor = "red"  align = "center" rowspan="4">家园</td>
			   <td align = "center" colspan="2" >注册</td>
			   <td align = "center">10</td>
			   <td valign = "bottom"  align = "center">10</td>
		  </tr>
		  <tr>
			   <td rowspan = "2">成龙章子怡</td>
			   <td>58</td>
			   <td>男</td>
			   <td>香港</td>
		  </tr>

				<td bgcolor = "red"  align = "center">家园</td>
			   <td align = "center" colspan="2" >注册</td>
			   <td align = "center">10</td>
			   <td valign = "bottom"  align = "center">10</td>


		  </tbody>

	</table>
 </body>
</html>


本文出自 “与君共勉” 博客,请务必保留此出处http://rickyigoogle.blog.51cto.com/8747999/1682782

Day1_HTML_表格

原文:http://rickyigoogle.blog.51cto.com/8747999/1682782

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!