| 知乎专栏 ｜ 多维度架构 |
为何使用表格排版是不明智的选择？为什么要选择DIV+CSS？
首选我来说说表格排版，表格排版也是有好处的，一是排版速度快，二是兼容性比CSS好。做为一般的小网站还是比较适合的，如果在大型网站使用表格就不太合适。 表格必须定义很多属性如width="100%" border="0" cellpadding="0" cellspacing="0"，并且有时候tr标签显得多余。
例 15.1. 表格排版范例
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Example</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Logo</td>
<td>Banner</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Home</td>
<td>News</td>
<td>Contact</td>
<td>About</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Top 10 </td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Link </td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">Article Title </td>
</tr>
<tr>
<td><p>Contect</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
</tr>
<tr>
<td>Feedback</td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">Copyright XXXX </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
你可以对比上面看看div+css是如何规划版面，并且css很多定义是可以重用的。
例 15.2. XHTML+DIV+CSS排版范例
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hello world</title>
<style type="text/css">
<!--
body{
width: 795px;
}
div1{
border-color: #119EBA;
border-width: 1px;
border-style: solid;
margin: 5px;
}
#header{
}
#logo, #banner{
float:left;
height: 75px;
}
#nav{
clear:both;
}
#nav ul {
list-style-type:none;
margin: 0px;
padding:0px;
}
#nav ul li{
float:left;
width: 100px;
}
#main{ clear:both;}
#main #left {
float:left;
width: 30%;
}
#main #right {
float:right;
width: 70%;
}
.box{}
.box h2 {
margin: 0;
padding: 0px;
}
.box a { display:block;}
#footer{ clear:both}
#footer #copyright {
text-align:center;
}
.article {
border-color: black;
border-width: 1px;
border-style: solid;
margin: 5px;
padding: 10px;
}
.article .article_title{
font-size: 24px;
font-weight:bold;
text-align:center;
}
.article .article_content{ font-size:10px;}
-->
</style>
</head>
<body>
<div id="header">
<div id="logo"> Logo </div>
<div id="banner"> Banner </div>
</div>
<div id="nav">
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> News </a></li>
<li><a href="#"> Person </a></li>
<li><a href="#"> Group </a></li>
<li><a href="#"> Network </a></li>
</ul>
</div>
<div id="main">
<div id="left">
<div class="box">
<h2>title</h2>
<a href="#"> link </a>
<a href="#"> link </a>
<a href="#"> link </a>
</div>
<div class="box">
<h2>title</h2>
<a href="#"> link </a>
<a href="#"> link </a>
<a href="#"> link </a>
</div>
</div>
<div id="right">
<div class="article">
<div class="article_title">
Article Title
</div>
<div class="article_content">
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="copyright"> Copyright Neo Chan</div>
</div>
</body>
</html>
上面例子我们可以看到div与table相比所使用的标签更少，无形中给网站减了肥。
CSS 的class,id 名称定义规范：
一定要简单，可读例如header，footer
对于在页面中不重复，自始至终只出现一次可定义为id，例如id="header"，id="footer"
对于在页面中经常重复出现的，可定义为class，例如id="article_block"，id="news_block"
![[注意]](/graphics/note.png) | 注意 |
|---|---|
不要使用HTML属性，尽量使用css。 herf,src,class,id等属性除外。 下面是一个例子 <font color="red" size="12" face="Arial, Helvetica, sans-serif" >Hello workd</font> 你应该使用CSS实现,如果能使用CSS实现尽量不要多用一条HTML和属性。
<style type="text/css">
.hello{
color:red;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<div id="hello">Hello workd</font>
|