HTML中的table表格布局

最新推荐文章于 2024-09-20 21:04:52 发布

你笑起来真下饭

最新推荐文章于 2024-09-20 21:04:52 发布

阅读量3.1k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_48854060/article/details/117309819

版权

本文详细介绍了HTML中table表格布局的方法，包括基础用法、表格的合并以及表格的嵌套。通过实例代码展示了如何设置边框、调整大小、设置对齐方式以及使用rowspan和colspan实现单元格合并。此外，还展示了如何在表格内部嵌套新的表格，以创建复杂的布局结构。

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

HTML中的table表格布局

熟练掌握table表格的布局方法，有利于我们今后设计出更加工整美观的页面，是我们学习HTML必不可少的一部分，下面我将列出table表格的几种常用的方法。

一、table表格布局的基础用法

接下来我会用一段简单代码进行演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>职工</title><!-- 网页名称 -->
</head>
<style >
	table,td,th{border:1px solid #000;}
	table{border-collapse:collapse; }
</style><!-- 这里选中td,th统一设置表格的边框粗细border，边框实心solid,边框颜色#000，内外边框是否合并collapse -->
<body><br><br><!-- 下移两格 -->
	<table align="center" border="1px"><!-- align设置表格位置在网页中间，border设置表格的边框线 -->
	    <tr ><!-- 第一行 -->
	    	<th colspan="4">职工信息表</th><!-- th加粗居中 -->
	    </tr><!-- colspan合并第一行四列的格子 -->
		<tr align="center"><!-- 第二行居中 -->
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>职工号</th>
		</tr>
		<tr align="center"><!-- 第三行居中 -->
			<td>张三</td>
			<td>25</td>
			<td>男</td>
			<th>1</th>
		</tr>
		<tr align="center"><!-- 第四行居中 -->
			<td>李四</td>
			<td>26</td>
			<td>男</td>
			<td>2</td>
		</tr>
		<tr align="center"><!-- 第五行居中 -->
			<td>林菲</td>
			<td>24</td>
			<td>女</td>
			<td>3</td>
		</tr>
		<tr align="center"><!-- 第六行居中 -->
			<td>刘铭</td>
			<td>24</td>
			<td>男</td>
			<td>4</td>
		</tr>
	</table>
</body>
</html>

运行结果：

如图，我制作了一个简单的6行4列的表格，内容也比较简单，主要是开头用<style>设置表格边框及边框颜色的部分需要记忆一下关键标签border，collapse。其他的看注释即可明白其含义。

列举几种常用属性及其含义，需要时可直接加入标签进行设置，自己亲手设计敲出来的才算自己的；

border-----------边框

height、width--------高和宽

align----------------对齐方式或位置，可取left right center

bgcolor,backcolor----------背景颜色，背景图片

cellpadding,cellspacing--------表格的边距，表格的间距

二、表格的合并

所需关键属性有rowspan,colspan

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格合并</title>
</head>
<body>
	<table border="1px">
		<tr>
			<td colspan="2">横行合并</td>
			<td>第一行</td>
			<td>第一行</td>
		</tr>
		<tr>
			<td rowspan="3">竖<br>列<br>合<br>并</td>
			<td>第二行</td>
			<td>第二行</td>
			<td>第二行</td>
		</tr>
		<tr>
			<td>第三行第二列</td><!-- 第一列已占 -->
			<td>第三行</td>
			<td>第三行</td>
		</tr>
		<tr>
			<td>第四行第二列</td><!-- 第一列已占 -->
			<td>第四行</td>
			<td>第四行</td>
		</tr>
	</table>
</body>
</html>

运行结果如下：

如图第一行二三列已合并，第二三四行第一列已合并。

三、表格嵌套

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格嵌套</title>
</head>
<body>
	<table border="1px"width="500">
		<tr>
			<td width="100">&nbsp;&nbsp;</td>
			<td width="400">&nbsp;&nbsp;&nbsp;
                <table border="1px">
                	<tr>
                		<td width="100">&nbsp;&nbsp;</td>
                		<td width="100">&nbsp;&nbsp;</td>
                	</tr>
                </table>
			</td>
		</tr>
	</table>
</body>
</html>

运行结果：