空表格标记 | CSS-Tricks

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

Renato Alves

# 2012年6月17日

谢谢 Chris！帮了我很大的忙！:D

Jannik

# 2013年1月7日

我一直认为，使用表格进行布局是不好的……

fazle

# 2013年2月14日

这个代码片段有那么重要吗？如果一个人不知道 HTML 表格是什么，他为什么要来这里呢？

Shez

# 2013年3月2日

@Jannik：是的，使用表格进行布局是不好的，但这篇文章并没有提到我们应该使用表格进行布局，仅仅指出了如果我们需要显示数据（即真正的表格）时正确的使用方法。

tomasz86

# 2013年7月29日

缺少标题、列组和脚注 :P

<table> <caption></caption> <colgroup> <col> <col> </colgroup> <thead> <tr> <th></th> <th></th> </tr> </thead> <tfoot> <tr> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table>

@fazle 许多人不知道如何使用标题、表头、表主体等正确组织数据表。

Marijke

评论永久链接# 2013年9月12日

既然你提到了，别忘了id/headers 属性！
如果可以，我会因为你将tfoot放在tbody上面而给你点赞。
让我们谈谈媒体

评论永久链接# 2017年8月30日

<tfoot> 元素不应该放在<tbody>下面吗？

https://www.w3.org/TR/html/tabular-data.html#the-table-element

内容模型

按此顺序：可选的标题元素，后跟零个或多个列组元素，后跟可选的表头元素，后跟零个或多个表主体元素或一个或多个行元素，后跟可选的脚注元素，可选地与一个或多个支持脚本的元素混合。

Orbit Sites

# 2013年12月3日

我一直都在使用这个，只是想表示感谢。

@tomasz86 @Marijke
这是一个合理的评论:) 但提供的基本表格结构在大多数情况下都是

Wahhab Baldwin

# 2014年2月4日

如果 HTML5 支持是既定的，那么有时使用 display:table 方法会有一些优势

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Tables</title>
<style>
div { 
        display: table; 
    }
div div { 
        display: table-row; 
    }
div div div { 
    display: table-cell;
    background: #EEE;
    border: 1px solid #777;
    padding: 1em;
}
</style>
</head>

<body>
<div>
    <div>
        <div>Row one col one</div>
        <div>Row one col two</div>
    </div>
    <div>
        <div>Row two col one</div>
        <div>Row two col two</div>
    </div>
</div>
</body>
</html>

Fred

评论永久链接# 2014年5月6日

很棒的例子，谢谢。我一直想知道如何做到这一点。

我尝试了几分钟但没有成功，所以我想问一个问题：在上面的布局中，"DIV" 在哪里才能让顶行跨越两列或多列？它应该使用什么代码？

在使用表格的“旧”HTML 中，它是“COLSPAN”。
zsitro

评论永久链接# 2014年8月8日

什么时候？
Carlos Cordero

评论永久链接# 2016年7月7日

@Wahhab Baldwin，这是一个很好的例子，但是它可能会导致一些无障碍方面的问题。一些屏幕阅读器在浏览这些 div 中的内容时可能会迷路，或者数据对屏幕阅读器用户来说可能没有意义。语义化地编写 HTML 非常重要，它可以帮助所有用户。
另一个开发者

评论永久链接# 2017年7月28日

太棒了！做得好！太棒了！太棒了！太棒了！太棒了！

评论

发表评论 取消回复

发表评论取消回复