使用CSS在HTML表中添加内部边框

您可能听说过CSS和HTML表格没有混合。不是这种情况。是的，使用HTML表格进行布局不再是网页设计的最佳实践，因为它们已被CSS布局样式所取代，但表格仍然是用于将表格数据添加到网页的正确标记。

因为很多网络专业人员都不愿意离桌子认为他们只是麻烦，许多专业人士几乎没有使用这种常见HTML元素的经验，当他们必须在网页上的表格单元格中添加内部线条时，他们会很困难。

CSS表格边框

当您使用CSS向表添加边框时，它只会在表的外部添加边框。如果要将内部行添加到该表的各个单元格，则需要向内部CSS元素添加边框。您可以使用HR标签在单个单元格内添加线条。

要应用本教程中介绍的样式，您需要在网页上使用表格。然后，您将样式表创建为文档头部的内部样式表（如果您只处理单个页面）或作为外部样式表附加到文档（如果站点有多个页面）。您可以将样式添加到样式表中。

在你开始之前

确定要在表格中显示线条的位置。您有几种选择，包括：

• 围绕所有细胞形成网格
• 仅在列之间定位线条
• 就在行之间
• 在特定列或行之间。

您还可以将线条放置在单个细胞周围或单个细胞内。

如何在表中的所有单元格周围添加行

要在表格中的所有单元格周围添加线条，创建网格效果，请将以下内容添加到样式表中：

td，th {边框：实心1px黑色;}

如何在表中的列之间添加行

要在列之间添加线条以创建在表格列上从上到下运行的垂直线条，请将以下内容添加到样式表中：

td，th {border-left：solid 1px black;}

如果您不希望在第一列上显示垂直线，则可以添加一个类 日 和 TD 细胞。在这个例子中，假设一类 无边界 在这些单元格上并使用CSS规则删除边框。您使用的HTML类是：

类=“无边界”>

然后，将以下样式添加到样式表：

。无边界 {border-left：none;}

如何在表中的行之间添加行

与在列之间添加线条一样，您可以在行之间添加水平线，并在样式表中添加一个简单样式，如下所示：

tr {border-bottom：solid 1px black;}

要从表格底部删除边框，您将再次为其添加一个类

标签：

类=“无边界”>

将以下样式添加到样式表：

。无边界 {border-bottom：none;}

如何在表中的特定列或行之间添加行

如果只需要特定行或列之间的行，则需要在这些单元格或行上使用类。在列之间添加一行比在行之间添加更难，因为您必须将该类添加到该列中的每个单元格。如果您的表是从某种类型的CMS自动生成的，则可能无法实现，但如果您手动编写页面，则可以根据需要添加适当的类来实现此效果。

类=“侧边界”>

在行之间添加行更容易，因为您可以将类添加到您想要行的行。

类=“边界 - 底部”>

然后，将CSS添加到样式表：

.border-side {border-left：solid 1px black;}.border-bottom {border-bottom：solid 1px black;}

如何在表中的单个单元格周围添加行

要在单个单元格周围添加线条，可以向要使用边框的单元格添加一个类：

类= “BORDER”>

然后将以下CSS添加到样式表：

。边界 {边框：实心1px黑色;}

如何在表中的单个单元格内添加行

如果要在单元格内容中添加行，最简单的方法是使用水平规则标记（).

有用的提示

如果您发现边框有间隙，请确保在表格上设置了边框折叠样式。将以下内容添加到样式表中：

表{边界崩溃：崩溃;}

您可以避免所有并在表标记中使用border属性。然而，要意识到这个属性虽然没有被弃用，但它的灵活性明显低于CSS，因为你只能定义边框的宽度，并且只能在表的所有单元格周围或没有它。