怎么样用HTML创建一个3行两列的表格_随笔

这个问题既然是表格的话，那么就都有table。css只是用来控制样式，如果您只是想要一个三行两列的表格而且什么要求都没有的话那就太简单了.<table><tr> <td>这里是第一行第一列</td> <td>这里是第一行第二列</td></tr><tr> <td>这里是第二行第一列</td> <td>这里是第二行第二列</td></tr><tr> <td>这里是第三行第一列</td> <td>这里是第三行第二列</td></tr></table>上面就是简单的表格制作，如果您要给表格一个宽度或者高度，那就得自己写样式或者给它一个width和height。当一个列中什么数据都没有的时候，那您最好是写一个空格符因为有的浏览器会认为您没有任何数据，而把它给忽略掉的。希望我说的能帮到您

直接表格就可以实现了

<html >

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

DIV+CSS三行两列经典布局

这个XHTML1标准的DIV+CSS布局是著名网页设计师2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在原代码的基础上作了一定规范整理）：

<html>

<head>

<title>XHTML之经典三行两列布局 - seobbs.net</title>

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="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”，按内容分布可以理解为“功能->核心内容->功能->功能”，在不改变页面展示的情况下，将核心内容部分放到了前面。

这样，蜘蛛爬行时就能在最短时间内索引到网页的核心内容。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7434197.html

怎么样用HTML创建一个3行两列的表格

发表评论

评论列表（0条）