表格表格,要先建立表,然后依次更改,慢慢形成个人简历。
建表关键代码是:
<tr>
<td></td>
<td></td>
</tr>
把它带入html5中,加入一点点细节,就能变成如下样子。
代码:
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>基础练习练习</title>
</head>
<body>
<table bgcolor="black" width="800px" height="400px" align="center" cellspacing="1px">
<caption>
<h1 align="center">细线表格基础练习1</h1>
</caption>
<tr align="center" bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
我是用bgcolor=“black”,把表全变黑,然后用bgcolor="white"抠出白色格子,当然,也可以用边框,看个人喜欢,不过我的麻烦点,需要写多处代码。
width="800px"是设置表格的宽, height="400px"是设置表格的高, align="center"是使表格居在页面的中央,td中的align=“center”,则是设置框内内容居中, cellspacing=“1px"设置线的大小。
页面展示:
当我们做出如上图片,就可以进行下一步了–表格合并。
colspan=”“是左右合并,rowspan=”"是上下合并,“”中填写的是合并表格的个数。
加一点点细节就得到如下代码:
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>基础练习练习</title>
</head>
<body>
<table bgcolor="black" width="800px" height="400px" align="center" cellspacing="1px">
<caption>
<h1 align="center">表格合并练习2</h1>
</caption>
<tr align="center" bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="white">
<td colspan="2"></td>
<!--td></td-->
<td></td>
</tr>
<tr align="center" bgcolor="white">
<td></td>
<td rowspan="2"></td>
<td></td>
<tr align="center" bgcolor="white">
<td></td>
<!--td></td-->
<td></td>
</tr>
</table>
</body>
</html>
多余的td可以去掉,节省代码,上面是为了更直观看清,所以用符号隔开。
得到网页为: