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表格详细教程的更多相关文章

Emmet超详细教程
Emmet超详细教程一.总结一句话总结:用的时候照着用,能提高效率. 1.快捷键如何使用? 需要敲代码的时候把快捷键放到旁边即可.照着敲. 二.Emmet超详细教程 Emmet的前身是大名鼎鼎的Z ...
Python、 Pycharm、Django安装详细教程(图文)
前言这篇文章主要介绍了Python. Pycharm.Django安装详细教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧. ...
《手把手教你》系列技巧篇（六十九）-java+ selenium自动化测试 - 读取csv文件（详细教程）
1.简介在实际测试中,我们不仅需要读取Excle,而且有时候还需要读取CSV类的文件.如何去读取CSV的文件,宏哥今天就讲解和分享一下,希望对你能够有所帮助.前面介绍了如何读取excel文件,本篇介 ...
Spring Data JPA系列2：SpringBoot集成JPA详细教程，快速在项目中熟练使用JPA
大家好,又见面了. 这是Spring Data JPA系列的第2篇,在上一篇<Spring Data JPA系列1:JDBC.ORM.JPA.Spring Data JPA,傻傻分不清楚?给你个 ...
SASS教程sass超详细教程
SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...
Git使用详细教程（一）
很久不发博客,最近有兴趣想写点东西,但 Live Writer 不支持从Word复制图片,疯狂吐槽下 Git使用详细教程(一) Git使用详细教程(二) 该教程主要是Git与IntelliJ IDEA ...
Win7 U盘安装Ubuntu16.04 双系统详细教程
Win7 U盘安装Ubuntu16.04 双系统详细教程安装主要分为以下几步: 一．下载Ubuntu 16.04镜像软件: 二．制作U盘启动盘使用ultraISO: 三．安装Ubuntu系统: ...
Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境（详细教程）
Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...
Ubuntu 16.04安装QQ国际版图文详细教程
因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...

随机推荐

C++回调函数的理解与使用
一.回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在 ...
c++日常小问题
语法解析问题. 当给一个变量构造函数传递一个临时变量,而不是命名的变量,c++编译器会将其解析为函数声明,而不是类型对象的定义. class hello { void operator()() { s ...
Python高级语法-对象实例对象属性-类与实例，class方法静态方法等(4.6.1）
@ 目录 1.说明 2.代码关于作者 1.说明 python中属性:类属性,实例属性方法:类方法,实例方法,静态方法想修改类属性,只能是类方法,因为只有类方法把cls(类)传入数据里面静态方法 ...
安装nodejs 版本控制器
安装下载地址: https://pan.baidu.com/s/1Ed_IPDTOHxR9NShUEau-ZA 下载好后,放在安装nodejs的文件夹下然后敲cmd,进入安装nodejs的文件夹下. ...
Docker Networks 笔记
Docker Networks Bridge NetworksThe Docker bridge driver automatically installs rules in the host mac ...
Python学习之多项式回归
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理线性回归的改进版本中的多项式回归.如果您知道线性回归,那么对您来说很简单.如果没有,我将在本文中解释 ...
对着爬虫网页HTML学习Python正则表达式re
1.正则表达式初探用比较经典的例子,查找一段文本中的手机号码.比如对于文本"我现在用的电话是188-8888-8888,之前那个186-6666-6666已经不用了",我们想获取 ...
利用COM组件实现对WORD书签各种操作大全，看这一篇就够了
有个需求是,程序导出一份word报告,报告中有各种各样的表格,导出时还需要插入图片. 脑海中迅速闪过好几种组件,openxml组件,com组件,npoi.为了减少程序画复杂表格,我们选用了com组件+ ...
Python 最简单的数字相乘
风变编程第18关,快要结束了,捎带着复习了一下前面的基础.结果悲剧了. 打开题目是这样的: 比如我们想写一个根据圆的半径(R)来求面积(S)和周长(L)的代码,可以画出以下的流程图抬眼一看,好简单的 ...
TreeMap集合根据指定元素,进行删除和修改的两种方式实现及bug梳理
TreeMap根据key中的指定元素进行删除修改的两种方式实现及注意事项: 方式一:利用增强for进行删除和修改总结:逻辑简单,但是局限性太强,如果排序规则是从小到大进行排序的,则该方法不能进行删除 ...

HTML5表格详细教程