用bootstrap可以很容易的实现：
<div class="row"><div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
row 是行，col是列，
或者也可以用表格就能实现：
<table><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
tr是行，td是列
推荐还是用bootstrap，这里有bootstrap的手删下载：
网页链接
希望能帮助到你，祝你生活愉快！
流体网格布局和普通HTML5编写的区别如下：
1、创建步骤不同
创建流体网格布局
1）选择“文件”>“新建流体网格布局”。
2）媒体类型的中央将显示网格中列数的默认值。要自定义设备的列数，请按需编辑该值。
3）要相对于屏幕大小设置页面宽度，请以百分比形式设置该值。
4）还可更改栏间距宽度。栏间距是两列之间的空间。
5）指定页面的 CSS 选项。
单击“创建”后，系统会要求您指定一个 CSS 文件。您可以执行以下操作之一：
默认情况下显示适用于移动电话的“流体网格”。此外，还显示“流体网格”的“插入”面板。使用“插入”面板中选项可创建您布局。
要改为设计用于其它设备的布局，请单击设计视图下方选项中的相应图标。
创建新 CSS 文件。
打开现有 CSS 文件。
指定作为流体网格 CSS 文件打开的 CSS 文件。
6）保存此文件。保存 HTML 文件时，系统提示您将依赖文件（如 boilerplate.css 和 respond.min.js）保存到计算机上的某个位置。指定一个位置，然后单击“复制”。
boilerplate.css 基于 HTML5 样板文件。该文件是一组 CSS 样式，可确保在多个设备上渲染网页的方式保持一致。respond.min.js 是一个 JavaScript 库，可帮助在旧版本的浏览器中向媒体查询提供支持。
2、HTML5的方法：
HTML 布局 - 使用表格
使用 HTML <table>标签是创建布局的一种简单的方式。
可以使用 <div>或者 <table>元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99width:100pxtext-align:top">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEEheight:200pxwidth:400pxtext-align:top">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbbtext-align:center">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
你要给td设置border，不是table，table是最外面的大的。td的border是每个小的table tr td｛border:1px solid #999999｝
