表格标签

表格标签

table

边界：border

实线

单位都是px
cellpadding：内容据边框的距离
cellspacing：边框的宽度大小

颜色属性

背景颜色：bgcolor="可以在网上找对应颜色的对应数据"

去掉表格上下边框，边框颜色

<!--
    style="border-bottom:none"    去掉下边框
    top    去掉上边框
    边框颜色：bordercolor="#66B3FF"
-->
<table style="border-bottom:none" style="border-top:none" bordercolor="#66B3FF">

<html>
    <head>
	    <title>表格标签学习</title>
		<meta charset="UTF-8"/>
	</head>
    <body>
	    <h3>表格标签</h3>
		<hr />
        <!--
             table表示一个表格
			    tr指一行,在此设置行高及改行所有单元格的高度
			       td指一个单元格，有多少个td就有几列，默认居左不加黑显示
			       th声明一个单元格，默认居中加黑显示

             注：1. 单元格的宽度即列宽，高度即行宽
                2. 修改第一行的行宽及高度即修改了整个表格的
        -->
        
        <!--
               边界：border
               画出边框， 默认根据数据的多少定义表格的大小
               若要设置表格大小，在table中添加width  height来定义宽高
        -->
        
        <!--
               实线
               在table中加cellpadding和cellspacing，单位都是px
               cellpadding：内容据边框的距离
               cellspacing：边框的宽度大小
        -->
		<table border="1px"  cellpadding="0"  cellspacing="0">
		    <tr height="50px">
			    <th width="100px">科目</th>
			    <th width="100px">分数</th>
			    <th width="100px">级别</th>
			    <th width="100px">说明</th>
			</tr>
		    <tr height="50px">
			    <td>java</td>
			    <td>100</td>
			    <td>8</td>
			    <td>面向对象编程</td>
			</tr>
		    <tr  height="50px">
			    <td>c</td>
			    <td>100</td>
			    <td>8</td>
			    <td>面向过程编程</td>
			</tr>
		</table>
	</body>
</html>

合并表格

合并单元格

列合并用colspan
行合并用rowspan

<html>
    <head>
	    <title>表格标签学习</title>
		<meta charset="UTF-8"/>
	</head>
    <body>
		
		<h3>合并单元格</h3>
		<hr />
		<!--
		    合并单元格
			1.先找到单元格在源码中的位置
			2.列合并用colspan="合并的单元格个数"
			  行合并用rowspan="合并的单元格个数"
			3.把其他多余的单元格删掉
			
			注：合并单元格本质是一个单元格占多个单元格的位置，其他的删掉
			
			首先写一个规整的表格，再继续进行以上操作，一步一步来
		-->
        
		<table border="1px">
		    <tr height="35px">
			    <td width="100px"></td>
			    <td width="100px"></td>
			    <td width="100px"></td>
			    <td width="200px" colspan="2"  rowspan="2"></td>
			</tr>
			<tr height="35px">
			    <td colspan="2"></td>
			    <td></td>
			</tr>
			<tr height="35px">
			    <td></td>
			    <td></td>
			    <td rowspan="2"></td>
			    <td></td>
			    <td></td>
			</tr>
			<tr height="35px">
			    <td></td>
			    <td></td>
			    <td></td>
			    <td></td>
			</tr>
		</table>
	</body>

</html>
posted @ 2021-10-21 19:47  valder-  阅读(214)  评论(0)    收藏  举报