百科狗-知识改变命运!
--

- 表格数据 - html5 表格内容

百变鹏仔1年前 (2023-11-21)阅读数 20#技术干货
文章标签属性

HTML的

元素表示表格数据,即通过二维数据表表示的信息。

浏览器支持

所有浏览器都支持

示例

The table header
The table body with two columns
table, td { border: 1px solid #333; } thead, tfoot { background-color: #333; color: #fff; }
  • 一个可选的元素
  • 内容分类流式内容元素
    允许的内容按照这个顺序:
    • 一个可选的元素
    • 零个或多个的元素
    • 一个可选的元素
    • 任意一个:零个或多个或者零个或多个
    标签省略开始标签和结束标签都不能省略。
    允许的父元素任何支持流内容的元素
    允许的ARIA角色任意
    DOM接口HTMLTableElement

    属性

    表格标签支持全局属性。下面列出的属性现在已经弃用(请使用CSS代替)。

    • border这个整型元素使用像素,定义了表格边框的大小。如果设置为0,这意味着frame属性被设置为空。如果设置为1,表示表格具有1px大小的边框。THML5中废弃。此功能已过时。尽量避免使用它。
    • cellpadding这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位,这个像素将被应用到所有的四个侧边;如果它是一个百分比的长度单位,内容将被作为中心,总的垂直(上和下)长度将代表这个百分比。这同样适用于总的水平(左和右)空间。小贴士:不要使用这个属性,因为它已经被废弃。元素应该使用CSS定制样式。在
      元素上使用CSS属性值为collapse 的border-collapse属性,在
      元素上使用属性padding,以达到类似于cellpadding 的效果。
      • cellspacing这个属性(使用百分比或像素)定义了两个单元格之间空间的大小(从水平和垂直方向上),包括了表格的顶部与第一行的单元格,表的左边与第一列单元格,表的右边与最后一列的单元格,表的底部与最后一行单元格之间的空间。小贴士:不要使用这个属性,因为它已经被废弃。元素应该使用CSS定制样式。在
        元素上使用 CSS 的属性border-spacing,以达到类似于 cellspacing 的效果。
        • frame这个枚举属性定义了包围在表格周围的框架的哪个边必须显示。它可能有下列值:
        abovebelow
        hsidesvsides
        lhsrhs
        borderbox
        void
        小贴士:不要使用这个属性,因为它已经被废弃。元素应该使用CSS定制样式。在
        元素上使用 CSS 的属性border-styleborder-width,以达到类似于 frame 的效果。
        • rules这个枚举属性定义了在一个表格中规则的显示位置。它可以有以下值::
          • none,这表明没有规格将被显示;这是默认的值;
          • groups,这将使规则只显示在行组(row groups,通过元素定义)和列组( column groups,通过元素定义)之间
          • rows,这将使规则在行之间显示;
          • columns,这将使规则在列之间显示;
          • all,这将使规则在列和行之间显示;

          小贴士:

          • 规则的样式是依赖浏览器的(browser-dependant),并且不能被修改。
          • 不要使用这个属性,因为它已经被废弃。规则应该使用CSS定义和设计样式。使用border属性,在适当的,,,元素上。
        • summary该属性定义了一个替代文本,当表格无法在用户代理中显示的时候用来描述表格。通常,它被用来为残障人士提供可用性,比如,盲人使用盲文屏幕(Braille screen)浏览网页,从中获取信息。如果要想对于非视力受限的人来说也可以提供作用,考虑使用代替。summary 属性不是强制性的,当一个发挥它应有的作用时,可以省略summary 属性。小贴士:不要使用这个属性,因为它已经被废弃。作为替代,选择其中一种方法为表格添加描述:
          • Useprosearoundthe table(this method is lesssemantic).
          • 在表格的元素中添加描述。
          • 在表格的元素中,添加一个带有描述的元素。
        元素包含在一个元素中,并且在旁边添加散文(prose )描述。
      • 元素包含在一个元素中,并且在元素中添加散文(prose )描述。
      • 调整表格,以便不需要这样的描述(比如,使用
      • 元素)。
      • width该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值,宽度的百分比值将被定义为表格容器的宽度。小贴士:不要使用这个属性,因为它已经被废弃。规则应该使用CSS定义和设计样式。使用width属性代替。
      • 无障碍问题

        字幕

         - 表格数据 - html5 表格内容

        通过提供其值清楚,简洁地描述表格目的的元素,它可以帮助人们决定是否需要阅读表格的其余内容或跳过表格的其余内容。

        这可以帮助人们借助辅助技术(例如屏幕阅读器),经历低视力条件的人们以及有认知问题的人们进行导航。

        范围行和列

        scope标头元素上的属性在简单上下文中是多余的,因为可以推断范围。但是,某些辅助技术可能无法得出正确的推论,因此指定标头范围可能会改善用户体验。在复杂表中,可以指定范围,以便提供有关与标头相关的单元格的必要信息。

        例子

         color names and values 
        name hex hsla rgba
        teal #51f6f6 hsla(180, 90%, 64%, 1) rgba(81, 246, 246, 1)
        goldenrod #f6bc57 hsla(38, 90%, 65%, 1) rgba(246, 188, 87, 1)

        提供元素scope="col"上的声明

        将有助于描述该单元格在列的顶部。提供元素scope="row"上的声明将有助于描述该单元格是行中的第一个单元格。
        • 视障用户的MDN表
        • 具有两个标题的表•表•W3C WAI Web Accessibility教程
        • 具有不规则标题的表•表•W3C WAI Web Accessibility教程
        • H63:使用scope属性将数据表中的标头单元格和数据单元格关联| WCAG 2.0的W3C技术

        复杂表

        诸如屏幕阅读器之类的辅助技术可能难以解析非常复杂的表,以致无法以严格的水平或垂直方式关联标题单元格。通常通过colspanrowspan属性的存在来表明这一点。

        理想情况下,考虑呈现表内容的其他方法,包括将其分解为较小的相关表的集合,这些表不必依赖于colspanrowspan属性。除了帮助使用辅助技术的人员了解表格的内容外,这还可能使那些可能难以理解表格布局所描述的关联的认知问题人士受益。

        如果无法拆分表,请使用idheaders属性的组合,以编程方式将每个表单元格与该单元格所关联的标头相关联。

        定义和用法

        标签可定义表格。在
        标签内部,你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

        HTML 4.01 与 HTML 5 之间的差异

        在 HTML 4.01 中,不赞成使用"align"和"bgcolor"属性。

        在 HTML 5 中,不支持

        标签的任何属性。

        例子

        cell acell b

        一个简单的 HTML 表格,包含两列两行:

        monthsavings
        january$100

        简单的表格

        john doe
        jane doe

        simple table with header

        first name last name
        john doe
        jane doe

        table with thead, tfoot, and tbody

        header content 1 header content 2
        footer content 1 footer content 2
        body content 1 body content 2

        table with colgroup

        countries capitals population language
        usa washington d.c. 309 million english
        sweden stockholm 9 million swedish

        table with colgroup and col

        lime lemon orange
        green yellow orange

        simple table with caption

        awesome caption
        awesome data

    鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

    免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

    图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)