任何表中是否都必须有?

2023-12-13

是否有必要有<th>在任何表中?即使表格没有标题?

表还有 3 个其他标签<thead> <tbody> <tfoot>即使我没有表页脚,是否有必要全部使用? Firefox 默认情况下将所有这些添加到代码中。

以及是否有必要,<th>总是应该在<thead>

如果我在从客户收到的内容中有一个标题,并且标题来自表格外部但与表格相关,那么我应该如何将该标题放置在表格中

如上表

<h3>Heading of table<h3>
<table>......</table>

作为表格标题

<table>
<thead><tr rowspan=3><th>Heading of table</th></tr></thead>

或作为表格的标题

<table>
<caption> Heading of table</caption>

哪个对屏幕阅读器有好处并且语义正确?


根据HTML DTD这是 HTML 表格的内容模型:

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION  - - (%inline;)*     -- table caption -->
<!ELEMENT THEAD    - O (TR)+           -- table header -->
<!ELEMENT TFOOT    - O (TR)+           -- table footer -->
<!ELEMENT TBODY    O O (TR)+           -- table body -->
<!ELEMENT COLGROUP - O (COL)*          -- table column group -->
<!ELEMENT COL      - O EMPTY           -- table column -->
<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

所以这是非法语法:

<thead><th>Heading of table</th></thead>

它应该是:

<thead><tr><th>Heading of table</th></tr></thead>

<th>任何地方都不需要元素。它们只是两种细胞类型之一(另一种是<td>)您可以在表行中使用。 A<thead>是一个可选的表部分,可以包含一行或多行。

Edit: As to why to use <thead>有几个原因:

  1. 语义:您正在区分表的内容和“元数据”。这最常用于划分列标题和数据行;
  2. 辅助功能:它可以帮助使用屏幕阅读器的人理解表格的内容;
  3. 非屏幕媒体:打印多页表可以让您将<thead>每页顶部的内容,这样人们无需向后翻几页就可以理解各栏的含义;
  4. Styling:CSS可应用于<tbody>元素,<thead>元素,两者或某种其他组合。它为您提供了其他东西来编写选择器;
  5. JavaScript:使用 jQuery 和类似库时经常会出现这种情况。额外的信息对编写代码很有帮助。

作为 (5) 的示例,您可以这样做:

$("table > tbody > tr:nth-child(odd)").addClass("odd");

The <thead>元素意味着这些行不会以这种方式设置样式。或者你可能会这样做:

$("table > tbody > tr").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

with:

tr.hover { background: yellow; }

这再次排除了<thead> rows.

最后,许多相同的论点也适用于使用<th>元素超过<td>elements:您表明该单元格不是数据,而是某种类型的标题。通常,这些单元格会被分组为一行或多行<thead>部分或成为每行的第一个单元格,具体取决于表格的结构和性质。

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

