日历应该用表格来表示吗?为什么 Google 日历只使用表格作为列?

2024-04-22

这不是另一个一般的“一般布局的表格与 div 元素”类型的问题,例如“为什么不使用表格来布局” https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html问题。


我正在开发一个时间表/日历项目,并且我一直认为日历是何时使用表格的示例。尽管快速浏览一下 Google 日历的结构后,它似乎由一个表组成,其中包含一个<td>对于每一列以及每一列内,一个事件是<div>里面有定义列表。

为什么这有好处?

我自己的想法:

  • 当有多个不同长度的事件同时开始时(以相同的时间开始),表格的样式可能会更麻烦,要漂亮且紧凑。<td>)。可能出现不需要的空白。
  • 当用户在页面加载后添加事件时,更新表会变得更加困难,例如使用 JavaScript(因为表头的行/列跨度可能必须更改)
  • 如果使用表格,x 轴/顶部标题和单元格的宽度以及 y 轴/左侧标题和单元格的高度将自动匹配。如果没有表格,管理起来可能会很困难。

这有关系吗?应该表格数据always存储在实际的表中?


下面是一个简化的Google 日历列的示例:

<td> <!-- column -->
        <div> <!-- start event -->
            <dl>
                <dt>START TIME – END TIME </dt>
                <dd>EVENT TITLE</dd>
            </dl>
        </div> <!-- end event -->
</td> <!-- end column -->

以下是一个完整的示例:

<td class="tg-col"> <!-- column td -->
    <div id="tgCol0" class="tg-col-eventwrapper" style="height:1008px;margin-bottom:-1008px;"> <!-- column div -->
        <div class="tg-gutter">
            <div class="ca-evp130 chip " style="top:588px;left:-1px;width:100%;"> <!-- start event div -->
                <dl class="cbrd" style="height:35px;border-color:#9FC6E7;background-color:#E4EFF8;color:#777777;">
                    <dt style="background-color:;">START TIME – END TIME <i class="cic cic-dm  cic-rcr" title="Recurring event">&nbsp;</i></dt>
                    <dd><span class="evt-lk ca-elp130">EVENT TITLE</span></dd>
                    <div><!-- start masks -->
                        <div class="mask mask-top" style="border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                        <div class="mask mask-bottom" style="border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                        <div class="mask mask-left" style="height:38px;border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                        <div class="mask mask-right" style="height:38px;border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                    </div><!-- end masks -->
                    <div class="resizer"> <!-- start resizer -->
                        <div class="rszr-icon">&nbsp;</div>
                    </div> <!-- end resizer -->
                </dl>
            </div> <!-- end event div -->
        </div> 
    </div> <!-- end column td -->
    <div id="tgOver0" class="tg-col-overlaywrapper"></div> <!-- column overlay div -->
</td> <!-- end column td -->

Edit:

不要忘记说明 Google 日历的结构为何如此,例如为什么 Google 日历有一个表格但仅将其用于列?


就我个人而言,我会选择 div 而不是表格。这并不是说表格完全错误,只是 div 在设计样式时可以更加灵活,特别是如果您添加其他元素(例如可能跨越 2 个日期的会议)等。

Div 也比表格更有利于流畅的布局。

它既是又不是表格数据,我想这取决于您对其功能和布局的了解程度。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

日历应该用表格来表示吗?为什么 Google 日历只使用表格作为列? 的相关文章

随机推荐

  • iOS:使用覆盖裁剪从 UIImagePickerController 相机抓取的静态图像

    我是 iOS 新手 过去一周我一直在网上寻找教程 例如 处理 Exif 图像 http niftybean com main blog 16 selecting regions from rotated exif images on iph
  • 计算数组的平均值

    我想使用数组计算平均数 我希望程序询问成绩的数量 然后我想输入成绩数字 在我想获得平均输出之后double 到目前为止 这是我的代码 public class Average public static void main String a
  • 使用 purrr::map 将多个数据帧写入 csv 文件 [重复]

    这个问题在这里已经有答案了 PROBLEM 我有一个数据帧列表 应将其作为 csv 文件写入磁盘 假设这是数据框列表 dfs lt list iris mtcars 什么没有奏效 我尝试像这样构建正确的文件名 但它不起作用 dfs gt m
  • 如何在AWS Lambda中模拟multiprocessing.Pool.map()?

    AWS Lambda 上的 Python 不支持multiprocessing Pool map 如记录在这另一个问题 https stackoverflow com questions 34005930 multiprocessing s
  • Breeze 使用 DB EntityType 管理 NODB EntityType

    我正在使用 Papa 的课程 CCJS 代码来研究 Breeze js 和 SPA 使用此代码 我尝试管理来自服务器的附加信息 但这不是来自 EntityFramework 的元数据中包含的实体 所以我创建了一个名为 Esto 的 NO D
  • 循环直到在表中找到 2 个特定值?

    我试图找到一种更聪明的方法来解决这个问题 这是与游戏相关的代码的摘录 它循环遍历每个背包的每个插槽 直到找到铲子和绳子 local continue local foundShovel foundRope for i 0 Container
  • 错误:无法安全地评估递归定义模块的定义

    我很想了解为什么会发生此错误以及解决该错误的最佳方法是什么 我有几个文件types ml and types mli它定义了一个变体类型value可以是许多不同的内置 OCaml 类型 float int list map set 等 由于
  • 使用 aes_256_cbc 密码加密时的默认 IV 是多少?

    我在一个文件中生成了一个随机 256 位对称密钥 用于使用 OpenSSL 命令行加密一些数据 稍后我需要使用 OpenSSL 库以编程方式解密该数据 我没有成功 我认为问题可能出在我正在使用 或没有使用 的初始化向量中 我使用以下命令加密
  • Codeigniter 3.0.4 在我的服务器上出现 404 Page Not Found 错误

    我是 codeigniter 的新手 在我的本地主机上开发一个网络应用程序后 我将我的网站上传到服务器上 然后导入我的数据库 之后我更改了database php文件中的数据库设置 并且我还更改了config php文件中的基本url 我得
  • 使用宏将word文档中的公式转换为图像

    我有这个宏可以将文档中的所有形状转换为图像 Dim i As Integer oShp As Shape For i ActiveDocument Shapes Count To 1 Step 1 Set oShp ActiveDocume
  • MVVM 层次结构中的更改通知

    假设在某个抽象 ViewModel 基类中 我有一个普通的旧属性 如下所示 public Size Size get return size set size value OnPropertyChanged Size 然后 我创建一个更具体
  • 将字符串转换为时间并在 golang 中解析

    我正在从文件中读取时间戳 并将该值分配给t t 2016 11 02 19 23 05 503705739 0000 UTC 当我尝试解析字符串时 time err time Parse 2016 11 02 19 18 57 149197
  • RxSwift 订阅块未调用

    我正在玩 RxSwift 但我被一个简单的玩具程序困住了 我的程序本质上包含一个模型类和一个视图控制器 该模型包含一个可观察对象 该可观察对象在异步网络调用之后在主队列上更新 视图控制器在 viewDidLoad 中订阅 AppDelega
  • php mysql pdo 连接不会在不破坏语句处理程序的情况下关闭

    我想在我的 php 脚本中显式关闭 mysql 连接以防止连接过多 使用以下代码 不加 sth 空 在上面的代码中 我无法关闭我的 mysql 连接 正如 PDO 文件中所述 要关闭连接 您需要通过确保销毁该对象 删除所有剩余的引用 为了确
  • 关于 jsch 中 sudo su - 用户的想法

    我在 jsch 中使用 sudo su 时遇到问题 下面是我的帖子 exec java package com test import com jcraft jsch import java awt import javax swing i
  • SQL Server返回代码-6,是什么意思?

    我有一个没有任何问题的存储过程 即返回代码为 0 在某些情况下 我会引发用户定义的错误 gt 50000 在这些情况下 回报是 6 我只是好奇 6 是什么意思 我没有在程序中设置返回码 因此这个数字是SQL Server 系统 生成的 我发
  • build.xml 将日期和时间设置为文件名

    我想设置带有日期和时间的文件名 因此我想创建名为的文件behat 20140913 195915 html但是下面的示例将名称设置为behat yyyymmdd hhiiss html 有人知道问题的解决办法吗 我跟着这个例子 http a
  • 带功能区的 Spring Cloud 不会忽略关闭的服务器

    我正在遵循有关尤里卡客户端负载平衡的 Spring 指南 https spring io guides gs client side load balancing https spring io guides gs client side
  • 如何从ajax加载数据到zabuto日历插件?

    作为标题 我尝试将数据从 ajax 加载到 zabuto 日历 但似乎不起作用 参考 zabuto 日历http zabuto com dev calendar examples show data html 我想在单击上个月或下个月的导航
  • 日历应该用表格来表示吗?为什么 Google 日历只使用表格作为列?

    这不是另一个一般的 一般布局的表格与 div 元素 类型的问题 例如 为什么不使用表格来布局 https stackoverflow com questions 83073 why not use tables for layout in