造型开放时间

Question

我正在尝试创建像this website这样的开放时间。这个看起来像是在表格中完成的，但是在CSS中实现同样功能的最有效/最传统的方法是什么？

Answer 1

在我们应该使用tables时，我们已经习惯于避免tables（在大多数情况下这是一件好事）我们尝试使用其他代码。

当内容可以放在矩阵上时，这很好地表明它是表格数据，可以这样设置。

在这种情况下，位置显示在一个轴上，日期显示在另一个轴上，小时数列在适当的位置。这绝对是tables的一种情况。

Answer 2

“在CSS中实现相同功能的最有效/最传统的方式”与现在完成的相同。它是表格数据，因此使用表格。

Answer 3

您可以同时使用div和table。我不认为会有一些不同的结果。只是保持你的CSS好，你可以得到确切的例子。如果你使用表然后给该表一个类名，这样你就可以编写它的CSS并可以控制表格属性如边框，宽度，高度很容易。

Answer 4

网站的开放时间演示文稿使用无序列表。如果右键单击网页，并在上下文菜单中选择查看源，您将能够看到HTML标记。搜索“第一学期”将向下导航至<ul>和<li>标记。 Listamatic网站显示了制作垂直列表的各种方法。