任何表中是否都必须有? 的相关文章

  • 创建一个简单的 10 秒倒计时

    我想要一行这样写的 Your download will begin in 10 9 8 etc Beginning on page load seconds 我已经设置了 10 秒下载文本 并且我还查看了其他 stackoverflow
  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • 将文本大小调整为矩形 在 Canvas HTML5 中调整大小

    我是 Canvas 新手 我正在创建一个网站 以在调整矩形大小时增加文本 我尝试了很多 但没有任何效果 实际上 我希望如果我仅按其宽度调整矩形大小 向左拉伸 向右拉伸 则仅应增加文本宽度而不是字体大小 我已经完成了字体大小 但发现增加孤立文
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis
  • 我可以从命令行打印 html 文件(带有图像、css)吗?

    我想从脚本中打印带有图像的样式化 html 页面 谁能建议一个开源解决方案 我使用的是 Linux Ubuntu 8 04 但也对其他操作系统的解决方案感兴趣 你可以给html2ps http user it uu se jan html2
  • Java Web 技术中的 AJAX 自动完成文本框(JSP 和 servlet)

    我需要您的帮助 了解如何使用 Java Web 技术 JSP Servlet 和 AJAX 使 HTML 输入文本元素像 Google 的 AJAX 搜索引擎 输入文本元素一样工作 下拉列表中的数据将来自数据库表 例如分别是 MySQL 或
  • 我应该使用哪种文档类型?

    如果我想使用可定制的 div 我应该使用哪种文档类型 具有div动画 图像移动 设置div不透明度等 我尝试通过 javascript 创建一个 div 设置其背景颜色 位置 宽度和高度 并向其添加 onmouseover 事件 一切正常
  • 通过 jQuery 选择动态 HTML 元素

    我正在构建一个 ASP NET MVC 应用程序 并且正在使用jQuery Blueimp https github com blueimp jQuery File Upload动态添加到页面的 PartialView 上的插件 根据插件的
  • HTML:如何强制链接在新选项卡而不是新窗口中打开[重复]

    这个问题在这里已经有答案了 I use target blank 在新选项卡中打开链接 但在 IE 中它会打开一个新窗口 这是完全合乎逻辑的 因为这就是 blank应该做的 我不知道如何target blank 在其他浏览器中的行为 有什么
  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • 如何在 Lift 框架中添加新页面

    如何在 lift 中的 webapp 目录中添加一个可供用户访问的新页面 目前只能通过index html访问http localhost 8080 com http localhost 8080 or http localhost 808
  • 如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框?

    我正在使用新的 Twitter Bootstrap 3 并尝试放置一个像这样的搜索框 如下 在顶部导航栏中 在 Bootstrap 2 中 可以这样完成
  • 如何在通过 .ajaxForm() 提交表单之前执行一些操作?

    我正在使用 ajaxForm 框架来发送我的数据 而无需重新加载我的页面 ReplayForm ajaxForm success function data alert Success 现在 我想在提交表单之前检查一些条件 如果条件为假 则
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • 更改API数据输出的布局

    我是 API 集成和 PHP 的新手 我最近将 VIN 解码器集成到我的应用程序中 在输入框中输入车辆的 VIN 选择提交 然后就会显示 API 数据库中有关该车辆的所有信息 数据存储为关联数组 其中包含类别及其相应元素 例如 对于 VIN
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • 如何使跨度标签不可删除?

    我正在尝试使 contenteditable div 内的跨度标记不可删除 div Editable span Read Only span div 只读范围确实是只读的 但我可以通过单击删除键来删除整个范围 有没有一种属性方法可以告诉sp
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a

