12.HTML創建和格式化表格

格是組織和顯示數據的一種有效方式，無論是在文檔中還是網頁上。良好的表格設計可以提高信息的可讀性和易理解性。本文將詳細介紹如何創建和格式化表格，并提供一些實例。

創建表格

在Word或類似文檔編輯器中創建表格

插入表格：打開文檔編輯器，例如Microsoft Word，找到“插入”選項卡，點擊“表格”，選擇需要的行數和列數。
輸入數據：點擊表格中的單元格，開始輸入數據。可以使用Tab鍵在單元格之間跳轉。
調整行列：根據需要調整行高和列寬。在Word中，可以通過拖動表格邊框來調整，或者點擊右鍵選擇“表格屬性”進行精確設置。

在HTML中創建表格

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

<table> 標簽用于創建表格。
<tr> 標簽定義表格中的行。
<th> 標簽定義表頭單元格，通常加粗居中顯示。
<td> 標簽定義標準單元格。

格式化表格

格式化表格包括調整表格的樣式、布局和顏色等，以提高其可讀性和美觀性。

文檔編輯器中的格式化

邊框樣式：可以為表格或單個單元格設置邊框樣式、顏色和寬度。在Word中，選擇表格，然后在“設計”選項卡中選擇邊框樣式。
單元格填充：為了區分不同的行或列，可以對單元格進行顏色填充。在Word中，選擇單元格或行列，然后在“布局”選項卡中選擇“填充”。
文本對齊：文本對齊方式可以設置為左對齊、居中或右對齊。選擇單元格后，在“布局”選項卡中選擇對齊方式。
合并單元格：有時需要將多個單元格合并為一個單元格以顯示標題或其他信息。選擇要合并的單元格，然后點擊“合并單元格”。

HTML中的格式化

在HTML中，格式化通常通過CSS完成。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

border-collapse 設置為 collapse 以消除單元格之間的間隙。
th, td 設置了邊框、填充和文本對齊。
th 設置了表頭的背景色。
tr:nth-child(even) 為偶數行設置了條紋效果。

實例

文檔編輯器實例

假設我們需要創建一個3x3的表格，顯示一個小型團隊的成員信息。

插入一個3行3列的表格。
輸入數據：姓名、職位、郵箱。
設置第一行為表頭，加粗并填充淡藍色背景。
設置所有單元格的文本為居中對齊。
為表格添加外邊框，并為行添加細邊框。

HTML實例

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 50%;
    border-collapse: collapse;
    margin: 25px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Manager</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Developer</td>
    <td>bob@example.com</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>Designer</td>
    <td>charlie@example.com</td>
  </tr>
</table>

</body>
</html>

在這個HTML實例中，我們創建了一個帶有條紋效果的表格，表頭有綠色背景和白色文字，每個單元格都有適當的填充和邊框。

結論

創建和格式化表格是一項基本技能，無論是在文檔編輯器還是HTML中。一個良好格式化的表格不僅能有效傳達信息，還能提升整體文檔或網頁的美觀性和專業性。通過實踐這些技巧和使用示例作為參考，你可以創建出既實用又吸引人的表格。

、統計圖表ECharts

ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。

支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。

主頁：http://echarts.baidu.com/

2、彈窗/層 Layer

layer是一款近年來備受青睞的web彈層組件，她具備全方位的解決方案，致力于服務各水平段的開發人員，您的頁面會輕松地擁有豐富友好的操作體驗。

在與同類組件的比較中，layer總是能輕易獲勝。她盡可能地在以更少的代碼展現更強健的功能，且格外注重性能的提升、易用和實用性。layer兼容了包括IE6在內的所有主流瀏覽器。她數量可觀的接口，使得您可以自定義太多您需要的風格，每一種彈層模式各具特色，廣受歡迎。

layer遵循LGPL協議，將永久性提供無償服務。歷經數年，截至到2016年09月12日，已運用在20萬余家web平臺，其中包括中國聯通、螞蟻短租、慕課網、phpyun等等知名網站。

主頁：http://layer.layui.com/

3、日期選擇 LayDate

你是時候換一款日期控件了，而layDate非常愿意和您成為工作伙伴。她致力于成為全球最用心的web日期支撐，為國內外所有從事web應用開發的同仁提供力所能及的動力。她基于原生JavaScript精心雕琢，兼容了包括IE6在內的所有主流瀏覽器。她具備優雅的內部代碼，良好的性能體驗，和完善的皮膚體系，并且完全開源，你可以任意獲取開發版源代碼，一掃某些傳統日期控件的封閉與狹隘。layDate本著資源共享的開發者精神和對網頁日歷交互無窮的追求，延續了layui一貫的簡單與易用。她遵循LGPL協議，您可以免費將她用于任何個人項目。

layDate除了包含日期范圍限制、開始日期設定、自定義日期格式、時間戳轉換、當天的前后若干天返回、時分秒選擇、智能響應、自動糾錯、節日識別，快捷鍵操作等常規功能外，還擁有更多趨近完美的解決方案。

