像 HTML 表格一样使用 CSS/Div 设计页面布局

由于我是 CSS 新手，我不确定是否可以使用 Div/CSS 进行以下页面布局，或者我应该使用 HTML 表格吗？

我想设计我的页面，使得左侧（即大约 30%）分为 3 个带有一定边距的部分（即一列和 3 行），页面的其余部分分为 2 行（即一列和 2 行）。

不确定我是否能正确解释。我有图像文件，但 Stackflow 不允许我上传，因为声誉较低。

你不需要使用<table>对于您描述的布局（并且您不需要任何 CSS3 或 HTML5 特定内容）.

有几个选项可用于实现此布局。这是一个关于 CSS 布局的很好的教程：

• CSS 布局

以下是布局的一个示例：

• jsFiddle

HTML

<div class="left-column">
  <div>Left Side Row 1</div>
  <div>Left Side Row 2</div>
  <div>Left Side Row 3</div>
</div>
<div class="right-column">
  <div>Right Side Row 1</div>
  <div>Right Side Row 2</div>
</div>

CSS

.left-column, .right-column{
  float:left;
}
.left-column{
  width:30%; 
}
.right-column{
  width:60%; 
}
div{
  padding:10px;
  border:solid 1px black;
}

结果截图