随机推荐

  • 比较 ReadOnlyMemory 实例的最佳方法?

    The ReadOnlyMemory
  • 显示/隐藏 div,使用纯 JS

    My CSS a x200 visibility hidden width 200px height 200px background color black My JS 我的HTML div asd div
  • 如何将像素转换为 xamarin.forms 单位?

    每英寸有 160 个单位 2 如果我创建了一个Photoshop文件为 72dpi那么每英寸就有 72 个点 3 如果元素是88px身高在Photoshop那么我必须将其设置为xamarin 如果手机是 360dpi 那么 xamarin
  • 将双精度型转换为整型?

    我的代码如下 int main int argc char argv double f 18 40 printf d n int 10 f return 0 在VC6 0中结果是184 而Codeblock中结果是183 为什么呢 原因是
  • Symfony 任务 - 内存泄漏

    我编写了一个 symfony 任务来填充示例数据的数据库 这是一段示例代码 gc enable Propel disableInstancePooling public function test for i 0 i lt 10000 i
  • 保持绘制图形 - 删除 super.paintComponent

    我有一个名为 Foo 的类 它扩展了一个名为 Bar 的类 该类扩展了 JPanel 并实现了 ActionListener 当我选择圆形并单击绘制按钮时 我会绘制一个圆形 而当我按矩形并单击绘制时 它会擦除 以前的形状并绘制一个矩形 但是
  • osmdroid 经典标记重叠的解决方法

    我正在使用 osmdroid 和 osm Bonus Pack 开发 Android 离线地图应用程序 并从外部存储加载图块和数据 现在 随着数据的增长 标记开始变得拥挤在一起 我什至有同一建筑物上两个地方的情况 我知道这种问题以前已经被问
  • 范围报告:无法在其他机器上看到屏幕截图

    我可以在本地计算机上生成带有屏幕截图的范围报告 但是 当我将报告邮寄给其他人 或在不同的计算机上打开 html 时 屏幕截图不可见 它说该路径无效 在附加屏幕截图时 我给出了本地计算机的路径 它也在其他机器上搜索相同的路径 我也尝试将 ht
  • 在 Python 中使用 Twain 模块

    我有 64 位 Windows 和 64 位 Python 在里面吐温文档说 只支持32位 我用过吐温数据源安装我的 64 位机器并使用此代码连接扫描仪设备 import twain sm twain SourceManager 0 ss
  • 如何在 UWP 中使用 3 级语义缩放?

    我想使用语义缩放 或其效果 在我的 UWP 应用程序中选择位置 我想首先选择县 第二选择城市 第三选择位置 有人对此有真实的想法吗 我搜索了多个缩放以进行语义缩放 但这显然是不可能的 我使用了两个语义缩放视差 但这也有其问题 有人可以帮忙吗
  • Neo4j 中跨多个字段的全文搜索示例?

    我见过一些简单的文本搜索示例STARTS WITH name例如 http www jexp de blog html full text and spatial search in neo4j 3 html https blog knol
  • 为什么验证规则的行为(仅)与 onDisconnect 更新不同?

    我用 firebase 做了一些测试 发现规则验证之间存在差异onDisconnect update 和简单的update using newData parent 在规则中 当我使用update 有用 但与onDisonnect upda
  • Python 列表的 += 运算符等同于append() 或extend() 吗? [复制]

    这个问题在这里已经有答案了 Python 列表有一个 运算符以及append and extend方法 If l是一个列表 是l 相当于l append l extend 两者都存在 还是两者都不存在 在 python 中 列表上的 相当于
  • Make file 不检测源文件中的更改

    我对 make 文件非常陌生 我面临着非常基本的问题 我的 Makefile 没有检测到我对源文件所做的更改 问题是 当我第一次从源文件生成 consoleapp 二进制文件时 我得到了预期的输出 但是当我再次更改源文件并再次运行 make
  • 为什么这个 awk 脚本看不到 shell 变量?

    请告诉我为什么这个程序不起作用 帮助我改进它 for i in seq 2 30 do awk if i lt 0 05 print 1 i test txt gt phen i txt done 文件 test txt 如下所示 name
  • 如何从 swift 将浮点数数组的数组传递给 C++ 函数

    我有一个 C 函数声明于Bridging Header h struct MyFloat3 float x float y float z struct MyFloat3 ExtCurl const float triangle 我已按照以
  • Polly 的 Policy.TimeoutAsync 不适用于异步上下文中的 PolicyWrap

    这是一个完全有效的示例 复制 粘贴它并尝试一下 只需获取 Polly Nuget 我有以下控制台应用程序代码 它向 上的 HTTP 客户端沙箱发出 POST 请求http ptsv2 com t v98pb 1521637251 post
  • 将 EF CodeFirst 基类转换为继承类(使用每个类型表)

    我使用 EF Code First 并定义了两个类 如下所示 public class User public int Id get set public string Username get set public string Emai
  • 为 Firebase 生成 JWT

    我正在尝试为 Windows 上的 C NET 编写一个自定义 JWT 令牌生成器 以便在 Google Firebase 中使用 我从 StackOverflow 上的几个不同地方获取了源代码 我正在尝试重新发现它们 这样我就可以相信原作
  • 任何表中是否都必须有?

    是否有必要有 th 在任何表中 即使表格没有标题 表还有 3 个其他标签 thead tbody tfoot 即使我没有表页脚 是否有必要全部使用 Firefox 默认情况下将所有这些添加到代码中 以及是否有必要 th 总是应该在 thea