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

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

表格一直是网页设计制作过程中一个重要的组成部分,在没学习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例子、css3响应式布局例子、css3星星闪烁例子,以便于您获取更多的相关知识。

时间: 2024-10-30 19:17:34

重新认识表格和一个访问无障碍的数据表格例子_CSS/HTML的相关文章

listcontrol-求教:C++中怎么在一个对话框中输入数据后在另一个对话框中的表格中显示出相应的数据?

问题描述 求教:C++中怎么在一个对话框中输入数据后在另一个对话框中的表格中显示出相应的数据? 先设定主框为有表格的对话框,在这个对话框点添加按钮后弹出了子对话框(用于输入数据),可是怎么把输入的数据在表格中显示出来呢? 解决方案 可以在创建输入数据的对话框的时候就把ListView的指针发送给它,然后m_List.InsertColumn() 解决方案二: 在一个对话框中输入数据后,要看你是如何保存的? 如果是保存成全局的变量,另一个对话框就可以直接访问(同一应用中两个不同的对话框): 如果是

node js-Express node.js 如何访问一个域名 并返回数据求大神指教

问题描述 Express node.js 如何访问一个域名 并返回数据求大神指教 我是要去调用接口 (这个接口是别人写好了的 有自己的域名 我只要传参过去 接口就会返回json数据) 才刚学node.js 想想请教大神 给点思路 或者源代码

table-Java swt创建一个继承自Composite的表格右半部份是空白,怎么去掉

问题描述 Java swt创建一个继承自Composite的表格右半部份是空白,怎么去掉 import org.eclipse.jface.viewers.ColumnWeightData;import org.eclipse.jface.viewers.TableLayout;import org.eclipse.jface.viewers.TableViewer;import org.eclipse.swt.SWT;import org.eclipse.swt.custom.ViewForm

jsf-JSF中table显示问题,用了scrollable后,显示emptyMessage时表格出现一个缺口

问题描述 JSF中table显示问题,用了scrollable后,显示emptyMessage时表格出现一个缺口 现在项目中使用primefaces,其他一切都很好,就是在datatable使用scrollable后,如果filter过滤查询出来的结果为空,显示emptyMessage的时候,表格内容与表头无法对齐.各位大神有木有遇到这样的情况?怎么解决?

分页-我想做一个基于jquery的可操作表格数据展示与处理的控件

问题描述 我想做一个基于jquery的可操作表格数据展示与处理的控件 我是新手,我想做一个基于jquery的可操作表格数据展示与数据处理控件,表格需要提供的功能是排序,搜索,设置基本的增删改,分页的功能,求具体思路.谢谢 解决方案 别求,你看看开源代码,比如jqgrid,这个是jquery的grid组件,看它的代码研究一下 解决方案二: 想做就做呗,思路看来源代码 解决方案三: 基本思路就是前台传递参数条件到后台,再返回结果到前台显示 解决方案四: 去看jquery自带的flexigrid吧,相

2个jsp,内容一样,所在位置也一样,通过一个访问另一个,为什么会出现不同的样式

问题描述 2个jsp,内容一样,所在位置也一样,通过一个访问另一个,为什么会出现不同的样式 通过mvc发布的一个响应,webroot下有个文件夹,2个jsp文件,内容完全一样,但是名称不一样,一个叫a.jsp,一个b.jsp; 通过ssh的action访问到a.jsp,a.jsp中有个超链接,链接到b.jsp.访问a.jsp完全正常(指的是样式),通过a里面的超链接访问b的时候,b里面的样式完全不见,请各位大神给分析下,我猜是路径问题,但是里面的css引入文件,我是用的绝对路径啊,就是${pag

数据-如何用php设计一个日期循环出现的表格

问题描述 如何用php设计一个日期循环出现的表格 类似图中的这样,这样的话表怎么用php设计呢?是要将每个日期都存放在数据表里吗?(我是新手,求指教,谢谢) 解决方案 日期单独放啊,不是有date字段,星期那种用脚本计算一下,要不到时搜索你就麻烦

以一种访问权限不允许的方式做了一个访问套接字的尝试,errCode=10013

问题描述 localEdpt=newIPEndPoint(IPAddress.Any,SERV_PORT);servListen=newSocket(AddressFamily.InterNetwork,SocketType.Stream,ProtocolType.Tcp);servListen.Bind(localEdpt);servListen.Listen(100);一运行servListen.Bind(localEdpt);就提示:e.Message=以一种访问权限不允许的方式做了一个访

怎么解决C#套接字编程异常&amp;amp;quot;以一种访问权限不允许的方式做了一个访问套接字的尝试&amp;amp;quot;

问题描述 我想问一下,我在使用c#套接字编程做了一个ping应用程序.调试的时候出现一个异常,"以一种访问权限不允许的方式做了一个访问套接字的尝试".网上说是端口或ip冲突,但是我的程序里没有明确使用端口号这些,你觉得可能是什么原因? 解决方案 解决方案二:Socket构造函数的参数搭配错误解决方案三:引用1楼Poopaye的回复: Socket构造函数的参数搭配错误 每次执行到socketsocket=newsocket(AddressFamily.InterNetwork,sock