了解如何在短短五分钟内创建CSS表格边框
您可能已经听说CSS和HTML表不混合。 这是不正确的。 是的，使用HTML表格进行布局不再是网页设计的最佳做法，已被CSS布局样式取代，但表格仍然是用于将表格数据添加到网页的正确标记。
不幸的是，因为如此多的网络专业人士已经回避了认为他们是毒药的表格，许多专业人士在处理这些常见的HTML元素方面经验不足，而且他们必须在网页上处理这些元素。 例如，如果您在页面上有一个表格，并且想要将内部行添加到表格单元格中。
CSS表格边框
当您使用CSS向表格添加边框时，它只会添加表格外部的边框。 如果要将内部行添加到该表的单个单元格中，则需要向内部CSS元素添加边框。 您还可以使用HR标签在单个单元格内添加行。
为了应用本文中介绍的样式，您显然应该在您的网页上有一个表格 。 然后，您应该在文档头部创建一个样式表作为内部样式表 （如果您的“网站”是单个页面，您可能只会这样做），或者将其作为外部样式表附加到文档中（这就是您如果你的网站是多个页面的话 - 你可以从一个外部表格设计所有页面）。 您将把样式添加到该样式表的内部线条。
在你开始之前
首先，您需要确定您想要的线条出现在您的表格中。 你有几个选择，包括：
- 围绕所有细胞形成网格;
- 在列之间定位线条;
- 就在行之间; 要么
- 在特定的列或行之间。
您还可以将线条放在单个单元格周围或单个单元格内。
如何在表中的所有单元格周围添加行
要在表格中的所有单元格周围添加线条，创建类似网格效果，请将以下内容添加到样式表中：
td，th {
边框：实心1px黑色;
}
如何在表格中的列之间添加行
要在列之间添加行（这将创建在表格列上从上至下运行的垂直行），请将以下内容添加到样式表中：
td，th {
边界左：固体1px黑色;
}
然后，如果您不希望它们出现在第一列上，则需要向这些th和td单元添加一个类。 在这个例子中，我们假设我们在这些单元格上有一个无边界类，我们用这个更具体的CSS规则去除边界。 所以这里是我们要使用的HTML类：
类=“无边界”>
然后我们可以将以下样式添加到我们的样式表中：
。无边界 {
border-left：none;
}
如何在表中的行之间添加行
就像在列之间添加行一样，只需在样式表中添加一个简单样式即可。 下面的CSS会在我们表的每一行之间添加垂直线：
tr {
边框底部：实心1px黑色;
}
为了从表格底部删除边框，您可以再次向该tr标签添加一个类：
类=“无边界”>
将以下样式添加到您的样式表中：
。无边界 {
border-bottom：none;
}
如何在表中的特定列或行之间添加行
如果您只需要特定行或列之间的行，则需要在这些单元或行上使用一个类。 在列之间添加行比在行之间添加行要困难得多，因为您必须将该类添加到该列中的每个单元格。 如果您的表格是由某种类型的CMS自动生成的，那么这可能是不可能的，但如果您手动编写该页面，则可以根据需要添加适当的类以实现此效果。
类=“侧边界”>
在行之间添加行比较容易，因为您可以将该类添加到想要行的行中。
类=“边界-底部”>
然后将CSS添加到您的样式表中：
.border-side {
边界左：固体1px黑色;
}
.border-bottom {
边框底部：实心1px黑色;
}
如何在表中的单个单元格周围添加行
要在单个单元格周围添加线条，请向要添加边框的单元格添加一个类：
类= “BORDER”>
然后将下面的CSS添加到您的样式表中：
。边境 {
边框：实心1px黑色;
}
如何在表中的单个单元格内添加行
如果要在单元格内添加行，最简单的方法是使用水平规则标记（
）。
有用的提示
如果您发现边框有空隙，则应确保在桌面上设置边框折叠样式。 将以下内容添加到您的样式表中：
表{
边界崩溃：崩溃;
}
您可以避免使用上述所有CSS，并在您的表格标签中使用border属性。 然而，意识到他的属性尽管没有被弃用，但它的灵活性远远低于CSS，因为你只能定义边框的宽度，并且只能在表格的所有单元格周围或没有。