HTML5表格创建合并及属性应用

最新推荐文章于 2024-03-12 13:18:47 发布

大海里全是水

最新推荐文章于 2024-03-12 13:18:47 发布

阅读量695

点赞数 1

分类专栏： HTML5学习笔记文章标签： html5 css

本文链接：https://blog.csdn.net/m0_46670811/article/details/109906941

版权

HTML5学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.实例加注释

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签学习</title><br>
<style>
h4{
	color:red;


}


</style>

	<!-- 
    	表格标签学习：
        		table：声明一个表格
                	tr：声明一个行(行高即所有单元格的宽度
                    			 单元格宽即列宽)
                    
                    			
                    		
                    	th:声明一个单元格，表头格，默认居中加黑显示
                        td:声明一个单元格，默认居左显示原始数据
                 
                 属性:
                    border:给表格添加边框，单位:px
                    width:设置表格宽度
                    height:设置表格高度
    		    cellpadding:设置内容居边框的距离
                    cellspacing:设置边框的大小
                
               单元格合并：
               		第一步：
                    	确保表格是一个规整的表格
                    第二步：
                     	根据要合并的单元格，找到其源码位置
                    第三步：
                    	行合并：在要合并的单元格中的第一个单元格中的第一个单元格上使用属性 rowspan = "要合并的单元格个数" ,并删除其他要合并的单元格完成合并
                        列合并：：在要合并的单元格中的任意一个单元格中的第一个单元格上使用属性  colspan = "要合并的单元格个数"，并删除要合并的其他单元格
    
    
    -->
	
</head>

<body>
<h4>表格标签的常用属性及设置学习</h4>

<hr />

<table  border="1px" cellpadding="10px" cellspacing="0">
		  <tr  height="50px">
		    <th width="100px">姓名</th>
		    <th width="100px">班级</th>
		    <th width="100px">学号</th>
  </tr>
		  <tr>
		    <td>王羲之</td>
		    <td>233</td>
		    <td>666</td>
  </tr>
		  <tr>
		    <td>朱熹</td>
		    <td>244</td>
		    <td>777</td>
  </tr>
</table>

<hr />

<h4>合并单元格实例</h4>


<table  border="1" cellspacing="0">
  <tr  height="200">
    <td width="100"  rowspan="2">&nbsp;</td><!-- 行合并  -->
    <td width="100">&nbsp;</td>
    <td width="100">&nbsp;</td>
    <td width="200" colspan="2">&nbsp;</td><!-- 列合并  -->
 
  </tr>
  <tr>
   
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>