HTML5表格_动力节点Java学院整理


Posted in HTML / CSS onJuly 11, 2017

表格的作用是显示二维数据,在HTML5中不再允许用表格控制页面内容的布局,而是采用新增的CSS表格特性(这里不涉及CSS,将在后面介绍)。下面主要介绍用于制作表格的HTML元素。

构建表格

表格的基本元素包括:table、tr和td。
table表示HTML文档中的表格,支持border属性,用于定义表格边框的宽度;
tr表示表格中的行;
td表示表格中的单元格,包括如下属性:
  1)colspan:规定单元格可横跨的列数;
  2)rowspan:规定单元格可横跨的行数;
  3)headers:规定与单元格相关的标头,该属性不会在普通浏览器中产生任何视觉变化,但可以被屏幕阅读器使用。

<table>
 <tr>
  <td>Apples</td>
  <td>Green</td>
  <td>Medium</td>
 </tr>
 <tr>
  <td>Oranges</td>
  <td>Orange</td>
  <td>Large</td>
 </tr>
</table>

上面定义了一个两行、三列的表格,使用表格的好处是:浏览器会保证列的宽度满足最宽的内容,让行的高度满足最高的单元格。

表格边框

使用table元素的border属性,可以为表格添加边框。

<table border="1">
 <tr>
  <td>Apples</td>
  <td>Green</td>
  <td>Medium</td>
 </tr>
 <tr>
  <td>Oranges</td>
  <td>Orange</td>
  <td>Large</td>
 </tr>
</table>

浏览器的默认边框不太美观,通常还需要用CSS来为为各种元素重设边框样式。

不规则表格

使用单元格的colspan和rowspan属性可以构建不规则表格,使表格的某些行或者列跨越多个单元格,下面是一个单元格跨多列的一个例子:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan="2">January</td>
  </tr>
  <tr>
    <td colspan="2">February</td>
  </tr>
</table>

下面是一个单元格跨多行的一个例子:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100.00</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$10.00</td>
  </tr>
</table>

表头

th元素用于为表格添加表头,可以用来区分数据和对数据的说明。th元素支持如下属性:
  1)colspan:规定单元格可横跨的列数;
  2)rowspan:规定单元格可横跨的行数;
  3)scope:定义将表头数据与单元数据相关联的方法;
  3)headers:由空格分隔的表头单元格ID列表,为数据单元格提供表头信息,该属性不会在普通浏览器中产生任何视觉变化,但可以被屏幕阅读器使用。

<table>
 <tr>
  <th>Rank</th><th>Name</th>
  <th>Color</th><th>Size</th>
 </tr>
 <tr>
  <th>Favorite:</th>
  <td>Apples</td><td>Green</td><td>Medium</td>
 </tr>
 <tr>
  <th>2nd Favorite:</th>
  <td>Oranges</td><td>Orange</td><td>Large</td>
 </tr>
 <tr>
  <th>3rd Favorite:</th>
  <td>Pomegranate</td><td>A kind of greeny-red</td>
  <td>Varies from medium to large</td>
 </tr>
</table>

可以在一行中混合使用th和td。

让单元格关联表头

使用td的headers属性可以将单元格和表头关联,关联的目的主要是供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。headers属性可以为一个或多个th单元格的id属性值:

<table border="1" width="100%">
  <tr>
 <th id="name">Name</th>
 <th id="Email">Email</th>
 <th id="Phone">Phone</th>
 <th id="Address">Address</th>
  </tr>
  <tr>
 <td headers="name">George Bush</td>
 <td headers="Email">someone@example.com</td>
 <td headers="Phone">+789451236</td>
 <td headers="Address">Fifth Avenue New York,USA</td>
  </tr>
</table>

构造复杂表头

使用th的colspan和rowspan属性可以构造复杂表头。

