HTML5表格

文章目录

  • HTML5表格
    • 5.1 定义表格
      • 5.1.1 普通表格、列标题
      • 5.1.2 表格标题
      • 5.1.3 表格行分组、表格列分组
    • 5.2 表格属性
      • 5.2.1 单线表格、分离单元格
      • 5.2.2 细线边框
    • 5.3 单元格属性
      • 5.3.1 跨单元格显示、表头单元格
      • 5.3.2 绑定表头、信息缩写
      • 5.3.3 单元格分类
    • 5.4 项目实战
      • 5.4.2 设计产品信息列表

5.1 定义表格

5.1.1 普通表格、列标题

普通表格
一个< table >元素,以及一个或多个 tr 和 td 组成,tr 定义行,td 定义行内单元格。

<table>
<tr>
<td>月落乌啼霜满天,</td>
<td>江枫渔火对愁眠。</td>
</tr>
<tr>
<td>姑苏城外寒山寺,</td>
<td>夜半钟声到客船。</td>
</tr>
</table>

列标题
在数据表格中,每列应该包含一个标题。在数据库中这个标题称为字段,在HTML中被称为表头单元格。使用 th 元素定义表头单元格。
默认状态下,th 内文本呈现为居中、粗体显示,而td 内文本为左对齐的普通文本。

<!doctype html>
<table>
<tr>
<th>用户名</th>
<th>电子邮箱</th>
</tr>
<tr>
<td>张三</td>
<td>zhangsan@163.com</td>
</tr>
</table>
<table>
<tr>
<th>&nbsp;</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<th>第1节</th>
<td>语文</td>
<td>物理</td>
<td>数学</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<th>第2节</th>
<td>数学</td>
<td>语文</td>
<td>体育</td>
<td>英语</td>
<td>音乐</td>
</tr>
<tr>
<th>第3节</th>
<td>语文</td>
<td>体育</td>
<td>数学</td>
<td>英语</td>
<td>地理</td>
</tr>
<tr>
<th>第4节</th>
<td>地理</td>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>美术</td>
</tr>
</table>

5.1.2 表格标题

< caption > 标签定义表格标题。< caption > 标签必须紧随 < table > 标签之后。

<table>
<caption>通讯录</caption>
<tr>
<th>用户名</th>
<th>电子邮箱</th>
</tr>
<tr>
<td>张三</td>
<td>zhangsan@163.com</td>
</tr>
</table>

5.1.3 表格行分组、表格列分组

表格行分组
< thead >定义表格的表头。
< tbody >定义一段表格主体(正文)。使用 < tbody > 标签,可以将表格分为一个单独的部分。< tbody > 标签可将表格中的一行或几行合成一组。建议最好在表格中没有 < tbody > 标签。在 < tbody > 标签中,只有 < tr > 标签可以定义表格行。并且一旦定义,一个 < tbody > 标签就是表格中的一个独立的部分。例如不能从一个 < tbody > 跨越到另一个 < tbody > 中。

< tfoot >定义表格的页脚(脚注)。

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格结构</title>
<style type="text/css">
table { width: 100%; }
caption { font-size: 24px; margin: 12px; color: blue; }
th, td { border: solid 1px blue; padding: 8px; }
tfoot td { text-align: right; color: red; }
</style>
</head>
<body>
<table>
<caption>
结构化表格标签
</caption>
<thead>
<tr>
<th>标签</th>
<th>说明</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">* 在表格中,上述标签属于可选标签。</td>
</tr>
</tfoot>
<tbody>
<tr>
<!-- &lt指< &gt指 >-->
<td>&lt;thead&gt;</td>
<td>定义表头结构。</td>
</tr>
<tr>
<td>&lt;tbody&gt;</td>
<td>定义表格主体结构。</td>
</tr>
<tr>
<td>&lt;tfoot&gt;</td>
<td>定义表格的页脚结构。</td>
</tr>
</tbody>
</table>
</body>
</html>

表格列分组
< col > 标签为表格中的一个或多个列定义属性值。只能在表格或列组中使用该元素。
注释:col 元素是空元素。如需创建列,必须在 tr 元素内规定 td 元素。
提示:如果需要为一个或多个列规定属性值,请使用该元素。
提示:如果需要向一个列组规定相同的属性值,请使用 < colgroup > 元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="100%" border="1">
<col align="left" />
<col align="center" />
<col align="right" />
<tr>
<td>慈母手中线,</td>
<td>游子身上衣。</td>
<td>临行密密缝,</td>
</tr>
<tr>
<td>意恐迟迟归。</td>
<td>谁言寸草心,</td>
<td>报得三春晖。</td>
</tr>
</table>
</body>
</html> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.col1 { width:25%; color:red; font-size:16px; }
.col2 { width:50%; color:blue; }
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup span="2" class="col1"></colgroup>
<colgroup class="col2"></colgroup>
<tr>
<td>慈母手中线,</td>
<td>游子身上衣。</td>
<td>临行密密缝,</td>
</tr>
<tr>
<td>意恐迟迟归。</td>
<td>谁言寸草心,</td>
<td>报得三春晖。</td>
</tr>
</table>
</body>
</html> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.col1 { width:25%; color:red; font-size:16px; }
.col2 { width:50%; color:blue; }
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup>
<col span="2" class="col1" />
<col class="col2" />
</colgroup>
<tr>
<td>慈母手中线,</td>
<td>游子身上衣。</td>
<td>临行密密缝,</td>
</tr>
<tr>
<td>意恐迟迟归。</td>
<td>谁言寸草心,</td>
<td>报得三春晖。</td>
</tr>
</table>
</body>
</html> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">table { /* 表格默认样式 */
border:solid 1px #99CCFF;
border-collapse:collapse;}
.bg_th { /* 标题行类样式 */
background:#0000FF;
color:#fff;}
.bg_even1 { /* 列1类样式 */
background:#CCCCFF;}
.bg_even2 { /* 列2类样式 */
background:#FFFFCC;}
</style>
</head> <body>
<table>
<caption>IE浏览器发展大事记</caption>
<colgroup>
<col class="bg_even1" id="verson" />
<col class="bg_even2" id="postTime" />
<col class="bg_even1" id="OS" />
</colgroup>
<tr class="bg_th">
<th>版本</th>
<th>发布时间</th>
<th>绑定系统</th>
</tr>
<tr>
<td>Internet Explorer 1</td>
<td>1995年8月</td>
<td>Windows 95 Plus! Pack</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 2</td>
<td>1995年11月</td>
<td>Windows和Mac</td>
</tr>
<tr>
<td>Internet Explorer 3</td>
<td>1996年8月</td>
<td>Windows 95 OSR2</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 4</td>
<td>1997年9月</td>
<td>Windows 98</td>
</tr>
<tr>
<td>Internet Explorer 5</td>
<td>1999年5月</td>
<td>Windows 98 Second Edition</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 5.5</td>
<td>2000年9月</td>
<td>Windows Millennium Edition</td>
</tr>
<tr>
<td>Internet Explorer 6</td>
<td>2001年10月</td>
<td>Windows XP</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 7</td>
<td>2006年下半年</td>
<td>Windows Vista</td>
</tr>
<tr>
<td>Internet Explorer 8</td>
<td>2009年3 月</td>
<td>Windows 7</td>
</tr>
<tr class="bg_even">
<td>Internet Explorer 9</td>
<td>2011年3月</td>
<td>Windows 7</td>
</tr>
<tr>
<td>Internet Explorer 10</td>
<td>2013年2月</td>
<td>Windows 8</td>
</tr>
</table>
</body>
</html>

5.2 表格属性

5.2.1 单线表格、分离单元格

单线表格
rules 属性规定内侧边框的哪个部分是可见的。从实用角度出发,最好不要规定 rules,而是使用 CSS 来添加边框样式。
< frame > 标签定义 frameset 中的一个特定的窗口(框架)。
frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等。

<body>
<table border="1" frame="hsides" rules="rows" width="100%">
<caption>
frame属性取值说明
</caption>
<tr>
<th>值</th>
<th>说明</th>
</tr>
<tr>
<td>void</td>
<td>不显示外侧边框。</td>
</tr>
<tr>
<td>above</td>
<td>显示上部的外侧边框。</td>
</tr>
<tr>
<td>below</td>
<td>显示下部的外侧边框。</td>
</tr>
<tr>
<td>hsides</td>
<td>显示上部和下部的外侧边框。</td>
</tr>
<tr>
<td>vsides</td>
<td>显示左边和右边的外侧边框。</td>
</tr>
<tr>
<td>lhs</td>
<td>显示左边的外侧边框。</td>
</tr>
<tr>
<td>rhs</td>
<td>显示右边的外侧边框。</td>
</tr>
<tr>
<td>box</td>
<td>在所有四个边上显示外侧边框。</td>
</tr>
<tr>
<td>border</td>
<td>在所有四个边上显示外侧边框。</td>
</tr>
</table>


分离单元格
cellpadding 和 cellspacing 之间的主要区别在于 cellpadding 用于固定单元格边缘与其内容之间的宽度,即在文本和单元格边框之间的单元格内创建空白。而,cellspacing可以用于管理表格中单个单元格之间的空间。

<body>
<table border="1" frame="void" cellpadding="6" cellspacing="16">
<caption>
rules属性取值说明
</caption>
<tr>
<th>值</th>
<th>说明</th>
</tr>
<tr>
<td>none</td>
<td>没有线条。</td>
</tr>
<tr>
<td>groups</td>
<td>位于行组和列组之间的线条。</td>
</tr>
<tr>
<td>rows</td>
<td>位于行之间的线条。</td>
</tr>
<tr>
<td>cols</td>
<td>位于列之间的线条。</td>
</tr>
<tr>
<td>all</td>
<td>位于行和列之间的线条。</td>
</tr>
</table>
</body>
</html>

5.2.2 细线边框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" rules="all" width="100%">
<caption>
rules属性取值说明
</caption>
<tr>
<th>值</th>
<th>说明</th>
</tr>
<tr>
<td>none</td>
<td>没有线条。</td>
</tr>
<tr>
<td>groups</td>
<td>位于行组和列组之间的线条。</td>
</tr>
<tr>
<td>rows</td>
<td>位于行之间的线条。</td>
</tr>
<tr>
<td>cols</td>
<td>位于列之间的线条。</td>
</tr>
<tr>
<td>all</td>
<td>位于行和列之间的线条。</td>
</tr>
</table>
</body>
</html>

5.3 单元格属性

5.3.1 跨单元格显示、表头单元格

跨单元格显示


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border=1 width="100%">
<tr>
<th align=center colspan=5>课程表</th>
</tr>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td align=center colspan=5>上午</td>
</tr>
<tr>
<td>语文</td>
<td>物理</td>
<td>数学</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
<td>体育</td>
<td>英语</td>
<td>音乐</td>
</tr>
<tr>
<td>语文</td>
<td>体育</td>
<td>数学</td>
<td>英语</td>
<td>地理</td>
</tr>
<tr>
<td>地理</td>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td align=center colspan=5>下午</td>
</tr>
<tr>
<td>作文</td>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>化学</td>
</tr>
<tr>
<td>生物</td>
<td>语文</td>
<td>物理</td>
<td>自修</td>
<td>自修</td>
</tr>
</table>
</body>
</html>

表头单元格

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th></th>
<th scope="col">月份</th>
<th scope="col">金额</th>
</tr>
<tr>
<td scope="row">1</td>
<td>9</td>
<td>$100.00</td>
</tr>
<tr>
<td scope="row">2</td>
<td>4</td>
<td>$10.00</td>
</tr>
</table>
</body>
</html>

5.3.2 绑定表头、信息缩写

绑定表头

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th id="name">姓名</th>
<th id="Email">电子邮箱</th>
<th id="Phone">电话</th>
<th id="Address">地址</th>
</tr>
<tr>
<td headers="name">张三</td>
<td headers="Email">zhangsan@163.com</td>
<td headers="Phone">13522228888</td>
<td headers="Address">北京长安街38号</td>
</tr>
</table>
</body>
</html>

信息缩写

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th>名称</th>
<th>说明</th>
</tr>
<tr>
<td abbr="HTML">HyperText Markup Language</td>
<td>超级文本标记语言</td>
</tr>
<tr>
<td abbr="CSS">Cascading Style Sheets</td>
<td>层叠样式表</td>
</tr>
</table>
</body>
</html>

5.3.3 单元格分类

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th axis="name">姓名</th>
<th axis="Email">电子邮</th>
<th axis="Phone">电话</th>
<th axis="Address">地址</th>
</tr>
<tr>
<td axis="name">张三</td>
<td axis="Email">zhangsan@163.com</td>
<td axis="Phone">13522228888</td>
<td axis="Address">北京长安街38号</td>
</tr>
</table>
</body>
</html>

5.4 项目实战

5.4.2 设计产品信息列表

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选用商品列表——易购网</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="header">
<p class="header-title">选用商品列表 </p>
<div class="left-head"> <a id="goBack" href="javascript:history.go(-1);" class="tc_back"> <span class="inset_shadow"> <span class="header-return"></span> </span> </a> </div>
</header>
<section id="content">
<table cellspacing="0">
<tbody>
<tr>
<th>商品名称</th>
<th>性能特点</th>
<th>价格</th>
</tr>
<tr>
<td>苹果 手机 iPhone8S(16GB)</td>
<td>支持移动4G、3G、2G,双网自由切换,空前网络体验!</td>
<td class="last">¥6998.00</td>
</tr>
<tr>
<td>三星手机Max(白色)</td>
<td>双卡双待,四核高速处理器</td>
<td class="last">¥6496.00</td>
</tr>
<tr>
<td>小米手机小米5(星空灰)移动版</td>
<td>迄今为止最快的小米手机。</td>
<td class="last">¥3099.00</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>

HTML5表格详细教程的更多相关文章

  1. Emmet超详细教程

    Emmet超详细教程 一.总结 一句话总结:用的时候照着用,能提高效率. 1.快捷键如何使用? 需要敲代码的时候把快捷键放到旁边即可.照着敲. 二.Emmet超详细教程 Emmet的前身是大名鼎鼎的Z ...

  2. Python、 Pycharm、Django安装详细教程(图文)

    前言 这篇文章主要介绍了Python. Pycharm.Django安装详细教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧. ...

  3. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  4. Git使用详细教程(一)

    很久不发博客,最近有兴趣想写点东西,但 Live Writer 不支持从Word复制图片,疯狂吐槽下 Git使用详细教程(一) Git使用详细教程(二) 该教程主要是Git与IntelliJ IDEA ...

  5. Win7 U盘安装Ubuntu16.04 双系统详细教程

    Win7 U盘安装Ubuntu16.04 双系统详细教程 安装主要分为以下几步: 一. 下载Ubuntu 16.04镜像软件: 二. 制作U盘启动盘使用ultraISO: 三. 安装Ubuntu系统: ...

  6. Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程)

    Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...

  7. Ubuntu 16.04安装QQ国际版图文详细教程

            因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...

  8. Ubuntu-安装-theano+caffe-超详细教程

    一.说明 本文是继<Ubuntu-安装-cuda7.0-单显卡-超详细教程> 之后的续篇.theano和caffe是深度学习库,对运算能力需求很大,最好使用cuda进行加速.所以,请先阅读 ...

  9. 扩展HT for Web之HTML5表格组件的Renderer和Editor

    在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:真假编辑器 string:普通的文本编辑 ...

  10. Struts2详细教程

    Struts2详细教程:http://www.yiibai.com/struts_2/

随机推荐

  1. AngularJS 依赖注入

        依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该 ...

  2. InventSumDelta表的作用

    https://groups.google.com/forum/#!topic/microsoft.public.axapta.programming/rRfbJo9M0dk The purpose ...

  3. MVC4 WEBAPI(一)使用概述

    所谓概述,也就是总结一些WEB API常用的使用用法.MVC APIWEB是一个轻量级的服务接口,完全符合RestFul框架设计,每个URL代表一种资源,使用方便,没有WCF那么庞大,但是麻雀虽小五脏 ...

  4. 秀尔算法:破解RSA加密的“不灭神话”

    RSA加密 VS 秀尔算法 作为RSA加密技术的终结者——“太多运算,无法读取”的秀尔算法(Shor’s algorithm)不是通过暴力破解的方式找到最终密码的,而是利用量子计算的并行性,可以快速分 ...

  5. Power-BI费用分析

    费用分析主要从财务三大费用入手,剖析费用的结构.用途.占用等情况,从三大费用到明细费用.部门.职员的层层钻取,从而有效地进行费用管理和控制.Power-BI前端展示:图1<ignore_js_o ...

  6. nginx+tomcat集群配置(2)---静态和动态资源的分离

    前言: 在web性能优化的领域, 经常能听到一个词, 就是静态/动态资源分离. 那静态/动态资源分离究竟是什么呢? 本文不讲文件系统服务, 云存储, 也不讲基于CDN的优化. 就简单讲讲基于nginx ...

  7. AFNetworking 2.0 使用

    AFNetworking 下载地址:https://github.com/AFNetworking/AFNetworking/ AFNetworking 2.0 当Deployment Target ...

  8. python re(正则模块)

    参考文档:http://blog.csdn.net/wusuopubupt/article/details/29379367 ipython环境中,输入"?re",官方解释如下: ...

  9. sql查询第二大的记录(转)

    问题: 数据库中人表有三个属性,用户(编号,姓名,身高),查询出该身高排名第二的高度.建表语句 create table users ( id ,) primary key, name ), heig ...

  10. 工作经验-类型转换[ java.lang.String]

    错误代码: logger.info("1"); Map<String,String> zxmap = (Map) zxList.get(0); ybty.setFyze ...