认识html————细线表格
2019-04-19 本文已影响0人
周行知
细格表格的定义
先观察一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>周行知</td>
<td>29</td>
</tr>
</table>
</body>
</html>
运行结果·如图所示：
现在我们再来看以下代码（注：在表格中不能通过外边距为0来实现细线表格是不靠谱的，因为它是将2条线合并为一条线，所以看上去很不舒服。），代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td>姓名</td>
<td>年龄</td>
</tr>
<tr bgcolor="white">
<td>周行知</td>
<td>29</td>
</tr>
</table>
</body>
</html>
注：bgcolor是背景颜色，人们常说背景墙，其实就是指的背景墙要刷什么颜色油漆做背景。
运行结果如下：
发散练习：大家可以尝试一下，通过border="1"的方式来实现（在表格中不能通过外边距为0来实现细线表格）看看效果能不能达到
总结细线表格制作方式
1.给table标签设置bgcolor.
2.给tr标签设置bgcolor.
3.给table标签设置cellspacing="1px"
