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 应用程序大致如 ...
随机推荐
- Android开发之强大的网络判断工具，判断是否联网，判断是wifi还是3g网络等java工具代码类
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985, 转载请说明出处. 给大家分享一个Android开发者常用的工具类.主要针对网络判断的 功能强大.下面 ...
- Java拷贝——深拷贝与浅拷贝
深拷贝和浅拷贝 值类型 vs 引用类型 在Java中,像数组.类Class.枚举Enum.Integer包装类等等,就是典型的引用类型,所以操作时一般来说采用的也是引用传递的方式: 但是Java的语言 ...
- String painter （区间dp）
There are two strings A and B with equal length. Both strings are made up of lower case letters. Now ...
- Solon详解（六）- Solon的校验扩展框架使用与扩展
Solon详解系列文章: Solon详解(一)- 快速入门 Solon详解(二)- Solon的核心 Solon详解(三)- Solon的web开发 Solon详解(四)- Solon的事务传播机制 ...
- Kubernetes 存活、就绪探针
在设计关键任务.高可用应用程序时,弹性是要考虑的最重要因素之一. 当应用程序可以快速从故障中恢复时,它便具有弹性. 云原生应用程序通常设计为使用微服务架构,其中每个组件都位于容器中.为了确保Kuber ...
- 20190923-05Linux用户组管理命令 000 013
每个用户都有一个用户组,系统可以对一个用户组中的所有用户进行集中管理.不同Linux 系统对用户组的规定有所不同, 如Linux下的用户属于与它同名的用户组,这个用户组在创建用户时同时创建. 用户组的 ...
- 浅谈DOM事件的优化
在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚 ...
- python的logging模块及应用
一.logging日志模块等级 常见log级别从高到低: CRITICAL >ERROR >WARNING >INFO >DEBUG,默认等级为WARNING,即>=WA ...
- selenium中Xpath标签定位和cssSelectors定位(优先用cssSelectors)
二者的区别:xpath 支持角标定位,cssselector不支持 1.XPath是XML的路径语言,通俗一点讲就是通过元素的路径来查找到这个标签元素. xpath支持属性定位,无论是默认属性还是自定 ...
- 用H5自带拖拽做出购物车效果的作业题
效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量.如果拖放有重复,只是在div里面让物品的数量加1,最后计算出 ...