网页布局对于提高网站外观非常重要。设计具有出色外观的网站布局需要花费大量时间。
如今，所有现代网站都使用基于CSS和JavaScript的框架来提供响应性和动态网站，但是您可以使用简单的HTML表格或除法标签结合其他格式标签来创建良好的布局。
使用表格
创建布局的最简单，最流行的方法是使用HTML <table>标签。 这些表按列和行排列，因此您可以按照自己喜欢的任何方式利用这些行和列。
如，下面的HTML布局示例是使用具有3行2列的表实现的，但是header和footer列使用colspan属性跨越了两列-
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width="100%" border="0">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">colspan</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#b5dcb3"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><h1></span><span class="pln">This is Web Page Main title</span><span class="tag"></h1></span><span class="pln">
</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"><tr</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"top"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#aaa"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"50"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><b></span><span class="pln">Main Menu</span><span class="tag"></b><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
HTML</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PHP</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PERL...
</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#eee"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"200"</span><span class="tag">></span><span class="pln">
Technical and Managerial Learnfk
</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">colspan</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#b5dcb3"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><center></span><span class="pln">
Copyright © 2007 Learnfk.com
</span><span class="tag"></center></span><span class="pln">
</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
这将产生以下输出-
多列布局
您可以设计网页以将您的网页内容放置在多个页面中。您可以将内容保留在中间列中，并且可以使用左列使用菜单，而右列可以用于放置广告或其他内容。这种布局与无涯教程的网站learnfk.com上的布局非常相似。
这是创建三列布局的示例-
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width="100%" border="0">
</span><span class="tag"><tr</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"top"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#aaa"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"20%"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><b></span><span class="pln">Main Menu</span><span class="tag"></b><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
HTML</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PHP</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PERL...
</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#b5dcb3"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"200"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"60%"</span><span class="tag">></span><span class="pln">
Technical and Managerial Learnfk
</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#aaa"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"20%"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><b></span><span class="pln">Right Menu</span><span class="tag"></b><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
HTML</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PHP</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PERL...
</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"><table></span><span class="pln">
</body>
</html>
这将产生以下输出-
使用DIV,SPAN
<div>元素是用于对HTML元素进行分组的块级元素。 虽然<div>标签是一个块级元素，但是HTML <span>元素用于在内联级别对元素进行分组。
尽管可以使用HTML表格实现漂亮的布局，但是表格并不是真正作为布局工具设计的。
在这里，将尝试使用<div>标签和CSS达到相同的输出，无论您在上一个示例中使用<table>标签实现了什么。
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style="width:100%">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:#</span><span class="pln">b5dcb3</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="lit">100</span><span class="pun">%</span><span class="atv">"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><h1></span><span class="pln">This is Web Page Main title</span><span class="tag"></h1></span><span class="pln">
</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:#</span><span class="pln">aaa</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">float</span><span class="pun">:</span><span class="pln">left</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><div><b></span><span class="pln">Main Menu</span><span class="tag"></b></div></span><span class="pln">
HTML</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PHP</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PERL...
</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:#</span><span class="pln">eee</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="lit">350px</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">float</span><span class="pun">:</span><span class="pln">left</span><span class="pun">;</span><span class="atv">"</span><span class="pln"> </span><span class="tag">></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">Technical and Managerial Learnfk</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:#</span><span class="pln">aaa</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">float</span><span class="pun">:</span><span class="pln">right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><div><b></span><span class="pln">Right Menu</span><span class="tag"></b></div></span><span class="pln">
HTML</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PHP</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
PERL...
</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:#</span><span class="pln">b5dcb3</span><span class="pun">;</span><span class="pln"> clear</span><span class="pun">:</span><span class="pln">both</span><span class="atv">"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><center></span><span class="pln">
Copyright © 2007 Learnfk.com
</span><span class="tag"></center></span><span class="pln">
</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"></div></span><span class="pln">
</body>
</html>
这将产生以下输出-
