height标签的TABLE属性不被支持——关于HTML关于表格高度无法设置百分比的问题

小晗姓羰

已于 2022-11-15 13:46:33 修改

阅读量1.4k

点赞数

文章标签： html 前端 css

于 2022-11-15 13:43:55 首次发布

本文链接：https://blog.csdn.net/a_no2tang/article/details/127864241

版权

本文探讨了在网页制作中如何解决使用table标签实现全屏布局的问题，介绍了两种方法：一是指定文档类型为HTML5，二是将table嵌套在body并设置html和body高度。通过修正height属性的使用，避免了高度自适应失效的警告。

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

提示：本文使用的软件环境为Micromedia Dreamweaver8和Adobe Dreamweaver2021

1. 问题描述

在网页制作过程中，为了实现表格“满屏设置”我们将table标签的weight属性和height属性设置为“100%”，也可以通过界面底部的“属性”中直接设置（见下图所示）。
然而在网页预览时，如果缩放网页可以发现，尽管实现了在宽度上的自适应，但是无法实现宽度自适应，即并没有成功实现在高度上的全屏显示。

查看源代码发现，在height属性上出现了警告提示——“height标签的TABLE属性不被支持”（见下图），也就是说设置“height=‘100%’”是无效的。相应的，在Adobe Dreamweaver2021中发现，界面底部的“属性”栏中已经取消了高度百分比的设置。

2. 问题解决

(1) 方法一

在源代码开头标注文档类型为“HTML5”即可实现
在这里插入图片描述

代码如下（示例）：

<!DOCTYPE html5>
<body>
	<table width="100%" height="100%" border="1">
	</table>
</body>

(2) 方法二

将table标签放置在body标签内，并设置html标签和body标签的height属性为100%，其余内容保持不变。详细代码如下图所示
在这里插入图片描述

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		html,body{
			height:100%;
			margin: 0px;
		}
	</style>
</head>
<body>
	<table width="100%" height="100%" border="1">
	</table>
</body>
<html>