重新认识表格和一个访问无障碍的数据表格例子

2024-03-14 13:36:52

除特别说明外，本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果。

表格一直是网页设计制作过程中一个重要的组成部分，在没学习CSS布局前，大多是用来布局的，但到目前位置发现居然还没真正地了解和完全掌握表格，不得不需要重新认识表格......

在现代网页设计制作中，表格主要的用途应该是用来存放多元二维数据。和表格相关的标签有 table、tr、td、th、tbody、thead、tfoot、col、colgroup、caption，如何合理地应用这些标签呢？先从名词解释开始。

名词解释

table

显示二维数据

tr

表格中的一行

td

数据单元格

th

表头单元格，定义一行或者一列的表头信息，不能使用在布局表格里。

tbody

表格中的某一行或者多行编成组，要结合thead、tfoot一起使用

thead

将表格中的某一行或者多行编成组，要结合tbody、tfoot一起使用

tfoot

将表格中的某一行或者多行编成组，要结合tbody、thead一起使用

col

列，给某一列或者几列应用特定的属性，结合colgroup一起使用

colgroup

列的组合，结合col一起使用

caption

定义表格的标题，在表格开始的地方使用，仅一次

summary

说明表格的用途

例子：

<table summary="这是一个具有亲和力的表格的演示" id="demotab">

<caption>

访问 <a href="http://www.forest53.com">www.forest53.com</a> 浏览器统计

</caption>

<thead>

<tr>

<th>浏览器 / 月 </th>

<th>2005 / 11 </th>

<th>2006 / 04 </th>

<th>2006 / 05 </th>

</tr>

</thead>

<tfoot>

<tr>

<th>总计</th>

<td>1,646 ( 98.45% )</td>

<td>6,978 ( 99.48% ) </td>

<td>5,366 ( 99.56% ) </td>

</tr>

</tfoot>

<tbody>

<tr>

<th>Internet Explorer</th>

<td>1,535 (91.81%)</td>

<td>5,905 (86.41%)</td>

<td>4,550 (84.42%)</td>

</tr>

<tr>

<th>Firefox</th>

<td>98 (5.86%)</td>

<td>746 (10.92%)</td>

<td>640 (11.87%)</td>

</tr>

<tr>

<th>Opera</th>

<td>13 (0.78%)</td>

<td>147 (2.15%)</td>

<td>176 (3.27%)</td>

</tr>

</tbody>

</table>

重新认识表格和一个访问无障碍的数据表格例子

除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果. 表格一直是网页设计制作过程中一个重要的组成部分,在没学习CSS布局前,大多是用来布局的,但到目前位置发现居然还没真正地了解和完全掌握表格,不得不需要重新认识表格...... 在现代网页设计制作中,表格主要的用途应该是用来存放多元二维数据.和表格相关的标签有 table.tr.td.th.tbody.thead.tfoot.col.colgroup.caption,如何合理地应用这些标签呢?先从名词解释开始. 名词解释 ta
layui数据表格实现重载数据表格功能(搜索功能）

layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 <table id="demo" lay-filter="test"></table> JavaScript部分 var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
SpringBoot+VUE实现数据表格的实战

目录前言使用的开发工具: 一.前端准备 1. 基础界面 2. 导入JS文件二.后端准备 1. 创建实体类 2. Controller层 3. Service层 4. Mapper层三.前后端整合四.运行结果总结前言还记得第一次做项目时,因为不会将数据库表中的数据渲染到前端而头疼,最后还是靠layui提供的数据表格API实现了前端数据表格的渲染.一直到现在做了很多SpringBoot项目.SSM项目之后,现在返回头来看这个曾经这个让我备受折磨的问题,脑海中下意识就会想到很多种解决的
如何让一个json文件显示在表格里【实现代码】

<body> //首先得把架子搭起来 <table id = "tb" border="1"> <tr></tr> <tr></tr> </table> //js部分 <script> //简单的json内容 var json = {"姓名":"张三","年龄":"26","性别&q
Element实现表格嵌套、多个表格共用一个表头的方法

一.分析需求这里先上一张图说明需求 : 根据后端返回的数据 ( res 是一个数组,它的元素是一个对象,对象里面的 ext 属性是一个对象,它又包含了, default . free 和 pay 三个属性,且这三个都是数组格式.): 渲染出一个这样子的表格 : res 数据: res 的每一个元素的直接属性 name (即为邮费模板名称,比如成都运费模板), res 的 ext 属性下的三个数组 default . free . pay ,每一个数组要大的一行(这一行中,第一列是运送到的地
Python利用PyQt5制作一个获取网络实时数据NBA数据播报GUI功能

制作NBA数据爬虫捋顺思路我们在这里选择的是百度体育带来的数据,我们在百度当中直接搜索NBA跳转到网页,我们可以看到,百度已经为我们提供了相关的数据我们点击进去后,可以发现这是一个非常简洁的网址我们看一下这个地址栏,发现毫无规律https://tiyu.baidu.com/live/detail/576O5Zu955S35a2Q6IGM5Lia56%2Bu55CD6IGU6LWbI2Jhc2tldGJhbGwjMjAyMS0wNi0xMyPniLXlo6t2c%2BWspritq%2Bi
jQuery EasyUI API 中文文档 - DataGrid数据表格

扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法复制代码代码如下: <table id="tt"></table> 复制代码代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'
BootStrap数据表格实例代码

首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:
asp.net下用Aspose.Words for .NET动态生成word文档中的数据表格的方法

1.概述最近项目中有一个这样的需求:导出word 文档,要求这个文档的格式不是固定的,用户可以随便的调整,导出内容中的数据表格列是动态的,例如要求导出姓名和性别,你就要导出这两列的数据,而且这个文档不是导出来之后再调整而是导出来后已经是调整过了的.看到这里,您也许马上想到用模板导出!而且.NET中自带有这个组件:Microsoft.Office.Interop.Word,暂且可以满足需求吧.但这个组件也是有局限性的,例如客户端必须装 office组件,而且编码复杂度高.最麻烦的需求是后面那个-
python使用点操作符访问字典(dict)数据的方法

本文实例讲述了python使用点操作符访问字典(dict)数据的方法.分享给大家供大家参考.具体分析如下: 平时访问字典使用类似于:dict['name']的方式,如果能通过dict.name的方式访问会更方便,下面的代码自定义了一个类提供了这种方法. class DottableDict(dict): def __init__(self, *args, **kwargs): dict.__init__(self, *args, **kwargs) self.__dict__ = self de