页编程之表格样式。

同学们好，我是一名免费的少儿编程老师。今天我要分享的内容是以列为单位设置表格样式。在插入表格课程中，我已经讲解了HTML中没有单独的列标签，列是由对应的单元格组成的行形成的。虽然如此，但列这个概念仍然是存在的。

让我们来看一下今天的示例效果。这个网页上有一个3行3列的表格，其中3列分别是姓名、科目和分数，而3行分别是表头行、字体加粗的内容和两行。第一列和第二列的背景颜色是绿色，第三列的背景颜色是灰色。在一列中，每一个单元格的样式都是统一的。

接下来，让我们看看实现的代码。以列为单位设置表格样式，实际上是通过这两个标签来实现的，分别是colgroup和col。colgroup翻译过来就是“列”的意思，而colgroup则是“列主”的意思。

首先，让我们来看看colgroup标签。这个标签是一个无属性的围堵标签，它的作用只有一个，即声明这个标签内包含的是本表格列的样式。通过这个标签，我们可以向整个列应用样式，而不需要为每一个单元格或每一行设置样式。

这个标签必须在table标签内，如果有caption标签，则必须在thead标签之前使用。如果不明白各标签的先后顺序，可以看看上节课的内容。colgroup标签仅仅是声明，具体的样式是要使用col标签来实现的。col标签的数量应该与TDTH的标签数量一致，一一对应地设置。第1行的col标签对应第1列的样式，第2行的col标签对应第2列的样式，以此类推。

有些同学会问，老师，你这里的表格有三列，但是你只写了两个col标签，这时候就要讲到col标签在HTML5中的两个常用属性，一个是col属性，说明了这一行的col标签的样式可以跨几列。

例如，在这里将第一行的col标签的Span属性设置为2，这就意味着这个样式在当前位置跨了两列。换句话说，让第一列和第二列使用了同一个样式。

第二个属性是它的style标签。这个style标签的内容是CSS的一段代码，通过这个属性我们可以为列添加各种效果。严格来说，style并不是卡标签的一个专用属性，而是HTML的全局属性之一。所谓的全局属性就是只要是HTML标签都自带这一个属性。对于各位同学来说，这是一个新概念，你们只需要记住就可以了。通过使用colgroup标签和col标签的配合，我们不仅能够灵活快速地为表格添加样式，进行美化，还能大幅减少代码量，提高页面加载速度。

以上就是今天的分享，希望各位同学能够牢记在心，并在下一次练习中做到不看视频也能够写出代码。如果需要获取相关案例和文档，可以向我提问。我们下期再见。如果你对网页编程、服务端编程、数据库、算法等感兴趣，欢迎点赞、关注！

文由ScriptEcho平台提供技术支持

项目地址：传送门

Plotly.js 动态生成 HTML 表格

应用场景介绍

在数据分析和可视化领域，经常需要以表格的形式展示数据。Plotly.js 是一款功能强大的 JavaScript 库，不仅可以创建交互式图表，还可以动态生成 HTML 表格。

代码基本功能介绍

本代码使用 Plotly.js 创建了一个动态 HTML 表格，可以显示多行多列数据。表格具有以下特点：

• 可自定义表头和单元格内容
• 支持设置表头和单元格样式，包括颜色、字体和对齐方式
• 表格可以根据数据动态更新

功能实现步骤及关键代码分析说明

1. 导入 Plotly.js 库

import Plotly from 'plotly.js-dist'

2. 定义表格数据

var values = [
  ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
  [1200000, 20000, 80000, 2000, 12120000],
  [1300000, 20000, 70000, 2000, 130902000],
  [1300000, 20000, 120000, 2000, 131222000],
  [1400000, 20000, 90000, 2000, 14102000]]

values 数组包含了表格的数据，其中第一行是表头，其余行是数据行。

3. 定义表格样式

var headerColor = "grey";
var rowEvenColor = "lightgrey";
var rowOddColor = "white";

这些变量用于定义表头和单元格的样式，包括颜色和填充颜色。

4. 创建 Plotly 表格对象

var data = [{
  type: 'table',
  header: {
    values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
                 ["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
    align: "center",
    line: {width: 1, color: 'black'},
    fill: {color: headerColor},
    font: {family: "Arial", size: 12, color: "white"}
  },
  cells: {
    values: values,
    align: "center",
    line: {color: "black", width: 1},
    fill: {color: [[rowOddColor,rowEvenColor,rowOddColor,
                          rowEvenColor,rowOddColor]]},
    font: {family: "Arial", size: 11, color: ["black"]}
  }
}]

data 对象定义了表格的结构和样式。header 对象定义了表头，cells 对象定义了单元格。

5. 绘制表格

Plotly.newPlot('myDiv', data);

Plotly.newPlot() 函数将表格绘制到指定容器中，在本例中容器的 ID 为 myDiv。

总结与展望

开发这段代码让我对 Plotly.js 的表格功能有了更深入的了解。我学到了如何动态生成 HTML 表格，并使用样式对其进行自定义。

未来，该表格功能可以拓展和优化：

• 支持表格数据的动态更新
• 添加交互功能，例如单元格排序和过滤
• 优化表格的响应式布局，以适应不同屏幕尺寸
• 更多组件：

获取更多Echos

本文由ScriptEcho平台提供技术支持

项目地址：传送门

微信搜索ScriptEcho了解更多

喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

因为在的编辑中“<”和“>”中的内容都会被识别为代码，显示不出来内容，所以，在文本中会省略“<”和“>”，图片中的“<”和“>”不会省略。

第一阶段 01 HTML5

07表格

1 表格table（会使用）

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

2 表格的注意事项

1 tr和 /tr中只能嵌套td和/td标签

2 td和/td标签，他就像一个容器，可以容纳所有的元素

3 表格属性

使用方法：

4 表头标签

只需用表头标记th和/th替代相应的单元格标记td和/td即可。

显示效果为加粗和居中。

5 表格结构（了解）

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：

1 thead和/ thead：用于定义表格的头部。

2 必须位于table和/ table标签中，一般包含网页的logo和导航等头部信息

3 tbody和/ tbody：用于定义表格的主体。

4 位于

6 浏览器审查HTML标签元素

浏览器页面按F12打开

左边显示为HTML，右边显示为CSS（后面会学到）

7 表格标题标签

表格的标题：caption

caption元素定义表格标题。

caption标签必须紧随table标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

8 合并单元格

跨行合并：rowspan

跨列合并：colspan

“2”表示合并两个单元格，数值是多少就合并多少个单元格。

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《08 表单和表单控件》小伙伴们不要错过哟！上述内容是作者本人的学习笔记，需要原视频学习资料可以在公众号回复关键词“前端资料”