表格 -- HTML5

版权声明:本文为博主原创文章,转载请注明。 https://blog.csdn.net/a44496913/article/details/68939761
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格</title>
	<style>
		/* “*” 所有标签*/
		*{
			font-family: 微软雅黑;
		}

		caption{
			font-size: 30px;
			font-weight: bold;
			color: #999;
		}

		
		tr{
			/*单元格内容水平居中*/
			text-align: center;
			/*行高*/
			height: 30px;
		}

		/*边框颜色 表、单元格、表头*/
		table,td,th{
			border-color: #f00;
		}

	</style>

</head>
<body>

	<!-- 表名 -->
	<h1>用户表</h1> 

	<!-- border 边框宽度 -->
	<!-- cellspacing 单元格之间的空隙 -->
	<!-- width=“600px” 表格的宽度 -->
	<!-- width="100%" 浏览器当前宽度 -->
	<!-- height 一般表格不给定高度,由行高确定-->
	<table border="1px" cellspacing="0px" width="100%">

		<!-- 表名,位置居中,一般使用较少 -->
		<caption>用户表</caption>

		<tr>
			<!-- th 表头 -->
			<th>编号</th>
			<th>用户名</th>
			<th>密码</th>
		</tr>

		<!-- tr 行 -->
		<tr>
			<!-- td 列 -->
			<td>1</td>
			<td>user1</td>
			<td>123</td>

		</tr>

		<!-- 列合并 -->
		<tr >
			<td colspan="3">列合并</td>

		</tr>

		<!-- 行合并 -->
		<tr>
			<td rowspan="3">行合并</td>
			<td>user1</td>
			<td>123</td>

		</tr>
		<tr>
			<td>user1</td>
			<td>123</td>

		</tr>
		<tr>
			<td>user1</td>
			<td>123</td>

		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>

		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>

		</tr>

	</table>


</body>
</html>

猜你喜欢

转载自blog.csdn.net/a44496913/article/details/68939761