以下操作是在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>
下面就是做好的表格: