HTML初级教程（三）

最新推荐文章于 2024-10-07 22:08:09 发布

菜菜的泡泡

最新推荐文章于 2024-10-07 22:08:09 发布

阅读量89

点赞数 1

文章标签： html html5 程序人生经验分享

本文链接：https://blog.csdn.net/paopaotui/article/details/105187288

版权

表格的制作相关

建立一个表格，将用到新的标签<table>...</table>,<tr>...</tr>,<td>...</td>其主体结构如下🎊

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

我们把表格中的内容输进去，然后------
上代码！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>表格建立</h3>
		<table>
			<tr>
				<td></td>
				<td>第一列</td>
				<td>第二列</td>
				<td>第三列</td>
			</tr>
			<tr>
				<td>第一行</td>
				<td>A</td>
				<td>B</td>
				<td>C</td>
			</tr>
			<tr>
				<td>第二行</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
			</tr>
		</table>
	</body>
</html>

这样我们就建立起了一个简单的表格👇👇👇

不是说表格吗？表呢？格呢？

我们只要为<table>...</table>添加属性就可以解决此问题。

<table border="1px">

运行如下

看着还时有些不对，如果我想要由实线画出的表格呢🤔
继续添加属性💖

<table border="1px" cellspacing="0">

这里的cellspacing表示单元格间隙，运行结果如下
实心表格
补充
此时的列宽由单元格内字数决定，如果想统一宽度，要为每一列设定宽度 width=" "✌ 同时我们可以看到，单元格的文字是左对齐的，要想改变对齐方式，可以添加 align=" "属性，表对齐方式。

改后代码👇

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>表格建立</h3>
		<table border="1px" cellspacing="0">
			<tr>
				<td width="100px" align="center"></td>
				<td width="100px" align="center">第一列</td>
				<td width="100px" align="center">第二列</td>
				<td width="100px" align="center">第三列</td>
			</tr>
			<tr>
				<td width="100px" align="center">第一行</td>
				<td width="100px" align="center">A</td>
				<td width="100px" align="center">B</td>
				<td width="100px" align="center">C</td>
			</tr>
			<tr>
				<td width="100px" align="center">第二行</td>
				<td width="100px" align="center">E</td>
				<td width="100px" align="center">F</td>
				<td width="100px" align="center">G</td>
			</tr>
		</table>
	</body>
</html>

运行结果🎊
在这里插入图片描述
这里我们提出一种更方便的方法😏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>表格建立</h3>
		<table border="1px" cellspacing="0">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<tr align="center">
				<td ></td>
				<td>第一列</td>
				<td>第二列</td>
				<td>第三列</td>
			</tr>
			<tr align="center">
				<td>第一行</td>
				<td>A</td>
				<td>B</td>
				<td>C</td>
			</tr>
			<tr align="center">
				<td>第二行</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
			</tr>
		</table>
	</body>
</html>

只需对每个<tr>...</tr>增加属性即可完成中心对齐。在表格头部添加col标签即可设定宽度（每个col管理一列）
升级
单元格的合并👀
上面我们所说的表格只是整齐的表格，而在生活中很少见到这样的表格，此时就需要对单元格的合并有所了解

行合并colspan="x" 其中x表示占几个单元格的宽度
列合并rowspan="x" 同上👆

继续上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>表格建立</h3>
		<table border="1px" cellspacing="0">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<tr align="center" >
				<td rowspan="3">表格</td>
				<td >第一列</td>
				<td>第二列</td>
				<td>第三列</td>
			</tr>
			<tr align="center">
				<td colspan="2">A</td>
				<td>B</td>
			</tr>
			<tr align="center">
				<td>E</td>
				<td>F</td>
				<td>G</td>
			</tr>
		</table>
	</body>
</html>

注意代码改动的部分，它使得表格变成了这样👇👇

更方便的标签
以上使用的col标签可以使用colgroup标签来代替：
<colgroup span=''4" width="100px">表示将前四列作为一组，宽度均为100px👌
同时<th>...</th>约等于加粗并居中的<td>...</td>