使用表格作为表格可以接受吗?还是使用div更正确?

2024-07-01

我想知道是否可以接受使用tables 代表表格。

严格来说,名称/值对是表格数据,不是吗?表单只是用户可定制的一组名称/值对。那么使用是否正确table在这种情况下?或者我应该使用div使用 CSS 设计样式?


尝试字段集

我更喜欢将字段分解为逻辑字段<fieldset>与一个<legend>每个,因为:

  • 代码不再那么混乱
  • 默认格式是用户友好的(我特别喜欢图例的显示方式)
  • 使用 CSS 设计样式很容易

这是一个代码示例。请注意标签'for属性允许您单击该标签将焦点移动到指定的输入(它与id属性)。

<form>
  <fieldset>
    <legend>Wombat Statistics</legend>
    <ol>
      <li>
        <label for="punchstrength">Punch Strength</label>
        <input id="punchstrength" name="punchstrength" />
      </li>
      <li>
        <label for="beverage">Favorite Beverage</label>
        <input id="beverage" name="beverage" />
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend>Questions That Are Too Personal</legend>
    <ol>
      <li>
        <label for="creditcard">What is your credit card number?</label>
        <input id="creditcard" name="creditcard" />
      </li>
      <li>
        <label for="gullibility">Did you actually fill that in?</label>
        <input id="gullibility" name="gullibility" />
      </li>
    </ol>
  </fieldset>
</form>

对于基本布局,您可以使用以下内容:

label, input, textarea, select { 
  display: inline-block; vertical-align: top; width: 30%; 
}

See 本文 http://www.alistapart.com/articles/prettyaccessibleforms/以获得更深入的教程。

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

