HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01
工具1：HBuilder X 1.9.9.20190522
工具2：火狐浏览器 67.0.4 (64 位)
在开始之前，你需要了解一些基本的知识，不要求你能掌握，但是了解一下还是有益的：
例 1：一个简单的 HTML 表格，包含三行三列：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>表格（table）</title>
6 </head>
7 <body>
8 <table border="1" width="480" align="center">
9 <tr>
10 <th width=25%>编号</th>
11 <th width=25%>调试工具</th>
12 <th width=50%>版本</th>
13 </tr>
14 <tr>
15 <td>1</td>
16 <td>HBuilder X</td>
17 <td>1.9.9.20190522</td>
18 </tr>
19 <tr>
20 <td>2</td>
21 <td>火狐浏览器</td>
22 <td>67.0.4 (64 位)</td>
23 </tr>
24 </table>
25 </body>
26 </html>
在火狐浏览器中打开该 HTML 文档：
定义一个 HTML 表格，并设置表格的边框宽度、宽度，以及其相对于周围元素的对齐方式。
8 <table border="1" width="480" align="center">
24 </table>
关于 HTML <table> 标签：
定义和用法：
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头单元格，td 元素定义标准单元格。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
关于 HTML <table> 标签的 border 属性：
定义和用法：
border 属性规定围绕表格的边框的宽度。
border 属性会为每个单元格应用边框，并用边框围绕表格。如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。
提示：设置 border="0"，可以显示没有边框的表格。
从实用角度出发，最好不要规定边框，而是使用 CSS 来添加边框样式和颜色。
语法：<table border="value">
属性值：
pixels 规定表格边框宽度。
定义和用法：
width 属性规定表格的宽度。
如果没有设置 width 属性，表格会占用需要的空间来显示表格数据。
从实用角度出发，最好不要规定宽度，而是使用 CSS 来应用宽度。
语法：<table width="value">
属性值：
pixels 设置以像素计的宽度（例子：width="50"）。
% 设置以包含元素的百分比计的宽度（例子：width="50%"）。
定义和用法：
align 属性规定表格相对于周围元素的对齐方式。
通常来说，HTML 表格的前后都会出现折行。通过运用 align 属性，可实现其他 HTML 元素围绕表格的效果。
语法：<table align="value">
属性值：
left 左对齐表格。
right 右对齐表格。
center 居中对齐表格。
定义 HTML 表格中的行。
9 <tr>
13 </tr>
关于 HTML <tr> 标签：
定义和用法：
<tr> 标签定义 HTML 表格中的行。
定义表格内的表头单元格。
10 <th width=25%>编号</th>
关于 HTML <td> 标签：
定义和用法：
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：
- 表头单元格 - 包含表头信息（由 th 元素创建）
- 标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
定义和用法：
width 属性规定表格的表头单元格的宽度。
通常，单元格占用的空间就是它显示内容需要的空间。width 属性用于为单元格设置预定义的宽度。
语法：<th width="value">
属性值：
pixels 以像素计的宽度值（比如 "100px"）。
percent 以包含元素百分比计的宽度值（比如 "20%"）。
定义 HTML 表格中的标准单元格。
15 <td>1</td>
关于 HTML <td> 标签：
定义和用法：
<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格：
- 表头单元 - 包含头部信息（由 th 元素创建）
- 标准单元 - 包含数据（由 td 元素创建）
td 元素中的文本一般显示为正常字体且左对齐。
例 2：接下来，我们对例 1 做一些修改，为表格加入表头 <thead>、表主体 <tbody>。
注释：<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。引用：HTML <thead> 标签
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>表格（table）</title>
6 </head>
7 <body>
8 <table border="1" width="480" align="center">
9 <thead>
10 <tr>
11 <th width=25%>编号</th>
12 <th width=25%>调试工具</th>
13 <th width=50%>版本</th>
14 </tr>
15 </thead>
16 <tbody align="center">
17 <tr>
18 <td>1</td>
19 <td>HBuilder X</td>
20 <td>1.9.9.20190522</td>
21 </tr>
22 <tr>
23 <td>2</td>
24 <td>火狐浏览器</td>
25 <td>67.0.4 (64 位)</td>
26 </tr>
27 </tbody>
28 </table>
29 </body>
30 </html>
在火狐浏览器中打开该 HTML 文档，可以看到表格中的第二、第三行中的文字是居中对齐的，这是取决 <tbody> 的 align 属性。
定义表格的表头。
9 <thead>
15 </thead>
关于 HTML <thead> 标签：
定义和用法：
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。（显然，在上面的例 2 中，我们并没有按照这种要求执行，只是使用了 <thead>、<tbody>，并没有使用 <tfoot>。）
提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
详细描述：thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
定义表格主体（正文），并设置内容的对齐方式。
16 <tbody align="center">
27 </tbody>
关于 HTML <tbody> 标签：
定义和用法：
<tbody> 标签定义表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
详细描述：thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
定义和用法：
align 属性规定 tbody 元素中的内容的水平对齐方式。
下一节：HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01的更多相关文章
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7 ...
- JavaScript写一个表格排序类
依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...
- 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
// CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候, ...
- 分享一个CSS+JavaScript框架materializecss
一.内容: CSS+JavaScript框架materializecss. 二.网址:http://materializecss.com 三.图片:
- 运用JavaScript构建你的第一个Metro式应用程序（onWindows 8）（三）
原文 http://blog.csdn.net/zhangxin09/article/details/6793593 这是<运用 JavaScript构建你的第一个Metro式应用程序>系 ...
- 运用JavaScript构建你的第一个Metro式应用程序（onWindows 8）（二）
原文 http://blog.csdn.net/zhangxin09/article/details/6793330 先前的学习中,我们已经了解了 Metro式的 JavaScript 应用程序大致如 ...
随机推荐
- 最通俗易懂的 Redis 架构模式详解
前言 话说有一名意大利程序员,在 2004 年到 2006 年间主要做嵌入式工作,之后接触了 Web,2007 年和朋友共同创建了一个网站,并为了解决这个网站的负载问题(为了避免 MySQL 的低性能 ...
- Mybatis入门篇之结果映射，你射准了吗？
目录 前言 什么是结果映射? 如何映射? 别名映射 驼峰映射 配置文件开启驼峰映射 配置类中开启驼峰映射 resultMap映射 总结 高级结果映射 关联(association) 例子 关联的嵌套 ...
- 20190923-05Linux用户组管理命令 000 013
每个用户都有一个用户组,系统可以对一个用户组中的所有用户进行集中管理.不同Linux 系统对用户组的规定有所不同, 如Linux下的用户属于与它同名的用户组,这个用户组在创建用户时同时创建. 用户组的 ...
- [oracle/sql]求员工表中每个部门里薪水最高的员工，那种sql最优？
开始正题前,先把我的数据库环境列出: # 类别 版本 1 操作系统 Win10 2 数据库 Oracle Database 11g Enterprise Edition Release 11.2.0. ...
- windows上部署rabbitmq遇到的一些问题及解决方法
在目前这家公司,刚进公司的时候接手了一个服务,算是个比较完备的服务,其中几台电脑之间通信用到了rabbitmq,一开始没出什么问题,然后后来勒索病毒wanner cry来的时候,系服把所有服务器装了一 ...
- 一次MySQL索引失效引发的思考
最近公司做了一个千万数量级的项目,由于要求性能比较高,每一个相对慢的查询都需要优化,项目经理是一个比较有经验的开发人员,基本上遇到问题都会先自行处理:或自己分析原因或网络寻求帮助. 但是项目平稳运行一 ...
- Java 审计之SSRF篇
Java 审计之SSRF篇 0x00 前言 本篇文章来记录一下Java SSRF的审计学习相关内容. 0x01 SSRF漏洞详解 原理: 服务端提供了从其他服务器应用获取数据的功能且没有对目标地址做过 ...
- Istio中的流量配置
Istio中的流量配置 目录 Istio中的流量配置 Istio注入的容器 Istio-init istio-proxy Envoy架构 Pilot-agent生成的初始配置文件 Envoy管理接口获 ...
- Git+Gitlab+Ansible剧本实现一键部署动态网站(5)
项目前言 之前已经写了一篇关于git和ansible的博客<Git+Gitlab+Ansible剧本实现一键部署Nginx–技术流ken>.关于git,gitliab,ansible在我以 ...
- php Zookeeper使用踩坑
用的是Zookeeper扩展,Php版本为7.2.17,下载地址: https://pecl.php.net/package/zookeeper 用的是0.6.4版本 创建节点官方给的示例如下: &l ...