认识HTML————表格的练习
表格练习
我们来做一下如下图所示的练习
第一步 先完成一个四行三列的表格。这样做的原因是，我们写表格这个写法最简单。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black" cellspacing="1px" width="870px" height="300px" align="center">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
运行如图所示：
第二步 运用合并单元格的属性colspan,再进行删减操作
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black" cellspacing="1px" width="870px" height="300px" align="center">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td colspan="3"></td>
<!--被删减的单元格<td></td>
<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
运行如图所示：
第三步 同第二步方法差不多，只是运用结论不一样。（垂直）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black" cellspacing="1px" width="870px" height="300px" align="center">
<tr bgcolor="white">
<td></td>
<td rowspan="4"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<!--<td></td>-->
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<!--<td></td>-->
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<!--<td></td>-->
<td></td>
</tr>
</table>
</body>
</html>
运行结果如图所示：
第四步 组合代码
先实现部分效果组合部分代码如下图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black" cellspacing="1px" width="870px" height="300px" align="center">
<tr bgcolor="white">
<td></td>
<td ></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td colspan="2"></td>
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<td colspan="2"></td>
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
运行如图所示：
再综合所有代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black" cellspacing="1px" width="870px" height="300px" align="center">
<tr bgcolor="white">
<td></td>
<td ></td>
<td></td>
</tr>
<tr bgcolor="white">
<td ></td>
<td colspan="2" rowspan="2"></td>
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<!--删减的<td colspan="2" ></td>-->
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
运行结果：
快速移动 上下移动
往上移动ctrl+shift+往上键（方向键上）
往上移动ctrl+shift+往下键（方向键下）
快速合并和展开代码
合并：ctrl+- ctrl+shift+-
展开：ctrl++ ctrl+shift++
快速新启一行
shift+enter