主頁：http://laydate.layui.com/

4、表單驗證jQuery Validate

jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。

該插件是由 J?rn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，并一直更新至今。

主頁：https://jqueryvalidation.org/

5、表單向導jquery-steps

jquery-steps是一個聰明的UI組件，它允許您輕松地創建精靈般的接口。這個插件組成部分內容更有條理，有序的頁面視圖。此外，它很簡單，jQuery驗證可以防止步改變或提交。

支持HTML5和交互方法，異步（AJAX）內容加載，容易表單驗證，嵌入式iframe內容，清爽的過渡效果，鍵盤導航，簡單的步驟操作，在一個頁面中的多個向導，輕松導航，狀態持久性。

主頁：http://www.jquery-steps.com/

6、文件上傳Web Uploader

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+。兩套運行時，同樣的調用方式，可供用戶任意選用。采用大文件分片并發上傳，極大的提高了文件上傳效率。

頭條號這里就是采用了這款圖片上傳插件。

主頁：http://fex.baidu.com/webuploader/

7、圖標庫阿里巴巴矢量圖標庫

Iconfont.cn是由阿里巴巴UX部門推出的矢量圖標管理網站，也是國內首家推廣Webfont形式圖標的平臺。網站涵蓋了1000多個常用圖標并還在持續更新中，Iconfont平臺為用戶提供在線圖標搜索、圖標分撿下載、在線儲存、矢量格式轉換、個人圖標庫管理及項目圖標管理等基礎功能。同時iconfont.cn平臺作為矢量圖標倡導者，積極在線分享矢量圖標制作經驗、前端應用說明，及應用中常見的一些問題。

主頁：http://www.iconfont.cn/

8、樹形菜單jsTree

jsTree是一個基于jQuery的Tree控件。支持 XML，JSON，Html三種數據源。提供創建，重命名，移動，刪除，拖放節點操作。可以自己自定義創建，刪除，嵌套，重命名，選擇節點的規則。在這些操作上可以添加多種監聽事件。

主頁：https://www.jstree.com/

9、表格Bootstrap table

Bootstrap table是國人開發的一款基于 Bootstrap 的 jQuery 表格插件，通過簡單的設置，就可以擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等等的功能。目前在github上已經有2600多個Star，可見其受歡迎程度。

支持 Bootstrap 3 和 Bootstrap 2
自適應界面
固定表頭
非常豐富的配置參數
直接通過標簽使用
顯示/隱藏列
顯示/隱藏表頭
通過 AJAX 獲取 JSON 格式的數據
支持排序
格式化表格
支持單選或者多選
強大的分頁功能
支持卡片視圖
支持多語言
支持插件

主頁：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

10、CSS動畫Animation.css

Animation.css是一個迷人的動畫庫，它提供了一堆很酷的，有趣的，跨瀏覽器的動畫，你可以在項目中調用它們。

主頁：https://daneden.github.io/animate.css/

限于篇幅，這次只介紹這10款，說是介紹，其實只是拋磚引玉而已，具體的用法我沒有附上，其實任何一個庫或者控件插件類的，看官方文檔是最佳的使用方式，如果有任何問題，請留言，謝謝

例

帶有 <thead>、<tfoot> 和 <tbody> 元素的 HTML 表格：

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

</table>

瀏覽器支持

所有主流瀏覽器都支持 <thead> 標簽。

標簽定義及使用說明

<thead> 標簽用于組合 HTML 表格的表頭內容。

<thead> 元素應該與 <tbody> 和 <tfoot> 元素結合起來使用，用來規定表格的各個部分（表頭、主體、頁腳）。

通過使用這些元素，使瀏覽器有能力支持獨立于表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

<thead> 標簽必須被用在以下情境中：作為 <table> 元素的子元素，出現在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

提示和注釋

注釋：<thead> 元素內部必須包含一個或者多個 <tr> 標簽。

提示：<thead>、<tbody> 和 <tfoot> 元素默認不會影響表格的布局。不過，您可以使用 CSS 來為這些元素定義樣式，從而改變表格的外觀。

HTML 4.01 與 HTML5之間的差異

在 HTML 5 中，不再支持 HTML 4.01 中 <thead> 標簽的任何屬性。

屬性

屬性	值	描述
align	rightleftcenterjustifychar	HTML5 不支持。定義 <thead> 元素中內容的對齊方式。
char	character	HTML5 不支持。規定 <thead> 元素中內容根據哪個字符來對進行文本對齊。
charoff	number	HTML5 不支持。規定 <thead> 元素中內容的第一個對齊字符的偏移量。
valign	topmiddlebottombaseline	HTML5 不支持。規定 <thead> 元素中內容的垂直對齊方式。

全局屬性

<thead> 標簽支持 HTML 的全局屬性。

事件屬性

<thead> 標簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

12.HTML創建和格式化表格

創建表格

在Word或類似文檔編輯器中創建表格

在HTML中創建表格

格式化表格

文檔編輯器中的格式化

HTML中的格式化

實例

文檔編輯器實例

HTML實例

結論

您的項目需求