是否有必要具有在任何桌子上？ [英] Is it necessary to have <th> in any table?

问题描述

是否有必要在任何表中包含< th> ？即使表没有标题？

is it necessary to have <th> in any table? even if table has no heading?

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

table has 3 other tag <thead> <tbody> <tfoot> is it necessary to use all even if i have nothing for table footer. Firefox by default add all these in code.

，并且有必要在< th> 中始终添加< thead>

and is it necessary , <th> always should be in a <thead>

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

and if I have a heading in content received from client , and heading is from outside the table but related to table then how should i place that heading for table

作为上方表格

<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>

哪个对屏幕阅读器有益并且在语义上正确？

Which is good for screen reader and semantically correct?

推荐答案

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

According to the HTML DTD this is the content model for HTML tables:

<!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> ）。 < thead> 是一个可选的表节，可以包含一个或多个行。

<th> elements aren't required anywhere. They're simply one of the two cell types (the other being <td>) that you can use in a table row. A <thead> is an optional table section that can contain one or more rows.

编辑：关于为什么使用< thead> 的原因有很多：

As to why to use <thead> there are several reasons:

1. 语义：您要区分表的内容和元数据。这是最常用的方法，用于在列标题和数据行之间划定界限；


2. 可访问性：它可以帮助使用屏幕阅读器的人理解表的内容；


3. 非屏幕媒体：打印多页表格可能会允许您放置< thead> 每页顶部的内容，这样人们就可以在不翻动几页的情况下了解列的含义；


4. 样式： CSS可以应用于< tbody> 元素，< thead> 元素，两者或其他组合。


5. JavaScript ：使用jQuery和类似库时，通常会出现这种情况。额外的信息有助于编写代码。

1. Semantic: You're differentiating between the content of your table and "metadata". This is most often used to delineate between column headers and data rows;
2. Accessibility: it helps people who use screen readers to understand the contents of the table;
3. Non-Screen Media: Printing a multi-page table may allow you to put the <thead> contents at the top of each page so people can understand what the columns meaning without flicking back several pages;
4. Styling: CSS can be applied to <tbody> elements, <thead> elements, both or some other combination. It gives you something else to write a selector against;
5. Javascript: this often comes up when using jQuery and similar libraries. The extra information is helpful in writing code.

作为（5）的示例，您可以这样做：

As an example of (5) you might do this:

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

< thead> 元素是指行不会以这种方式设置样式。或者，您可以这样做：

The <thead> element means those rows won't be styled that way. Or you might do:

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

具有：

tr.hover { background: yellow; }

再次将< thead>

which again excludes the <thead> rows.

最后，许多相同的参数适用于在<$ c上使用< th> 元素$ c>< td> 元素：您要表示此单元格不是数据，而是某种报头。通常，这些单元格会在 部分的一个或多个行中分组在一起，或者取决于表的结构和性质，成为每行的第一个单元格。

Lastly, many of these same arguments apply to using <th> elements over <td> elements: you're indicating that this cell isn't data but a header of some kind. Often such cells will be grouped together in one or more rows in the <thead> section or be the first cell in each row depending on the structure and nature of your table.

这篇关于是否有必要具有在任何桌子上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！