使用表格作为表格可以接受吗?还是使用div更正确? 的相关文章

  • 如何使用 css3 动画将宽度和高度设置为 100%?

    我有以下代码 HTML div div css div background tomato width 100px height 100px webkit animation animateThis 0 3s ease in webkit
  • 如何使单选按钮文本也可单击?

    我有这个单选按钮 以及此后的其他一些单选按钮
  • reCaptcha 值未出现在 $_POST 中

    我正在尝试在我的网站上使用 reCaptcha 并且 recaptcha challenge field 和 recaptcha response field 没有添加到后端的 POST 数组中 但我表单中的其余变量是 有任何想法吗 我已经
  • 不可能的? HTML 鼠标悬停边框颜色随边框折叠而变化?

    我希望有一个表格 其中所有边框 内部 外部 的宽度都是单个像素 我通过设置来实现这一点border collapse桌子上的风格 那么我希望onmouseover每个 TD 单元 改变border color为不同的颜色 如果表格边框尚未折
  • HTML/CSS:清除中间的浮动元素,而不添加不需要的标签[重复]

    这个问题在这里已经有答案了 大多数 ClearFix 技术都涉及在父容器的最底部添加内容 我最喜欢伪元素方法 因为它不会将不需要的元素添加到 HTML 中 然而 最近我发现我正在处理一个容器 其中有一些孩子漂浮 但不是全部 假设前 2 个子
  • 使用查询字符串使缓存失效,这是不好的做法吗?

    在我制作的网站上 我通常使用查询字符串参数使 CSS 和 JS 的缓存无效 如下所示 注意 这是 chrome 检查器的屏幕截图 这些查询字符串都是由我在渲染到浏览器中时制作的小系统自动附加的 一位朋友现在告诉我 使用查询字符串的缓存效果不
  • Bootstrap 4 手风琴 切换全部

    我正在尝试切换状态all通过单击按钮来折叠项目 默认情况下我希望它们全部关闭 该按钮应该Open All or Close All 根据docs https getbootstrap com docs 4 0 components coll
  • javascript 中可滚动区域/div 的增量单位?

    在 javascript 中我可以确保我的大 div 垂直滚动 仅以 比方说 16 像素为单位 在 Java 中 这些被称为 增量单位 我在 javascript 中找不到类似的东西 我想确保部分滚动时的某个区域 div 始终是视图 16
  • HTML 使用 Javascript 比较 2 个日期

    我正在尝试使用 Javascript 比较 2 个日期 如果 myDateL 位于 mydateR 之后 则单击该按钮时会显示一个消息框 我的代码有什么问题吗 我知道我见过类似的线程 但我无法理解 我希望有人能帮助我解决这个问题
  • 悬停时用倾斜背景填充元素

    我正在尝试创建一个CSS按钮悬停效果 但我没能用倾斜的形状填充元素 悬停效果是如何规划的 屏幕截图 1 实际看起来如何 屏幕截图 2 我希望悬停效果看起来像斜边 button sliding bg color 31302B backgrou
  • 将元素粘贴到滚动上固定元素的底部?

    基本上 我想要实现的目标是让辅助导航在滚动时与主导航的底部相遇后立即粘在主导航的底部 我仍在学习 jQuery 并且我已经开始抓狂了 编辑 意识到我没有解释到目前为止我已经到了哪里 该类被添加到元素中 但是它没有固定在主标题下方 而是从视口
  • 如何禁用图像上的高亮显示

    I m trying to disable highlight on an image when I drag my mouse over an image it is highlighted Take a look 多谢 Use 用户选择
  • 属性的状态:已弃用或已过时?

    我是 HTML 5 的新手 有问题需要在diverseW3 HTML 标准化文档获取属性的状态 例如 bgcolor的属性自 HTML 4 01 起 不应再使用该元素 它已被弃用 看 http www w3 org TR html4 pre
  • 如何通过PHP获取div?

    我得到一个页面使用file get contents来自远程服务器 但我想过滤该页面并从中获取一个使用 PHP 具有 text 类的 DIV 我开始于DOMDocument但我现在迷路了 有什么帮助吗 file file get conte
  • 使用 AJAX 提交表单,将表单数据传递给 PHP,无需刷新页面 [重复]

    这个问题在这里已经有答案了 谁能告诉我为什么这段代码不起作用
  • 媒体查询和 Bootstrap 有什么区别? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 奇怪的是 CSS3 媒体查询和 Bootstrap 之间的区别是什么 我访问过很多网站 但每个人都说 两者都是为了网站的响应能力 如果
  • 表格单元格中文本的垂直对齐方式

    这是我的表格的一部分 它是一个表格 这只是两个 td s in a tr 我想得到描述向上 到表格单元格的顶部 而不是停留在底部 我怎样才能做到这一点 td description vertical align top where desc
  • 当没有电子邮件客户端时,“mailto:”会做什么?

    我正在开发一个网站 什么是mailto 如果没有电子邮件客户端 如 Outlook Thunderbird 等 如何打开 它可以在我的电脑上运行 该电脑装有 Outlook 但如果有人想要怎么办 mailto 例如 在 gmail com
  • HTML / Javascript - 通过单击父行来展开和折叠表行(子行)

    我几天来一直在尝试解决一个问题 终于明白 如 果没有帮助 我将不会成功 我想做一件我们每天在互联网上看到的常见事情 能够单击表格行以显示更多详细信息 但这里的更多细节并不意味着文本块 而是指与父行具有相同形状的子行 以下是 HTML 表格的
  • HTML5离线缓存谷歌字体API

    我正在尝试创建一个离线 HTML5 测试应用程序 并同时使用新的 google fonts api 有谁知道如何缓存远程字体 简单地将 api 调用放入缓存清单中是行不通的 我认为这是因为 api 实际上加载了其他文件 ttf eot 等

