表格还是需要添加一些标签进行优化,可以添加标题和摘要。代码如下:

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法:<table summary="表格简介文本">

标题

用以描述表格内容,标题的显示位置:表格上方。

语法:

<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>

</tr>

</table> 示例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary="本表格记录2012年到2013年库存记录,记录包括U盘和耳机库存量"> <caption>2012年到2013年库存记录</caption> <tr>
<th>产品名称 </th>
<th>品牌 </th>
<th>库存量(个) </th>
<th>入库时间 </th>
</tr>
<tr>
<td>耳机 </td>
<td>联想 </td>
<td>500</td>
<td>2013-1-2</td>
</tr>
<tr>
<td>U盘 </td>
<td>金士顿 </td>
<td>120</td>
<td>2013-8-10</td>
</tr>
<tr>
<td>U盘 </td>
<td>爱国者 </td>
<td>133</td>
<td>2013-3-25</td>
</tr>
</table>
</body>
</html>

效果:

caption标签,为表格添加标题和摘要的更多相关文章

  1. caption,为表格增加标题和摘要

    格式: <table summary="***"> <caption>***</caption> <tr> </tr> ...

  2. 如何在HTML中添加表格标题?(HTML中table添加标题的2种方法)

    第一种:通过 fieldset 添加标题框 示例代码: <html> <body> <fieldset> <legend>fieldset添加框标题&l ...

  3. js如何实现动态在表格中添加标题和去掉标题?

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  4. 在<s:iterator>标签里给动态表格添加序号

    在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...

  5. html5常用标签table表格布局

    html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...

  6. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  7. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

  9. 为HTML表格添加交互功能------DataTables

    DataTables是一个功能强大的Javascript库,用于为HTML表格添加交互功能,虽然简单性是整个项目的核心设计原则,但入门看起来相当艰巨.但是,采取这些第一步并在您的网站上运行DataTa ...

随机推荐

  1. 一点BPXA的思考

    懂的人自然懂... BPXA功能配置 这个概念现在还有印象,记录下来: 一,BPXA是用于BP使用第三方资源的.如使用ORACLE数据库,就是在XA里配置.它的特征是以<xa>开头 二,B ...

  2. c#,if 分支语句,条件运算符

    //输入整数a和b, //若a²+b²大于100,则输出a²+b²百位以上数字, //否则输出两数之和 /*Console.Write("请输入整数a:"); int a = in ...

  3. 在Hibernate中分别使用JDBC和JTA事务的方法

    在Hibernate中使用JDBC事务 Hibernate对JDBC进行了轻量级的封装,它本身在设计时并不具备事务处理功能.Hibernate将底层的JDBCTransaction或JTATransa ...

  4. 14.5.2.2 autocommit, Commit, and Rollback

    14.5.2.2 autocommit, Commit, and Rollback 在InnoDB,所有的用户活动发生在一个事务里, 如果自动提交模式是启用的, 每个SQL语句形成一个单独的事务.默认 ...

  5. Linux [Ubuntu 12.0.1] 常用命令

    1.文件名颜色的含义1)默认色代表普通文件.例:install.log2)绿色代表可执行文件.例:rc.news3)红色代表tar包 文件. 例:vim-7.1.tar.bz24)蓝色代表目录文件. ...

  6. Poetize6: Acting Cute

    3042: Acting Cute Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 59  Solved: 36[Submit][Status] Des ...

  7. hdu-3376-Matrix Again(最小费用最大流)

    题意: 给一个矩形,从左上角走到右下角,并返回左上角(一个单元格只能走一次,左上角和右下角两个点除外) 并且从左上到右下只能往右和下两个方向.从右下返回左上只能走上和左两个方向! 分析: 拆点,最小费 ...

  8. Django教程:第一个Django应用程序(3)

    Django教程:第一个Django应用程序(3) 2013-10-08 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq 37391319 #博客: ...

  9. Swing实现文件选择(目录选择)附导出

    具体生成工具如图: (1) (2) (3) (4) 源码 : example.java package org.qiailin.jframe; import java.awt.Container; i ...

  10. javaweb笔记4之httpservlet

    1 httpservlet简介 service方法是Servlet的入口方法,调用servlet会首先调用service方法.在service方法中,会根据请求方式分别调用不同的doXXX方法.例如, ...