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

Question

我正在学习 HTML 和 CSS，我用导航、侧边栏、 float 内容等做了几个简单的网站。

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

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

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

我相信，当我阅读周围的文章时，表格是设计网站样式的糟糕方式......但后来我觉得这是设计侧边栏样式以使其从各个方面看起来都像我想要的唯一方法。

我希望你明白我的意思，我不记得我看过的网站，我也找不到了，我尽量解释清楚，如果不好，我很抱歉，我'正如我所说，我仍在学习中。

所以基本上，如果您理解我的意思，请您告诉我还有哪些其他方式(我猜可能是使用 divs，或者可能是边框？)可以实现这一目标吗？

Answer 1

首先，了解使用表 并非对所有事情都不利；它们仅在用于制作布局 时才被认为是坏的。您网站的布局基本上是定义内容分布和排列方式的大纲。

对于您的情况，这是一个仅使用 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%;
}