表格练习HTML5

LaoXieyyds

已于 2022-07-21 23:18:53 修改

阅读量526

点赞数 1

文章标签： html5 javascript 前端

于 2022-07-19 11:50:48 首次发布

本文链接：https://blog.csdn.net/LaoXieyyds/article/details/125866271

版权

个人简历表格建立

摘要由CSDN通过智能技术生成

表格表格，要先建立表，然后依次更改，慢慢形成个人简历。

建表关键代码是:

<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>