HTML表格背景[关闭]答案

【问题标题】：HTML table background [closed]HTML表格背景[关闭]
【发布时间】：2012-12-07 06:45:35
【问题描述】：

你好吗？

我在编写我的第一个 HTML 网站时遇到了一些困难！我被困在一些细节上，如果你们能帮我一点，我真的很感激，这是我第一次写 HTML，所以我很抱歉我的错误和问题有点微不足道。

这是我的问题：

我试图在页面顶部制作绿色背景，但我不知道如何，我厌倦了使用 bgcolor 为表格所在的行着色，但这似乎不起作用。

这是我厌倦的工作：

<tr bgcolor = "green">
        <table width = "50%">
            <tr>
                <td><a href = "http://www.google.com"> Home </a></td>
                <td><a href = "http://www.google.com> About Us </a></td>
                <td><a href = "http://www.google.com> Products </a></td>
                <td><a href = "http://www.google.com> Services </a></td>
                <td><a href = "http://www.google.com> Contact Us </a></td>
            </tr>
        </table>
    </tr>

尝试在输入字段（用户名密码输入字段）旁边写一些东西时的另一个问题；当试图写“Office all 是一个互联网商店...”时，而不是出现在输入字段旁边，它们出现在它们下面！

这就是我所做的

<tr>
        <td>
            <form action = "processor.class" method = "get">
                User Name:
                <p/>
                <input type = "text"  name = "txtName" size = "10" />
                <p/>
                Password: 
                <p/>
                <input type = "password" name = "txtPassword" size = "10" />
                <p/>
                <input type = "submit" value = "Login"/> <a href = "http://www.jce.ac.il"> Register account</a>
            </form>
        </td>

        <td>
        office all is an internet...
        </td>

    </tr>

你能帮帮我吗？

谢谢 =)

编辑：谢谢你们的帮助，正如你们所建议的那样，我将尝试阅读 CSS 教程并停止使用表格，我现在将关闭此线程并在我有更多问题时打开它（在我了解了更多关于 CSS 的知识之后）

【问题讨论】：

想知道为什么表格而不是普通的 html/css ...
使用 css 应用 background-color: green;，而不是 bgcolor 属性。
...老实说没想到，因为我说这是我第一次用 HTML/CSS 编写
“我现在关闭这个帖子，如果我有更多问题，我会打开它”——StackOverflow 不是留言板。如果您有新问题，请创建另一个问题。
哦，抱歉，这里还是新的 =)

标签： html css

【解决方案1】：

无论您是从哪里学习 Web 开发，都可以把那本书/教程/其他东西扔掉，然后再学习一些更新的东西。使用表格来布局页面是一种非常糟糕的做事方式。如果您只是学习 Web 开发，那么您应该学习如何使用 CSS 而不是表格来布局页面。

【讨论】：

是的，我现在就这样做，感谢您的建议 =)

【解决方案2】：

天哪……桌子……在这里自学：

how to make full height cell in full height table in Internet Explorer

读完之后再看这里：

http://htmldog.com/guides/cssbeginner/

从长远来看，您会发现使用语义 HTML 和有意义的 CSS 将大大减少您的工作流程并使您的网站更加兼容 x 浏览器。

无论您从哪里学习都会阻碍您的进步，并且不会帮助您实现目标，最好放弃它并坚持使用 HTMLDog 之类的好资源（避免像瘟疫一样的 W3Schools - http://w3fools.com）

【讨论】：

感谢您的提示 =)，我会避开 w3schools

【解决方案3】：

看起来其他人已经回答了您的问题。但是，为了更好地组织您的页面，我建议您阅读http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

【讨论】：

【解决方案4】：

您应该使用 CSS 来指定背景颜色和样式。

使用表格进行布局是个坏主意，而且您的代码中还有其他一些幼稚的错误（即<p/> 是错误的）

我建议您查找有关基本 HTML 和 CSS 的教程。也许beginner tutorial at HTML Dog 会帮助你。表格有working examples。

【讨论】：

【解决方案5】：

谷歌：CSS 表格设计

Smashing Magazine 的结果将帮助您解决此问题。

【讨论】：

现在去看看，谢谢

【解决方案6】：

首先，我会花几个小时在 w3schools 上阅读有关 css 和 html 的文章

W3Schools css W3Schools html

以下是获得所需布局的一种非常粗略的方法。注意使用水平列表而不是表格，以及 css 的使用。

我还是用了几张表，真的应该也换成css吧..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
  ul 
  {
    background-color:green;
    list-style-type:none;
    margin-top:0;
    margin-bottom:0;
    padding-top:1em;
    padding-bottom:1em;
  }

  li
  {
    display:inline; 
    text-: white;
  }

  td
  {
    border: 1px solid black;
  }
</style>
</head>

<body>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>

  <table>
    <tr>
      <td>
        <form action = "processor.class" method = "get">
          <div>
            User Name: <input type = "text"  name = "txtName" size = "10" />
          </div>
          <div>
           Password: <input type = "password" name = "txtPassword" size = "10" />
          </div>
          <div>
            <input type = "submit" value = "Login"/> <a href = "http://www.jce.ac.il"> Register account</a>
          </div>
        </form>
      </td>
      <td>
        <div>
          office all is an internet...
        </div>
      </td>
    </tr>
  </table>


</body>

</html>

【讨论】：

【解决方案7】：

第一个问题你可以使用 css 更有效的方式

对于第二个问题，您应该将文本放在“p”内的“label”标签中

包含输入的标签

【讨论】：

【解决方案8】：

尝试将 bgcolor 放在嵌套的 <table> 标记中，而不是 <tr> 标记中。这也是无效代码，因为<tr> 中没有<td>。

更好的方法是使用 CSS。把头绕起来更难，但从长远来看会容易得多。

【讨论】：