是否有必要拥有<th>在任何表? [英] Is it necessary to have <th> in any table?

查看:46
本文介绍了是否有必要拥有<th>在任何表?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

table 有 3 个其他标签 是否有必要全部使用,即使我没有表页脚.Firefox 默认在代码中添加所有这些.

是否有必要, 总是应该在

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

如上表

表格标题

<table>......</table>

作为表格的标题

<thead><tr rowspan=3><th>表标题</th></tr></thead>

或作为表格的标题

<标题>表格标题</caption>

哪个对屏幕阅读器有益且语义正确?

解决方案

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

<块引用>

<!ELEMENT CAPTION - - (%inline;)* -- 表格标题 --><!ELEMENT THEAD - O (TR)+ -- 表头 --><!ELEMENT TFOOT - O (TR)+ -- 表格页脚 --><!ELEMENT TBODY O O (TR)+ -- 表体 --><!ELEMENT COLGROUP - O (COL)* -- 表列组 --><!ELEMENT COL - O EMPTY -- 表格列 --><!ELEMENT TR - O (TH|TD)+ -- 表格行 --><!ELEMENT (TH|TD) - O (%flow;)* -- 表格标题单元格,表格数据单元格-->

所以这是非法的语法:

应该是:

是一个可选的表格部分,可以包含一行或多行.

至于为什么使用

有几个原因:

  1. 语义:您区分了表格的内容和元数据".这最常用于在列标题和数据行之间划定;
  2. 辅助功能:它可以帮助使用屏幕阅读器的人理解表格的内容;
  3. 非屏幕媒体:打印多页表格可以让您将
内容放在每页的顶部,以便人们可以理解不向后翻几页的列的含义;
  • 样式:CSS 可应用于
  • 元素、 元素、两者或其他组合.它为您提供了其他内容来编写选择器;
  • Javascript:这在使用 jQuery 和类似库时经常出现.额外信息有助于编写代码.
  • 以 (5) 为例,您可以这样做:

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

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

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

    与:

    tr.hover { 背景:黄色;}

    再次排除

    行.

    最后,许多相同的论点适用于在

    表头
    表头
    元素在任何地方都不是必需的.它们只是您可以在表格行中使用的两种单元格类型之一(另一种是 ).
    元素上使用 元素:您表示此单元格不是数据但某种标题.通常,此类单元格会在 <thead> 部分中的一行或多行中组合在一起,或者成为每行中的第一个单元格,具体取决于表格的结构和性质.

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

    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.

    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

    As a above table

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

    as a heading of table

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

    or as a caption of table

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

    Which is good for screen reader and semantically correct?

    解决方案

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

    So this is illegal syntax:

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

    It should be:

    <thead><tr><th>Heading of table</th></tr></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.

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

    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.

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

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

    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");
    });
    

    with:

    tr.hover { background: yellow; }
    

    which again excludes the <thead> rows.

    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.

    这篇关于是否有必要拥有&lt;th&gt;在任何表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    相关文章
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