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、需求

Day1_HTML_表格_border

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

一个表格由行组成

合并单元格


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>