HTML5基础之-表格标签

最新推荐文章于 2024-06-02 23:26:49 发布

bruce_suxin

最新推荐文章于 2024-06-02 23:26:49 发布

阅读量414

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： HTML5 Web前端 UI设计网页设计静态网页设计

本文链接：https://blog.csdn.net/bruce_suxin/article/details/52862754

版权

HTML+CSS+JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

表格标签

笔记显示效果：

以上效果，下面是代码加注释：

<!doctype html><!--声明兼容所有浏览器的-->
<html>
    <head>

	    <meta http-equiv="Content-Type"					      content="text/html;charset=GBK">
       	<title>HTML标签的特殊符号</title><!--标题-->
	    <meta name="Keywords" content="关键词，关键词,关键词">   
		 		
	</head>   


     <body>
	   <ul>
	     <li>*表格标签（**重要的标签**）</li>
	     <li> 可以对数据进行格式化，使得数据更加的清晰，显著。  
	   </ul>
       <br/><br/>
	   <hr size="5" color="red"/>
       表格标签 ：<br/>
	   <table></table>
	   <br/>
 
	   **在table里面有<tr></tr>表示行<br />
	     **在tr里面有<td></td>表示列(表示单元格)<br />
		**操作技巧:<br/>
            -首先数有多少行，每行里面有多少个单元格。<br/>
		    --border:表格线<br/>
		    --bordercolor：表格线颜色</br>
		    --cellspacing:单元格的距离</br>
		     --width：表格的宽度</br>
		     --height:表格的高度</br><br/><br />

        **在table里面<tr></tr>
               --设置显示方式 align：（left，center，right）<br/>
			 在-td-有同样的属性，--th--也可以表示单元格<br/>
			 **这里使用=小红居右

           **th标签:<br/>
		        可以居中和加粗<br/><br/>

		   **表格标题：<br/>
		         <caption>人员信息</caption><br/><br/>

		  <table border="1" bordercolor="red"  cellspacing="0" width="400" height="150"><!--cellspacing=""设置间隙，height=""设置高度，width=""设置宽度--><br/><br/><br/>
		      
		     <caption>人员信息(这是标题标签caption的效果)</caption>

			  <tr align="center">
			      <td>姓名</td>
			      <td>性别</td>
				  <td>年龄</td>
			  </tr>

		      <tr align="center">
			       <td>小明</td>
				   <td>男</td>
			       <td>15</td>
			  </tr>		

			  <tr align="center">
				   <td align="right">小红</td>
				   <td>女</td>
				   <td>15</td>		  
 			  
			  </tr>
		      <tr align="center">
			       <td>小军</td>
			       <td>男</td>
			       <td>15</td>
			  
			  </tr>	
			   
		</table>
                 <br/>
                 <br/>
               <hr size="5" color="red"/>
                <br/>
                <br/>
         **合并单元格：
	      --rowspan跨行。
	      --colspan跨列。
        <table border="1" bordercolor="red"  cellspacing="0" width="400" height="150"> <br/><br/><br/>
		      
		     <caption>人员信息(这是标题标签caption的效果)</caption>
			
			 <tr align="center">
			      <td colspan="3">人员信息</td>
			     
			  </tr>

			 
			  <tr align="center">
			      <td>姓名</td>
			      <td>性别</td>
			      <td>年龄</td>
			  </tr>

		          <tr align="center">
			       <td>小明</td>
			       <td>男</td>
			       <td>15</td>
			  </tr>		

			  <tr align="center">
				<td>小红</td>
				<td>女</td>
				<td>15</td>		  
 			  
			  </tr>

		          <tr align="center">
			       <td>小军</td>
			       <td>男</td>
			       <td>15</td>
			  
			  </tr>	
			  
		 	</table>		 
 
		  <hr size="5" color="red"/> 
		  <br/>
		  <br/>
		  <br/>

		  <table border="1"  bordercolor="red" cellspacing="0" width="400" height="150">
              <caption>人员信息(这是标题标签caption的效果)</caption>
			
			  <tr align="center">
			      <td colspan="3">人员信息</td>
			  </tr>

			 
			  <tr align="center">
			      <td>姓名</td>
			      <td>性别</td>
				  <td>年龄</td>
			  </tr>

		      <tr align="center">
			       <td>小明</td>
				   <td>男</td>
			       <td rowspan="3">15</td><!--跨行操作在这里-->
			  </tr>		

			  <tr align="center">
				   <td>小红</td>
				   <td>女</td>
			  </tr>

		      <tr align="center">
			       <td>小军</td>
			       <td>男</td>
			   </tr>	
			  
		 	</table>	

	 
	</body>
</html>

这里写的有点乱不要见怪。