以下操作是在HBuilder软件上进行的：
先使用table双标签创建一个表的格式，然后表中的每一行数据都放在tr双标签（table row）中，在同一个tr双标签中的内容代表放在同一行中的数据。然后在表的第一行放置的数据是表头，所以该行中的所有内容都用th双标签（table head）包裹，打印在网页上的表头内容便会被设置成表头类型的数据了。在后面的行中的数据使用td双标签（table data）包裹即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--table表明创建一个表-->
<table>
<!--table row 代表表格中的某一行-->
<tr>
<!--table head 代表该数据是表头类型的形式-->
<th>序号</th>
<th>姓名</th>
<th>手机号</th>
<th>地址</th>
<th>操作</th>
</tr>
<tr>
<!--table data 代表该数据是表中类型的形式-->
<td>1</td>
<td>Kate</td>
<td>1234567890</td>
<td>河南省郑州市</td>
<td>查询 删除</td>
</tr>
<tr>
<td>2</td>
<td>Lucy</td>
<td>1234567890</td>
<td>河南省郑州市</td>
<td>查询 删除</td>
</tr>
</table>
</body>
</html>下面得到的是表的效果，但是该表只是有格式和内容，还没有设置边线，下面再介绍如何设置边线。
先来介绍几个基础操作：
第8行：设置表格的宽度所占空间的百分比
第9行：设置表格边线的颜色,粗细,实虚
第15行：设置表头行之间的空间高度
第16行：设置表头行边线的颜色,粗细,实虚
第20行：设置数据行之间的空间高度
第23行：设置数据行边线的颜色,粗细,实虚
但是如果只是这样设置之后得到的表格会是这样的：
因为我们设置边线的时候是给整个表、所有行都设置了边线，这时这两类边线之间是会有空隙的，所以我们需要加上这样一行：
第10行：设置表格边线和每一行的边线之间没有空隙
得到表格如下：
我们可以看到边线之间的空隙是没了，可是边线变粗了，这是因为取消空隙之后两种边线合在一起了，导致了原边线双倍的粗细，这是需要我们这样设置：
第11行：使表的边线与每一行的边线重叠
得到的表格如下：
除此之外，我们还可以设置每一行中数据所处的位置：
第21行：设置数据行中数据的横向位置，center代表居中
第22行：设置数据行中数据的纵向位置，bottom代表贴底线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table{
width: 90%;
border: black 3px solid;
border-spacing: 0px;
border-collapse: collapse;
}
th{
height: 60px;
border: black 3px solid;
}
td{
height: 50px;
text-align: center;
vertical-align: bottom;
border: black 3px solid;
}
</style>
</head>
<body>
<!--table表明创建一个表-->
<table>
<!--table row 代表表格中的某一行-->
<tr>
<!--table head 代表该数据是表头类型的形式-->
<th>序号</th>
<th>姓名</th>
<th>手机号</th>
<th>地址</th>
<th>操作</th>
</tr>
<tr>
<!--table data 代表该数据是表中类型的形式-->
<td>1</td>
<td>Kate</td>
<td>1234567890</td>
<td>河南省郑州市</td>
<td>查询 删除</td>
</tr>
<tr>
<td>2</td>
<td>Lucy</td>
<td>1234567890</td>
<td>河南省郑州市</td>
<td>查询 删除</td>
</tr>
</table>
</body>
</html>下面就是做好的表格：
1294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
