css只是用来控制样式，如果您只是想要一个三行两列的表格而且什么要求都没有的话那就太简单了.
<table>
<tr>
<td>这里是第一行第一列</td>
<td>这里是第一行第二列</td>
</tr>
<tr>
<td>这里是第二行第一列</td>
<td>这里是第二行第二列</td>
</tr>
<tr>
<td>这里是第三行第一列</td>
<td>这里是第三行第二列</td>
</tr>
</table>
上面就是简单的表格制作
，如果您要给表格一个宽度或者高度
，那就得自己写样式
或者给它一个width
和height。
当一个列中什么数据都没有的时候，那您最好是写一个空格符 因为有的浏览器会认为您没有任何数据，而把它给忽略掉的
。希望我说的能帮到您
我理解的方法如下，没做完整代码，class或使用ID的CSS属性需自己添加第一行：<div
class="行1">
<div
class="行中的列1">
<div
class="行中列的块">块1内容</div>
<div
class="行中列的块">块2内容</div>
<div
class="行中列的块">块3内容</div>
<div
class="行中列的块">块4内容</div>
</div>
<div
class="行中的列2">
<div
class="行中列的块">块1内容</div>
<div
class="行中列的块">块2内容</div>
<div
class="行中列的块">块3内容</div>
<div
class="行中列的块">块4内容</div>
</div>
</div>
同理行二和行三。
~
DIV+CSS三行两列经典布局
这个XHTML1标准的DIV+CSS布局是著名网页设计师2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在原代码的基础上作了一定规范整理）：
<html>
<head>
<meta http-equiv='Content-Type' content="text/html charset=gb2312">
<title>XHTML之经典三行两列布局 - seobbs.net</title>
<style type="text/css">
body
{ background: #999 text-align: center color: #333 fontfamily: Verdana, Arial, Helvetica, sans-serif }
a:link, visited
{color:#004592text-decoration:none}
a:hover {color:#004592text-decoration:underline}
a:active {color:#004592text-decoration: none}
img {border:0px}
#header { margin-right: auto margin-left: auto padding: 0px width: 776px background: #EEE height: 60px text-align: left}
#contain { margin-left: auto margin-right: auto width: 776px }
#mainbg { float: left padding: 0px width: 776px background: #60A179 }
#right { float: right margin: 2px 0px 2px 0px padding: 0px width: 574px background: #ccd2de text-align:left }
#left { float: left margin: 2px 2px 0px 0px padding: 0px background: #F2F3F7 width: 200px text-align:left }
#footer { clear: both margin-right: auto margin-left: auto padding: 0px width: 776px background: #EEE height: 60px }
.text {margin:0pxpadding:20px}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div class="text">text<p>段落< /p><p>段落</p><p>段落</p><p>段落</p> <p>段落</p></div> </div> <div id="left"> <div class="text">left</div> </div> </div> </div>
<div id="footer">footer</div>
</body>
</html>
效果演示及代码：www.st539.com/news_view.asp?id=123
SEO角度分析这个布局的优势：
我们先按网页设计惯例来看页面中的内容分布，一般情况下，头部（A区）为站点导航，底部（D区）为辅助导航及版权信息等，左侧（B区）会放搜索、列表、排行等功能性内容，核心内容就集中在右侧（C区）。
如上图标识所示，按传统的布局，代码编写顺序是“A->B->C->D”，也可以理解为“功能->功能->核心内容->功能”。
都知道，搜索引擎蜘蛛爬行时，是按着页面代码顺序自上而下的，这种情况下蜘蛛很难最快的爬行到核心内容；而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回，抓取到的是与其他页面一样的功能内容时，这个页面就成为相似网页。
为了避免这样的情况，包括新浪、搜狐、网易在内的很多网站（可能也包括你^_^），都在设计时将页面中B区和C区对调。
再来看本布局方式，页面代码顺序是“A->C->B->D”，按内容分布可以理解为“功能->核心内容->功能->功能”，在不改变页面展示的情况下，将核心内容部分放到了前面。
这样，蜘蛛爬行时就能在最短时间内索引到网页的核心内容。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）