<table border="1">
  <tr>
    <th colspan="2">Company in USA</th>
  </tr>
  <tr>
    <th>Name</th><th>Addr</th>
  </tr>
  <tr>
    <td>Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
  <tr>
    <td>Google, Inc.</td>
    <td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
  </tr>
</table>

为表格添加结构

可以使用thead、tbody和tfoot元素来为表格添加结构,这样可以让为表格各个部分添加CSS样式变得更加容易。
1)表格主题
tbody元素表示构成表格主题的全体行,不包括表头行(thead元素表示)和表脚行(tfoot元素表示)。
注意大多数浏览器在处理table元素时都会自动插入tbody元素。
2)表格表头
thead元素用来标记表格的标题行。如果没有thead元素的话,所有tr元素都会被视为表格主体的一部分。
3)添加脚注
tfoot元素用来标记组成表脚的行。在HTML5之前tfoot元素只能出现在tbody元素之前,而在HTML5中则允许将tfoot元素放在tbody之后。
下面是一个综合的例子,里面使用了tbody、thead和tfoot元素。

<table>
 <thead>
  <tr>
   <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <th>Favorite:</th>
   <td>Apples</td><td>Green</td><td>Medium</td>
  </tr>
  <tr>
   <th>2nd Favorite:</th>
   <td>Oranges</td><td>Orange</td><td>Large</td>
  </tr>
  <tr>
   <th>3rd Favorite:</th>
   <td>Pomegranate</td><td>A kind of greeny-red</td>
   <td>Varies from medium to large</td>
  </tr>
 </tbody>
</table>

为表格添加标题

使用caption元素可以为表格定义一个标题,并将其与表格关联起来。

<table>
 <caption>Results of the 2011 Fruit Survey</caption>
 <thead>
  <tr>
   <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <th>Favorite:</th>
   <td>Apples</td><td>Green</td><td>Medium</td>
  </tr>
  <tr>
   <th>2nd Favorite:</th>
   <td>Oranges</td><td>Orange</td><td>Large</td>
  </tr>
  <tr>
   <th>3rd Favorite:</th>
   <td>Pomegranate</td><td>A kind of greeny-red</td>
   <td>Varies from medium to large</td>
  </tr>
 </tbody>
</table>

一个表格只能包含一个caption元素,无需是表格的第一个元素,但始终显示在表格上方。

列分组

在表格中,由于表格都是按行组建的,导致对列的操作不太方便,例如为表格的某列定义样式。可以使用colgroup元素来指定列的分组。

<html>
<head>
    <style>
        #colgroup1{background-color: red}
        #colgroup2{background-color: green; font-size=small}
    </style>
</head>
<body>
<table width="100%" border="1">
  <colgroup id="colgroup1" span="2" ></colgroup>
  <colgroup id="colgroup2"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>
</body>
</html>

上面的例子中指定了两个列的组,第一个包含前2列,第二个包含剩下的1列,并为不同的分组指定了不同的样式。colgroup的span属性指定扩展几列,如果不指定span属性,也可以指定一个或多个col元素,下面的例子达到了和上面例子一样的效果。

<html>
<head>
    <style>
        #colgroup1{background-color: red}
        #col3{background-color: green; font-size=small}
    </style>
</head>
<body>
<table width="100%" border="1">
  <colgroup id="colgroup1">
 <col id="col1And2" span="2"/>
 <col id="col3"/>
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 #HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 #HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 #HTML / CSS
HTML5中视频音频的使用详解
Jul 07 #HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 #HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 #HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 #HTML / CSS
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
python使用tornado实现简单爬虫
2018/07/28 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Python文件操作方法详解
2020/02/09 Python
python 实现端口扫描工具
2020/12/18 Python
中学教师实习自我鉴定
2013/09/28 职场文书
销售会计岗位职责
2014/03/15 职场文书
办公室文员岗位职责
2015/02/04 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
Android 中的类文件和类加载器详情
2022/06/05 Java/Android
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android