How to realize div layout and table layout in html5

This article mainly introduces how to realize div layout and table layout in html5, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

specific contents are as follows

div Layout: html+css for simple layout.

#Height in container cannot be written as a percentage, it must be a specific height.

div Layout body{ margin:0; padding:0; } #container{ width:100%; height:650px; background-color: aqua; } #heading{ width:100%; height:10%; background-color: azure; } #content-menu{ width:30%; height:80%; background-color: chartreuse; float:left; } #content-body{ width:70%; height:80%; background-color: chocolate; float:left; } #footer{ width:100%; height:10%; background-color: darkgrey; clear: both; } head content menu content body bottom

Effect drawing:

Table layout:

table layout This is the head. left menu content right menu this is the bottom

Effect drawing:

Thank you for reading this article carefully. I hope that Xiaobian's article "How to realize div layout and table layout in html5" will be helpful to everyone. At the same time, I hope that everyone will support you more, pay attention to the industry information channel, and more relevant knowledge is waiting for you to learn!