頁編程之表格樣式。

同學們好，我是一名免費的少兒編程老師。今天我要分享的內容是以列為單位設置表格樣式。在插入表格課程中，我已經講解了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 表單和表單控件》小伙伴們不要錯過喲！上述內容是作者本人的學習筆記，需要原視頻學習資料可以在公眾號回復關鍵詞“前端資料”