Question

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

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

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

右侧的每个小侧边栏都是由另一张桌子组成的，边框上有一个名为＆＃34; content-right＆＃34;，＆＃34; content-left＆＃34;风格为＆＃34;关闭边框并打开它＆＃34;和中间图像（我猜）它会拉伸以保持风格。

我相信当我读到这些表格是一种糟糕的方式来设计一个网站......但后来我觉得这是设计侧边栏的唯一方法，使其看起来像我想要的所有方面。

我希望你理解我的意思，我无法回想起我看过的网站，我再也找不到了，我试着尽可能清楚地解释，我很抱歉，如果这很糟糕，我还在学习，正如我所说。

所以基本上，如果你理解我的意思，你能告诉我，其他方式（可能我猜div还是边界？）可以实现这个目标吗？

Answer 1

首先，要明白使用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%;
}

Answer 2

阅读这篇文章：http://www.alistapart.com/articles/holygrail/

对你来说非常有用。

Answer 3

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

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

3 个答案: