格是組織和顯示數據的一種有效方式,無論是在文檔中還是網頁上。良好的表格設計可以提高信息的可讀性和易理解性。本文將詳細介紹如何創建和格式化表格,并提供一些實例。
<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>
格式化表格包括調整表格的樣式、布局和顏色等,以提高其可讀性和美觀性。
在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>
假設我們需要創建一個3x3的表格,顯示一個小型團隊的成員信息。
<!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 表格:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>0</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></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小時內與您取得聯系。