随机推荐

  • 提高 PostgresQL 聚合查询性能

    我正在聚合 Postgres 表中的数据 查询大约需要 2 秒 我希望将其减少到不到一秒 请参阅下面的执行详细信息 Query select a search keyword hll cardinality hll union agg a
  • 点击 FCM 通知消息时如何获取消息正文?

    当应用程序在后台时 通知消息是通过Notification传递的 当点击通知时 应用程序启动 我如何获取消息正文 意图是这样的 Bundle google sent time 1470813025421 from 568540028909
  • 在Power BI中更改散点图的轴

    我需要更改增强型散点图原始代码中轴的类型 我需要一个日期列而不是日期计数 我正在尝试编辑可视化的原始代码 但我不知道如何正确地做到这一点 它尝试执行以下操作 我更改了以下行 xScale
  • GitHub Actions 中针对 Oauth 令牌的 Web 浏览器身份验证

    我正在尝试使用 GitHub Actions 通过 R 脚本使用 OAuth 2 0 令牌查询 GitHub API 当我运行代码时 它在我的本地计算机上运行良好 其中弹出一个浏览器窗口 指示 等待浏览器中的身份验证 我可以手动关闭该窗口
  • div 刷新,无需单击按钮

    如何使 div 刷新 例如 10 秒后 并执行 run query 函数而不单击按钮 div strong Quote of the Day strong div div a Next quote a div Use 设置时间间隔 http
  • NSPopover 未出现

    我真的希望我能更具体 但不幸的是 我不能 所有适当的对象都是非零的 并且所有适当的方法调用都 大概 成功完成 但是我的NSPopover只是永远不会出现 也没有调用任何委托方法 ivars NSPopover tagPopover NSVi
  • 绑定方法和不绑定方法的区别

    我现在已经参与了几个 React 项目 并且我注意到在一个项目中 每个新方法都没有绑定 实际差异是什么 如果有的话 如果你可以像第二个例子那样做 为什么还要绑定呢 在第一种情况下 代码如下所示 constructor props super
  • 数据注释“NotRequired”属性

    我有一个有点复杂的模型 我有我的UserViewModel它有几个属性 其中两个是HomePhone and WorkPhone 两种类型PhoneViewModel In PhoneViewModel I have CountryCode
  • 从栈(Frame)对象中获取函数对象

    我为模块编写了一个自定义日志记录类logging我叫的call 对于这个类 我希望将其放置在任何函数 方法中 并记录函数名称及其参数以及调用函数时使用的所有值 这对于类方法来说效果很好 Foo bar self a 1 b 2 c 3 ar
  • Qt5.4中如何获取网页的contentSize-QtWebEngine

    我正在使用新的 Qt5 4 和 QtWebEngine 模块 据我所知 mainFrame 不再存在 如何获取页面的 contentSize 大小以及如何渲染它 我尝试使用 setView 和 view 但不起作用 我找不到任何原生的 Qt
  • PublishResult 内的 ConcurrentModificationException - ArrayAdapter

    我继承的一些源代码有时会在这一行抛出 ConcurrentModificationException for String c filteredList body Override protected void publishResults
  • fclose() 之后 fwrite() 成功

    我遇到了一个奇怪的行为fwrite 我关闭流后成功fclose 但该文件不会被覆盖为fflush fails 我的代码是 int main int argc char argv FILE file fopen file txt w if f
  • hyperledger-composer v1.1:无法实例化链码

    我目前正在研究 hyperLedger Composer v1 1 并正在遵循教程 我设法将链代码安装到网络上 但它在实例化时失败 有人可以告诉我为什么吗 任何帮助表示赞赏 Command 作曲家网络启动 networkNametutori
  • Npgsql:一个连接,多个命令

    是否可以针对一个连接执行多个 NpgslqCommand 我的意思是 conn Open ExecuteCommandA conn ExecuteCommandB conn ExecuteCommandC conn conn Close 我
  • 如何将 Postgres JSONB 数据类型与 JPA 结合使用?

    我没有找到使用 JPA EclipseLink 从 PostgreSQL 映射 JSON 和 JSONB 数据类型的方法 有人在 JPA 中使用这种数据类型并且可以给我一些工作示例吗 所有答案都帮助我找到了适合 JPA 的最终解决方案 而不
  • 评论插件审核工具不起作用

    我正在尝试设置 Facebook 评论社交插件 该插件将被设置为我们网站上的每个产品页面都会有一个带有唯一 URL 的评论插件 我希望能够对所有评论进行统一审核 这应该可以通过 Facebook 上的评论审核工具来完成 我可以将社交插件放在
  • DataTable 不是 DataTables JQuery 库的函数错误

    我有一个使用 Datatable 库的简单示例 我让它与 JSFiddle 一起工作 http jsfiddle net 3hhn7y7f http jsfiddle net 3hhn7y7f 但是当我尝试使用实际文件执行此操作时 出现以下
  • VHDL RS-232 接收器

    我一直在尝试采用 FSM 方法设计 RS 232 接收器 我承认我对 VHDL 没有非常全面的理解 所以我一直在即时编写代码并边学习边学习 然而 我相信此时我已经碰壁了 我的问题是我的代码中有两个进程 一个用于触发下一个状态 另一个用于执行
  • 如何从 django 中的 RawQuerySet 检索值?

    我的输入查询是 query select from tab1 left join tab2 on tab2 patient id tab1 patient id tab3 left join tab4 on tab4 patient id
  • 使用表格作为表格可以接受吗?还是使用div更正确?

    我想知道是否可以接受使用tables 代表表格 严格来说 名称 值对是表格数据 不是吗 表单只是用户可定制的一组名称 值对 那么使用是否正确table在这种情况下 或者我应该使用div使用 CSS 设计样式 尝试字段集 我更喜欢将字段分解为