如何使用HTML去除表格单元格边框？

Question

HTML

<table border="1">
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
</tr>
</table>

这将输出像这样的边框

+---+---+
|   |   |
+---+---+
|   |   |
+---+---+

但我希望只在表格而不是单元格中显示边框，就像这样

+--------+
|        |
|        |
|        |
+--------+

如何只使用 HTML 标记来实现，（无 CSS / 无内联样式）

在某些情况下，我仅需要删除一些 td 边框，并显示一些 td 边框以展示类似以下的内容：

+---+---+
|   |   |
+---+   |
|   |   |
+---+---+

- Bhojendra Rauniyar

---

你必须使用CSS。如果不想使用独立的样式表，可以在HTML标记中使用style属性。 - Harry Bomrah

我不明白为什么你不想使用CSS。当使用CSS时，你想要实现的一切都非常简单：http://jsfiddle.net/K8hje/ - Jojo

Answer 1

我的简单解决方案是在外部表格中保留另一个带有边框的表格，并将您的表格插入其中。

<table border="1">
    <tr>
        <td>
            <table border="0">
                <tr>
                    <td>one</td>
                    <td>two</td>
                </tr>
                <tr>
                    <td>one</td>
                    <td>two</td>
                </tr>
            </table>
        </td>
    </tr>

</table>

- NamingException

---

我认为这是一种基于他所保持的限制的简短而智能的解决方案。 - AurA

@NamingException +1 针对你非常聪明的回答。 - Devang Rathod

Answer 2

为了去除单元格之间的边框，同时保留表格周围的边框，请在table标签中添加属性rules=none。

在HTML中没有办法实现问题中最后一个图所指定的渲染效果。有一些基于使用其他标记结构的巧妙解决方法。

- Jukka K. Korpela

Answer 3

  <table border="1">
  <tr>
    <td>one</td>
    <td style="border-bottom-style: hidden;">two</td>
  </tr>
  <tr>
    <td>one</td>
    <td style="border-top-style: hidden;">two</td>
</tr>
</table>

- Ramnath

Answer 4

首先

<table border="1">
      <tr>
        <td style='border:none;'>one</td>
        <td style='border:none;'>two</td>
      </tr>
      <tr>
        <td style='border:none;'>one</td>
        <td style='border:none;'>two</td>
    </tr>
    </table>

第二个例子

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td style='border-left:none;border-top:none'>one</td>
    <td style='border:none;'>two</td>
  </tr>
  <tr>
    <td style='border-left:none;border-bottom:none;border-top:none'>one</td>
    <td style='border:none;'>two</td>
</tr>
</table>

- Guest

---

这种方法现在已经被弃用，因为cellspacing和cellpadding属性。 - Kevin Oswaldo

Answer 5

将其包围在一个div中，并给它加上边框，从表格中移除边框。

<div style="border: 1px solid black">
    <table border="0">
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
</div>

您可以在此处查看实际演示。

---

根据您更新的问题，如果您想要添加或删除表格边框，请先从HTML表格中删除边框，然后执行以下操作。

<td style="border-top: 1px solid black">

假设您只想添加顶部边框。类似地，您需要为其他三个边框重复此过程。更好的方法是创建四个 CSS 类...

.topBorderOnly {
    border-top: 1px solid black;
}

.bottomBorderOnly {
    border-bottom: 1px solid black;
}

然后根据要求将CSS添加到您的代码中。

<td class="topBorderOnly bottomBorderOnly">  

这将添加顶部和底部边框，同样地，对其余内容进行相同操作。

- AurA

---

@AurA，你的回答很好，但是OP明确表示他不想使用CSS。 - Devang Rathod

是的，这将删除所有td边框，div边框将显示...您可以查看输出...我已更新jsfiddle答案。 - AurA

@DevangRathod，我刚看到他更新了问题，并没有内联样式。 - AurA

@AurA，我知道你是对的，但请再次阅读原帖的问题，他不想使用CSS，而你设置了内联样式来设置边框。 - Devang Rathod

Answer 6

尝试：

<table border="1">
  <tr>
    <td>
      <table border="">
      ...
      </table>
    </td>
  </tr>
</table>

- beautifulcoder

Answer 7

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table border="0">
                <tr>
                    <td>one</td>
                    <td>two</td>
                </tr>
                <tr>
                    <td>one</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

- Smuuf

---

此属性现已被弃用。 - Kevin Oswaldo

Answer 8

规则="none"刚刚为我完美地工作了。无论我尝试什么，似乎都无法将边框重新绘制到特定的单元格周围。我是新手，一直在通过证书课程和YouTube教程自学。我正在编写我的第一个HTML CSS网页。我计划在单元格中放置图像，这样我就可以轻松添加边框。只是想分享一下，以防其他人也被尝试重新绘制特定单元格的边框所困扰。

- Kaye Bryant