使用 table th td 实现的表格，与 css-grid + div 实现的表格有什么区别吗？

Question

使用 table th td 实现的表格，与 css-grid + div 实现的表格有什么区别吗？

Answer 1

<table> 有一些自动布局的机制，你可以了解一下 display: table，display: table-row 等布局相关的属性。

display:grid 基本上是固定的。

所以速度上来说，后者快很多。在较小尺寸的屏幕上，比如移动端，就更好用。

Answer 2

border-collapse

border-collapse - CSS：层叠样式表 | MDN

这是表格特有的 CSS 属性，还可以通过 border-spacing 来控制 border 之间的间隔

table-layout

table-layout - CSS：层叠样式表 | MDN

• auto：默认值，这时候对 column 设置宽度其实是在设置这一列占总宽度的份额，可以想象为 flex-grow/flex-shrink 属性
• fixed: 使用固定的列宽，如果列设置为 50px 的宽度，那么这一列的宽度就会是 50px

总结

虽让上面两个 CSS 属性是 table 元素才能使用，但是 grid 也可以通过其它的方式达到类似的效果

table 能做的 grid 都可以做

不过，为了更好的 html 语义化，以及实现一个 table 的方便程度。很多时候还是使用 table 元素。

另外，table 元素在页面中如果被选中复制，很多软件在黏贴的时候是可以识别这个 table html 的，然后会被粘贴为一个 table。 grid 一般是不支持的。