表格应该有默认样式吗？ | CSS-Tricks

Luke Underwood 提出一个有趣的问题

<table> 默认样式的最佳实践是什么？

我想有三种可能性

有默认样式
没有
介于两者之间

Luke 进一步解释

我们办公室对这个想法意见不一。在我们基本的模板中，目前默认情况下没有样式应用于表格。您需要一个类才能使其看起来美观（带边框、背景颜色等）。我们主要在主内容区域中使用的表格上使用此类。

我们前端开发人员认为这是最好的，因为这意味着我们可以轻松地为自定义表格设置样式，而不必覆盖任何默认样式。这包括必须覆盖在较小屏幕上减少填充的媒体查询，这会很烦人。我们还认为在这些内容表格上有一个选择器很重要，以防我们需要实现响应式表格插件之类的 JavaScript 解决方案。

后端程序员一直很沮丧，因为他们不能“只是把一个表格放到页面上”而没有看起来很好，并坚持认为默认表格样式是最好的选择。显然，为每个表格添加一个简单的类很困难，他们认为我们应该处理编写额外的 CSS 来解决它。

总结

有默认样式的好处

您可以将一个“表格”放入 HTML 中，它看起来很好。

需要类的好处

您可以拥有多种表格样式，而不必与默认样式作斗争。
您可能需要选择器才能找到这些特定表格。

我还要补充一些其他考虑因素。

背景是什么？

一个是考虑上下文。这些表格是作为内容存储和显示的吗？比如在文章、文档等中。我喜欢在内容中尽可能地保持无类。我发现类的使用寿命不如内容长。也许有一天，您的 .striped-table { } 不再存在了，表格无意中恢复到无样式状态。默认样式可以避免这种情况。

也许您的内容存储在 Markdown 中，我强烈推荐使用 Markdown 来存储持久性内容。Markdown 甚至没有提供一种很好的方法来为表格应用类，所以这是一个需要考虑的问题。

范围是否可行？

另一个需要考虑的是范围。也许在全局范围内，您可以避免默认样式，但是那些明显位于内容输出区域内的样式确实有默认样式。

/* Scoped styles to articles */
article,
.this-is-content-or-whatever {
  table {

  }
  th, td {

  }
}

就像可选的排版。

是否可以采用轻量级的默认样式？

除了典型的用户代理样式表之外，这些样式在很大程度上可以使表格看起来更美观。

table {
  border-collapse: collapse;
}
tr {
  border-bottom: 1px solid #ccc;
}
th, td {
  text-align: left;
  padding: 4px;
}

在使用自定义表格类的情况下，无需过多地与这些样式作斗争。

其他网站的做法如何？

Luke 做了一些调查！感谢 Luke。

网站	有默认表格样式吗？
Mozilla	没有
MDN	没有
CSS Tricks	有
维基百科	没有
谷歌	没有
eBay	没有
Smashing Magazine	没有
Awwwards	没有
推特	没有
jQuery	有
Modernizr	没有
GitHub	没有
W3C	没有
CodePen	没有
InvisionApp	没有
苹果	没有
雅虎	没有
亚马逊	没有
PayPal	没有
Netflix	没有
Dropbox	没有
StackOverflow	没有
CNN	没有
微软	没有
Gumtree	没有
领英	没有
News.com.au	没有
澳大利亚气象局	没有
澳大利亚广播公司	没有
RealEstate.com.au	没有
Tumblr	没有
IMDb	没有
Seek	没有
联邦银行	没有
澳新银行	有
The Verge	没有
BBC	没有
南澳政府	没有
MailChimp	没有
Adobe	有
Telstra	没有
Target	有
JB Hi-fi	没有

似乎不使用默认表格样式很流行。

重置怎么办？

最流行的重置确实有

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

我觉得这有点过于强势了。

Normalize 没有对它们进行任何处理，这很有说明意义。这意味着默认表格在跨浏览器渲染时并没有非常大的差异（没有？），所以不用担心。

大型框架怎么办？

