工具1：HBuilder X 1.9.9.20190522
工具2：火狐浏览器 67.0.4 (64 位)
目前，我们已经将一些行和列插入到表格中，并设置单元格的背景颜色，显示 RGB 值等。
例 7：最后，我们需要将表头插入到表格中。基于上一个例子，我们再加入一些 JavaScript 代码。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>灰阶颜色表</title>
6 <style type="text/css">
7 table {
8 width: 400px; /* 设置表格的宽度 */
9 border-width: 1px; /* 设置表格的四条边框的宽度 */
10 border-style: solid; /* 设置表格的四条边框的样式 */
11 border-color: gray; /* 设置表格的四条边框的颜色 */
12 border-collapse: collapse; /* 规定是否合并表格边框。 */
13 /* 使表格居中对齐 */
14 margin-left: auto;
15 margin-right: auto;
16 }
17 th {
18 color: white; /* 设置表头单元格的文本的颜色 */
19 background-color: #3F3F3F; /* 设置表头单元格的背景颜色 */
20 }
21 th, td {
22 /* 设置表格中的单元格的外边框风格 */
23 border-width: 1px;
24 border-style: solid;
25 border-color: gray;
26 text-align: left; /* 规定表格中的单元格的文本的水平对齐方式 */
27 font-family: "courier new", 新宋体; /* 规定表格中的单元格的文本的字体系列 */
28 padding: 4px; /* 在一个声明中设置所有内边距属性。 */
29 }
30 </style>
31 </head>
32 <body onload="insertTableRow()">
33 <table id="grayScale">
34
35 </table>
36 </body>
37 <script type="text/javascript">
38 // #### 创建一个灰阶颜色表 ####
39 function insertTableRow() {
40 // 获取表格对象
41 var table = document.getElementById("grayScale");
42 // #### 加入表主体信息 ####
43 for (var i = 0; i < 256; ++i) {
44 // 插入一行
45 var tableRow = table.insertRow(i);
46 // RGB 颜色值
47 var value = dec2Hex("#", i) + dec2Hex("", i) + dec2Hex("", i);
48 // 插入第一个单元格，并设置背景颜色
49 tableRow.insertCell(0).style.backgroundColor = value;
50 // 插入第二个单元格，并将第一个单元格所对应的背景颜色的十六进制值写入其中
51 tableRow.insertCell(1).innerHTML = value.toUpperCase();
52 // 插入第三个单元格，并将第一个单元格所对应的背景颜色的RGB值写入其中
53 tableRow.insertCell(2).innerHTML = "rgb(" + i + "," + i + "," + i + ")";
54 }
55 // #### 加入表头信息 ####
56 // 表头中的单元格的内容
57 var tableHeaderContent = ["灰阶", "HEX", "RGB"];
58 // 表头中的单元格的宽度
59 var tableHeaderWidth = ["30%", "25%", "45%"];
60 // 在表格中创建并获取 <thead> 元素。
61 var tableHead = table.createTHead();
62 var txt;
63 for (var i = 0; i < 3; ++i) {
64 // 创建并获取一个 <th> 元素
65 var tableHeader = document.createElement("th");
66 // 将信息加入到单元格中
67 txt = document.createTextNode(tableHeaderContent[i]);
68 tableHeader.appendChild(txt);
69 // 将单元格插入到表头中
70 tableHead.appendChild(tableHeader);
71 // 设置表头中的单元格的宽度
72 tableHeader.style.width = tableHeaderWidth[i];
73 }
74 }
75 // 十进制数转 2 位十六进制数
76 // 形参 prefix 指定前缀
77 // 形参 value 的取值范围 0 ~ 255，如果传递一个在此范围之外的数字，将得到不可预期的结果。
78 function dec2Hex(prefix, value) {
79 var hexCode = value.toString(16);
80 var zeroes = "00";
81 var length = zeroes.length - hexCode.length;
82 return prefix + zeroes.substr(0, length) + hexCode;
83 }
84 </script>
85 </html>
通过使用火狐浏览器的查看器，我们可以看到，新增的表头位于表主体前面。
让我们一起看看这块 JavaScript 代码：
55 // #### 加入表头信息 ####
56 // 表头中的单元格的内容
57 var tableHeaderContent = ["灰阶", "HEX", "RGB"];
58 // 表头中的单元格的宽度
59 var tableHeaderWidth = ["30%", "25%", "45%"];
60 // 在表格中创建并获取 <thead> 元素。
61 var tableHead = table.createTHead();
62 var txt;
63 for (var i = 0; i < 3; ++i) {
64 // 创建并获取一个 <th> 元素
65 var tableHeader = document.createElement("th");
66 // 将信息加入到单元格中
67 txt = document.createTextNode(tableHeaderContent[i]);
68 tableHeader.appendChild(txt);
69 // 将单元格插入到表头中
70 tableHead.appendChild(tableHeader);
71 // 设置表头中的单元格的宽度
72 tableHeader.style.width = tableHeaderWidth[i];
73 }
这是 JavaScript 数组：
57 var tableHeaderContent = ["灰阶", "HEX", "RGB"];
59 var tableHeaderWidth = ["30%", "25%", "45%"];
在表格中创建 <thead> 元素，并将返回的元素的引用存储在 tableHead 中。
61 var tableHead = table.createTHead();
定义和用法：createTHead() 方法用于在表格中获取或创建 <thead> 元素。
语法：tableObject.createTHead()
返回值：返回一个 TableSection，表示该表的 <thead> 元素。如果该表格已经有了表头，则返回它。如果该表没有表头，则创建一个新的空 <thead> 元素，把它插入表格，并返回它。
创建并获取 <th> 元素，接着将文本信息添加进 <th> 单元格中，最后将单元格插入到表头中。
65 var tableHeader = document.createElement("th");
67 txt = document.createTextNode(tableHeaderContent[i]);
68 tableHeader.appendChild(txt);
70 tableHead.appendChild(tableHeader);
关于如何创建 <th> 元素，参考：HTML DOM TableHeader 对象
定义和用法：appendChild() 方法向节点添加最后一个子节点。
提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
到这里，《HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表》已经完结！