DIV 表格
4.54/5 (31投票s)
本文演示了如何使用 div 元素有效地构建网站，而无需在页面上使用表格元素。
引言
本文演示了如何使用 div 元素有效地构建网站，而无需在页面上使用 table 元素。 由于 div 元素具有许多优点，大多数客户都要求设计师使用 div 元素而不是 table 元素来开发网站。 下面的代码是为学习使用 div 元素来开发网站的初学者准备的。
以下解释了为什么使用 DIV 而不是 TABLE 元素
表格元素的优点：大多数设计师使用 table 来获得一致的外观。 Table 也易于维护。 table 的另一个优点是它与大多数浏览器兼容。
表格元素的缺点：所有这些都伴随着代价：过多的嵌套 table 会增加页面大小和下载时间。 更多的 table 元素会将重要内容向下推，因此搜索引擎不太可能将内容添加到搜索引擎中。
DIV 元素的优点：div 配合 CSS 可以实现与基于 table 的页面结构相同的效果，并减少页面上的元素数量，从而使页面加载速度更快。 它也使页面与搜索引擎蜘蛛更兼容。
DIV 元素的缺点：主要的缺点是并非所有 CSS 元素都与浏览器兼容。 因此，我们必须编写一些自定义 CSS 来解决问题。
Using the Code
我创建了一个简单的应用程序，展示了如何仅使用 div 元素轻松创建自己的页面。
下图演示了 div 元素的布局。
以下是我为页面布局创建的样式表类列表。 让我们深入了解更多细节。
divHeaderTable：分配给 HTML 页面的页眉的类，其作用类似于headertabledivHeaderRow：分配给作为表格页眉行的div元素的类。 由于页眉图像的高度固定为 105 行，因此具有高度元素值 105px。divHeaderColumn：分配给作为表格页眉列的div元素的类。 由于页眉分为三个部分，因此width元素的值为 99%。divTable：分配给作为 HTML 文档容器部分中table的div元素的类。divRow：分配给作为 HTML 文档容器部分中行 的div元素的类。divColumn：分配给作为 HTML 文档容器部分中table的div元素的类。 由于每行有 4 个容器元素，因此width元素的值为24%。
body
{
background-color: LightBlue;
font-family: Verdana;
font-size: 13px;
}
.divHeaderTable
{
width: 100%;
padding-bottom:5px;
display:block;
}
.divHeaderRow
{
width: 100%; /* add extra that you want to for header column */
display:block;
height:105px;
}
.divHeaderColumn
{
float: left;
width: 33%;
display:block;
}
.divTable
{
width: 100%;
display:block;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}
.divRow
{
width: 99%;
display:block;
padding-bottom:5px;
}
.divColumn
{
float: left;
width: 24%;
display:block;
}
以下是页面的 HTML 代码，显示了如何将类分配给元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gmind Solusion-DivElement Layout</title>
<link href="CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div style="width:99%; height:565px;">
<div class="divHeaderTable">
<div class="divHeaderRow">
<div class="divHeaderColumn">
<img alt="Offshore Outsourcing software development company India"
title="Offshore Outsourcing software development company India"
src="Images/gmind.png" width="100%" height="105" />
</div>
<div class="divHeaderColumn">
</div>
<div class="divHeaderColumn">
<div>
<img alt="Gmind" width="15" height="10" src="Images/smllindia.jpg" />
+91-9702989270
</div>
<div>
<img alt="Gmind" src="Images/smallusa.jpg" />
+91-9924839208
</div>
<div>
</div>
<div>
</div>
</div>
</div>
</div>
<div id="menu" class="divHeaderTable" >
<ul style="list-style-type:none;" >
<li style="float:left"><a href="javascript:void(0);" >Home</a> </li>
<li style="float:left"><a href="javascript:void(0);" >About Us</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Services</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Technology</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Outsourcing</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Quality</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Career</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Blogs</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Partner</a> </li>
<li><a href="javascript:void(0);" title="Contact Us">Contact Us</a> </li>
</ul>
</div>
<div id="divHeader" class="divHeaderTable">
<h4>User Registration</h4>
</div>
<div id="content" class="divTable">
<div class="divRow">
<div class="divColumn">
<div>
<label id="lblSolutation" > Solutation</label>
</div>
<div>
<input type="text" id="txtSolutation" />
</div>
</div>
<div class="divColumn">
<div>
<label id="lblFname" > First Name</label>
</div>
<div>
<input type="text" id="Text1" />
</div>
</div>
<div class="divColumn">
<div>
<label id="lblMname" > Middle Name</label>
</div>
<div>
<input type="text" id="Text2" />
</div>
</div>
<div class="divColumn">
<div>
<label id="lblLname" > Last Name</label>
</div>
<div>
<input type="text" id="Text3" />
</div>
</div>
</div>
<div class="divRow">
<div class="divColumn">
<div>
<label id="Label10" > Login Name</label>
</div>
<div>
<input type="text" id="Text13" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label9" > E-mail</label>
</div>
<div>
<input type="text" id="Text12" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label7" > Password</label>
</div>
<div>
<input type="password" id="Text10" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label8" > Confirm Password</label>
</div>
<div>
<input type="password" id="Text11" />
</div>
</div>
</div>
<div class="divRow">
<div class="divColumn" style="width:48%;">
<div>
<label id="Label1" > Address1</label>
</div>
<div>
<textarea id="Text4" style="width:80%;" ></textarea>
</div>
</div>
<div class="divColumn" style="width:48%;">
<div>
<label id="Label3" > Address2</label>
</div>
<div>
<textarea id="Text6" style="width:80%;"> </textarea>
</div>
</div>
</div>
<div class="divRow">
<div class="divColumn">
<div>
<label id="Label2" > State</label>
</div>
<div>
<input type="text" id="Text5" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label4" > City</label>
</div>
<div>
<input type="text" id="Text7" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label5" > Country</label>
</div>
<div>
<input type="text" id="Text8" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label6" > Pin Code</label>
</div>
<div>
<input type="text" id="Text9" />
</div>
</div>
</div>
<br />
<div class="divRow">
<input type="submit" value="Submit" onclick="javascript:void(0);" />
or
<a href="javascript:void(0)">Cancel </a>
</div>
</div>
</div>
<div style="text-align:center; background-color:Green;">
Contact us to discuss your requirements
</div>
</body>
</html>
关注点
这并不是您可以使用 div 和 CSS 创建的唯一结构。 您也可以使用它来实现不同的布局。
因此，从上面的示例可以看出，使用 CSS 的 div 布局既简单又强大。 因此，网页下载速度更快，避免使用更多标签，并创建对搜索引擎更具吸引力的网页。