The TABLE attribute of the height tag is not supported - Regarding the problem that the height of the table cannot be set as a percentage in HTML


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

1. Problem description

During the web page production process, in order to achieve the "full screen setting" of the table, we set the weight attribute and height attribute of the table tag to "100%". You can also set it directly through the "Properties" at the bottom of the interface (see the figure below) .
figure 1However, when previewing the web page, if you zoom in on the web page, you can find that although width adaptation is achieved, width adaptation cannot be achieved, that is, full-screen display in height is not successfully achieved.

Looking at the source code, we found that a warning message appeared on the height attribute - "The TABLE attribute of the height tag is not supported" (see the figure below), which means that setting "height='100%'" is invalid. Correspondingly, it was found in Adobe Dreamweaver 2021 that the height percentage setting has been canceled in the "Properties" bar at the bottom of the interface.
figure 2

2. Problem solving

(1) Method 1

This can be achieved by marking the document type as "HTML5" at the beginning of the source code.
Insert image description here

The code is as follows (example):

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

(2) Method 2

Place the table tag within the body tag, and set the height attributes of the html tag and body tag to 100%, leaving the rest of the content unchanged. The detailed code is shown in the figure below
Insert image description here

The code is as follows (example):

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

3. Experimental results

Use any of the above two methods to truly achieve full-screen display of the table (see the picture below for demonstration)
Insert image description here

Insert image description here

Insert image description here

4. Attention

  • The header (that is, the table title) is not included in the table, so when testing full-screen display, the page should be pulled down to hide the header.
  • When testing, the page zoom should be moderate. If the zoom ratio is too large (such as 125%) or the page is narrowed too much, the row height will no longer be able to be further compressed, resulting in the failure of full-screen display in terms of height.

Guess you like

Origin blog.csdn.net/A_No2Tang/article/details/127864241