码迷,mamicode.com
首页 > 其他好文 > 详细

表格标签和表格布局

时间:2016-05-12 15:08:20      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

表格标签

<table> //表格标签:

<tr>    //行标签

<td>    //单元格


http://120.x5.x.x:8080/myhome/mytable.html



表格跨行或者跨列的效果:


跨行:

 <tr>
	<td align="center" colspan="2">北京</td>

    <!--<td align="center">上海</td>-->
 </tr>


跨列:  
<tr>
<!--<td align="center">广州</td>-->
<td align="center" bgcolor="#00ff66">深圳</td>
</tr>



<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
   <center>
      <!--th表示标头-->
      <th>这是一个表格示例</th>
      <!--table表格标签-->
	 <table border="1" width="600" height="50" cellspacing="0" cellpadding="0" bgcolor="#cc00cc">
	 <!--tr行标签 表示行-->
	  <!--td表示一个单元格-->
    <tr>
	<td align="center" rowspan="2">北京</td>

    <td align="center">上海</td>
	</tr>

	<tr>
	<!--<td align="center">广州</td>-->
	<td align="center" bgcolor="#00ff66">深圳</td>
	</tr>

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



跨行 下一个行标签少一个td 少一个单元格


跨列  同一个行标签少一个td 少一个单元格


///////////跨列效果:
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
   <center>
      <!--th表示标头-->
      <th>这是一个表格示例</th>
      <!--table表格标签-->
	 <table border="1" width="600" height="50" cellspacing="0" cellpadding="0" bgcolor="#cc00cc">
	 <!--tr行标签 表示行-->
	  <!--td表示一个单元格-->
    <tr>
	<td align="center" colspan="2">北京</td>

    <!--<td align="center">上海</td>-->
	</tr>

	<tr>
	<td align="center">广州</td>
	<td align="center" bgcolor="#00ff66">深圳</td>
	</tr>

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



使用表格来完成课程表:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <center>
     <th>xxx课程表</th>
	 <table border="1" width="600" height="400" cellspacing="0" cellpadding="0" >
	 <tr>
	     <td colspan="2">时间/星期</td>

		 <td>星期一</td>
		 <td>星期二</td>
		 <td>星期三</td>
		 <td>星期四</td>
		 <td>星期五</td>
		 

	  </tr>
     	 
	   <tr>
	     <td rowspan="4">上午</td>

		 <td>1</td>
		 <td>英语</td>
		 <td>化学</td>
		 <td>语文</td>
		 <td>代数</td>
		  <td>代数</td>
		 

	  </tr
	   <tr>
	    

		 <td>2</td>
		 <td>物理</td>
		 <td>语文</td>
		 <td>英语</td>
		 <td>几何</td>
		  <td>化学</td>
		 

	  </tr
	   <tr>
	    

		 <td>3</td>
		 <td>地理</td>
		 <td>英语</td>
		 <td>代数</td>
		 <td>体育</td>
		  <td>物理</td>
		 

	  </tr
	   <tr>
	    

		 <td>4</td>
		 <td>体育</td>
		 <td>生物</td>
		 <td>几何</td>
		 <td>语文</td>
		  <td>语文</td>
		 

	  </tr
	   <tr>
	     <td rowspan="3">下午</td>

		 <td>5</td>
		 <td>语文</td>
		 <td>历史</td>
		 <td> </td>
		 <td>英语</td>
		  <td>地理</td>
		 

	  </tr
	   
	   <tr>
		 <td>6</td>
		 <td>自习</td>
		 <td>自习</td>
		 <td></td>
		 <td>生物</td>
		  <td>历史</td>
		 

	  </tr
	   <tr>
	   

		 <td>7</td>
		 <td>自习</td>
		 <td>自习</td>
		 <td></td>
		 <td>生物</td>
		  <td>班会</td>
		 

	  </tr
	 </table>
	</center>
 </body>
</html>


表格布局:

表格标签和表格布局

标签:

原文地址:http://blog.csdn.net/zhaoyangjian724/article/details/51363179

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