Bootstrap 几乎没有触及表格的默认样式，但提供 .table、.table-striped 和其他一些您可以选择使用的样式。
Foundation 确实从一开始就为默认表格设置样式。

50/50 分裂。

想法

就我个人而言，我倾向于拥有表格的默认样式，至少在作用域限定到内容区域的方式下。我不使用表格来做任何除了表格数据之外的事情，而且我不倾向于需要大量关于表格数据呈现方式的变体。即使我需要，创建一些变体类也不算特别困难的任务。

Brendan

# 2016年2月25日

在每个项目中，都会出现您需要使用表格而不需要或只用少量样式的情况，撤销这些样式比添加一个类要困难得多 - 我是吃过苦头的，我们现在使用 .presentation-table 和 presentation-table–zebra :)

Paul Wallas

# 2016年2月25日

我个人认为，覆盖浏览器计算的样式，并使用上下文类来构建样式，对于大型 Web 应用程序中使用的表格来说是一个更安全的选择。一个特定的表格样式足以满足所有表格的情况是非常罕见的。

Michael C.

# 2016年2月25日

一旦您思考了这个问题，解决方案就显而易见了。

table:not([class])
{
    // Default table styles here
}

Michael C.

评论的永久链接# 2016年2月25日
另外，以防有人真的真的想能够建立在这些默认样式之上
```
table:not([class]),
table.default_style
{
    // Default table styles here
}
```
Michael C.

评论的永久链接# 2016年2月25日
好吧，好吧，我们会格外体贴，但如果您的应用程序输出空 class 属性，您应该寻求专业帮助。:p
```
table:not([class]),
table[class=""],
table.default_styles
{
    // Default table styles here
}
```
Amelia BR

评论的永久链接# 2016年2月25日

这绝对是最灵活的方法，我已经准备好建议它了，但您抢先一步！我也喜欢使用“默认加”类选项的想法。
Paulo Griiettner

评论永久链接# 2016 年 2 月 25 日

我非常喜欢你在这里的建议……我喜欢拥有一个默认样式的想法，但不想以后覆盖它，所以，使用这种方法绝对是我可以考虑的……谢谢
Brendan

评论永久链接# 2016 年 2 月 26 日

如果你想要一个表格，它与你的 .default_style 不够相似以至于不值得使用它，但你确实想对其进行样式设置——这不可避免地涉及添加一个类，然后应用默认样式，然后你必须撤销它（与默认应用它相同的问题）或为该规则添加另一个例外。

在 css 中，10 次中有 9 次，聪明反被聪明误。KISS（保持简单愚蠢）。
Michael C.

评论永久链接# 2016 年 2 月 28 日

@Brendan 我不确定你在说什么。你能用代码示例来演示吗？
Dasrakel

评论永久链接# 2016 年 2 月 29 日
我认为最好使用一个选择退出类，而不是只将默认样式应用于没有任何类的表格。这意味着仅将此类添加到不需要正常样式的表格。这也意味着你永远不必编写撤销默认样式的样式，而是添加 undefault 类。
```
table:not(.undefault-table){
    // Default table styles here
}
```
如果将默认样式保持为最简，使用此类应该是一种罕见的例外。

Ryan Boone

# 2016 年 2 月 25 日

默认表格类（.table）。我知道它在技术上不是默认的，但添加或删除它以进行自定义样式设置很简单。它也比硬 CSS 重置更不侵入性，我已经开始发现硬 CSS 重置很烦人。

Andrew

# 2016 年 2 月 25 日

我完全赞成范围选项。我们全局重置样式，然后根据客户可以控制的内容部分对大多数演示元素（表格、UL、OL 等）进行样式设置。例如，对于客户可以通过 WYSIWYG 添加内容的任何区域，我们添加一个类或数据属性并根据该属性进行样式设置。

[data-content="editor"] {
     table { 

     }
     ol {

     }
}

使用数据属性有助于降低特异性，因此如果需要，以后更容易覆盖。

Mike Street

# 2016 年 2 月 25 日

我们的 WYSIWYG 编辑器允许插入表格，但会删除我们不想要的任何类——因此拥有默认表格类至关重要。

