TH和TD HTML表格标签的区别是什么?

罗马专栏

盖蒂图片社

桌子长期以来一直饶恕了网页设计。很多年前,HTML表被用于布局,这显然不是它们的意图。随着CSS升到网站布局的流行用法,“表是坏的”。不幸的是,许多人误解了这一点,认为HTML表总是不好的。事实并非如此。事实上,当HTML表被用于其他目的(即显示表格数据(电子表格、日历等))时,它们是糟糕的。如果你正在建立一个网站,并且有一个带有这种表格数据的页面,你应该毫不犹豫地使用HTML表在你的页面。

和做什么?

标签,或“表格数据”标签,在HTML表格中的表格行中创建表格单元格。这是包含任何文本和图像的HTML标记。基本上,这是表的主力标记。标记将包含HTML表的内容。

标记或“表标题”在许多方面类似于。它可以包含相同类型的信息(虽然您不会在中放置图像,但它将特定单元格定义为表标题。

大多数Web浏览器将字体重量更改为粗体并将其驻留在单元格中的内容。当然,你可以使用CSS样式为了让这些表头和标签的内容看起来像你想在呈现的网页上看到的任何方式。

什么时候应该使用而不是?

当您希望将单元格中的内容指定为该列或行的标题时,应该使用标记。表头单元格通常位于表的顶部或侧边——基本上是列顶部的标题,或最左边的标题或行开头的标题。这些标题用于定义它们下面或旁边的内容,使表格及其内容更容易检查和快速处理。

不要使用适合您的细胞。因为浏览器倾向于以不同的方式显示表头单元格,一些懒惰的网页设计师可能会试图利用这一点,当他们想要内容加粗和使用标签为中心的。这有几个原因很糟糕:

  1. 你不能依赖网页浏览器总是以这种方式显示内容。未来的浏览器可能会默认改变颜色,或者对内容不做任何视觉上的改变。你不应该仅仅依赖默认的浏览器样式,也不应该因为默认的“外观”而使用HTML元素。
  2. 语义错误。读取文本的用户代理可能会添加诸如“行标题:您的文本”之类的声音格式,以表明它位于单元格中。此外,一些web应用程序在每个页面的顶部打印表格标题,如果单元格实际上不是一个标题,而只是因为风格原因而使用,这将导致问题。总之——以这种方式使用标签会导致许多用户的可访问性问题,特别是那些使用辅助设备访问您的网站内容的用户。
  3. 你应该使用CSS.来定义单元格的外观。的分离风格(CSS)和结构(HTML)多年来一直是Web设计中的最佳实践。再次使用a,因为该单元格的内容是标题,而不是因为您喜欢浏览器默认呈现该内容的方式。
这个页面有用吗?