<!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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