我认为你应该能够在网站上的任何地方使用任何元素而无需类，并且它与网站相匹配。这包括所有排版和 CMS 可以访问的任何 HTML 元素。

Dimitris

# 2016 年 2 月 25 日

我肯定会选择一个 reset 规则，然后对表格本身使用一个特定的 class。很多时候我不得不使用同一个网站/webapp 中的不同表格样式，覆盖默认样式并不方便

Anthony

# 2016 年 2 月 25 日

为什么不使用 :not 选择器，例如为所有不包含 table 类的表格设置默认样式。

table:not(.table) {
  // Default table styling
}

RioBrewster

# 2016 年 2 月 25 日

我们确实有默认的表格样式。

因为我们是一个州立机构，我们有一个巨大的网站，有很多数据表格。一致性（和可访问性）对我们来说非常重要，所以我们不想有一堆定制的表格。而且我们想让识别没有正确编码的表格变得容易。

最糟糕的是尝试对第三方服务进行品牌推广。让我难以置信的是，这些服务中有多少使用表格进行布局——而且布局很糟糕。对于一些服务，每个标题都是一个表格。

Agop

# 2016 年 2 月 25 日

如何采用混合方法？对表格样式使用一个类，然后将其混合到基于编辑器的内容区域中

.table {
    /* table styles */
}

.allContentInHereIsProbablyFromTheCMSOrSomething {
    table {
        @extend .table;
    }
}

Ben Solum

# 2016 年 2 月 25 日

这不能直接解决问题，但我在阅读问题时确实很突出

后端程序员总是很沮丧，因为他们不能“在页面上直接放一个表格”而不会看起来不好，他们坚持认为默认的表格样式是最好的方法。

为什么不从标记方程式中删除后端？为此，有许多针对各种语言的不同模板引擎或框架，可以帮助你将演示文稿/标记与数据分离。这使你和后端开发人员能够专注于你们最擅长的工作。

我不知道你的技术栈是什么，所以不知道对你来说这是否可行。但如果我是你，我会渴望获得一些数据 API :)

祝你好运，Luke！

Jonathan Neal

# 2016 年 2 月 26 日

非常感谢你分享这个。我一直都在思考这个问题，因为它与 normalize.css 和 sanitize.css 相关。此外，normalize.css 的当前（截至撰写本文时）稳定版本确实重置了表格，但这是一种有意见的重置（而且浏览器确实一致地处理默认的表格样式），这就是它被移除的原因，在 4x 版本中将保持这种方式。

Volga

# 2016 年 2 月 27 日

在我的 90% 以上的项目中，我都会在表格上使用默认样式。客户和一般使用网站并填写内容的人通常不知道如何正确地完成操作。所以，为他们做这件事是这里的主要问题。不仅如此，我经常使用 jQuery 来控制表格的响应性，因为当用户创建……例如一个 12 列表格时，它会变得非常混乱 B-)

Zak

# 2016 年 2 月 29 日

我使用 normalize，然后使用不同的类（例如——.Table–thin、.Table–wide 等）来表示不同样式的表格。这种习惯来自我之前的一个项目，在这个项目中，我们有许多不同的表格样式，它们有不同的要求。避免使用样式化的默认值可以更轻松地管理不同的样式，减少覆盖，减少混乱。

Jeremy

# 2016 年 3 月 3 日

我赞成保持根表格 css 的简洁。在合理的情况下，我会尽量避免散布需要了解其父级知识的子级 css 类。

过分地对根表格元素进行样式设置不仅会使其难以覆盖（如前所述），而且还会让修改该根表格元素的样式变得更加困难，我认为这是一个更大的问题。例如，假设你以后想在默认表格样式中添加交替的行颜色。现在，你不仅需要更新一个类，还需要浏览网站，并确保添加&:nth-row(2) { … } 没有破坏任何覆盖。对于某些更大、分布更广的项目来说，这将成为一个麻烦，尤其是在开发者不熟悉该项目的情况下，特别是在 css 在多个代码库中重复使用的情况下。

该评论线程已关闭。如果你需要分享重要信息，请联系我们。