你只能用表格设计边框吗？

Question

我正在学习 HTML 和 CSS，我做了一些简单的网站，带有导航、侧边栏、浮动内容等。

我进入了一个只用表格制作的网站（所以我用谷歌搜索，发现这是一件坏事，然后我也用谷歌搜索了如何替换它，但我找不到任何不是 CSS3 的东西 - 重要，我还不想使用 CSS3！）。

所以基本上，这个网站有 3 列：表格上方的标题，然后分成 3 个<tr> 用于侧边栏和主要内容。

右侧的每个小边栏都是由另一个表格组成的，并且边框有一个名为“content-right”，“content-left”的图像，带有“关闭边框并打开它”的样式，并带有中间的图片（我猜）它会拉伸以保持风格。

我相信，当我阅读时，表格是一种不好的网站样式...但是我觉得这是设置侧边栏样式以使其从各个方面看起来都像我想要的唯一方法。

我希望你明白我的意思，我不记得我看过的网站，我再也找不到了，我试图尽可能清楚地解释，如果它不好，我很抱歉，我'就像我说的，我还在学习中。

所以基本上，如果你明白我的意思，你能告诉我，还有哪些其他方式（可能我猜是 div，或者也许是边框？）可以实现这个目标？

Answer 1

你告诉你学习 HTML 和 CSS，如果学习者不是很好的做法，尝试在 960 网格系统 CSS 中创建表格。 This link Can Help You

Answer 2

首先，要明白使用tables 对所有事情都不是坏事；只有在用于制作布局时，它们才会被认为是坏的。您网站的布局基本上是一个大纲，它定义了您的内容的分发和排列方式。

在您的情况下，这是一个仅使用 CSS 并创建相同布局的示例：

<div class = "header">
    Header!
</div>
<div class = "container">
    <div class = "sidebar">
        Sidebar 1!
    </div><div class = "main">
        Main content!
    </div><div class = "sidebar">
        Sidebar 2!
    </div>
</div>

CSS：

body {
    font-family: Arial, Helvetica, Sans-Serif;
    color: white;
}
.header {
    margin: 10px 10px 10px 10px;
    height: 100px;
    background-color: rgb(0, 140, 200);
}
.container {
    height: 500px;
    margin: 10px 10px 10px 10px
}
.sidebar {
    width: 15%;
    height: 100%;
    background-color: rgb(34, 177, 76);
    display: inline-block;
}
.main {
    background-color: rgb(0, 140, 200);
    display: inline-block;
    width: 70%;
    height: 100%;
}