㈠ 網頁端表格設計指南
想像一下你為企業端產品設計了一個系統，或是設計了某個應用程序。在諸如此類的設計中都需要用到表格。這些表格設計不是那些設計網站中展示的非常精美的表格樣式，而是具有復雜交互和數百個單元格的表格。
在這種情況下，設計師會面臨許多挑戰。 例如：將設計與現有的前端框架進行匹配，或與破壞布局的「不舒服」數據進行斗爭。 我們將通過以下步驟來解決這些問題：系統化需求，原子化，定義交互。
所以，你已經采訪了目標受眾。現在是時候將他們的需求和需求拼湊在一起，並轉化為對設計有用的東西。例如，一位用戶說：「我需要看看我的數據如何影響應用程序的其他部分。」或者在看到另一個人使用軟體時，你注意到他只使用快捷方式而根本不摸滑鼠。這是什麼意思？第一個用戶的話是關於輸入驗證和提示。你需要考慮將警報或幫助信息附加到表中，或者開發一個有意義的顏色系統。這取決於領域和心理模型。觀察第二個用戶的工作可能是你需要設計鍵盤可設置快捷方式，可能需要考慮比「Cmd + C」和「Cmd + V」更深刻的快捷方式。
這樣，你就有一系列的需求和願望。開放式問題有助於找出真正的需求並過濾掉一時興起。例如，「什麼可以幫助你更快地工作？這如何提高你的工作效率？如果你不能做XX會有什麼改變？「
這時候就需要一個功能框架了。如下圖
任何錶的最小構建塊都是一個單元，聯合成行和列，其具有不同於其他單元的特定特徵。 最後，我們將表格的重要補充作為頂欄，鍵盤命令，處理錯誤等。
簡而言之，構建一個復雜的表，收集並優先考慮用戶需求。 考慮非表格解決方案，例如圖表。
繪制一張樹形圖，系統化所有需要的功能。
原子化是首先設計小的UI組件然後組裝更大的UI組件。 我們將逐漸從字體和顏色等基本粒子轉移到像標題或列這樣的大模態。
這些部分可以由設計系統或UI框架定義。 如果為現有產品創建表，請檢查調色板，字體和圖標是否滿足表格的需要。
當表格原子設計准備就緒時，我們可以繼續設計不同類型的單元。 首先要事先考慮每個元素的「正常」，「懸停」和「激活」的狀態。 後面再添加「點擊」，「禁用」和其他狀態。
單元格可以有工具提示，輸入提示，錯誤消息，佔位符等附件。
設計單元格創建行時，需要查看各種組合是否可以很好地協同工作。 下面我在一行中展示了只讀和可編輯單元格的。 一旦設計一個具有復雜編輯邏輯的表格，那麼表格的某些欄位由用戶提供，而其他欄位則使用默認值自動計算或填充。
需要注意的是，將滑鼠懸停在只讀和可編輯單元格上時，游標會有所不同。 點擊單元格會觸發選擇行或進入可編輯單元格的編輯模式。 你可以在下圖看到用戶選擇一行或多行時的單元格狀態。
現在是時候考慮表頭了。 根據我的經驗，通常無法控制列標題長度並堅持一行。 我在下圖展示了表頭的不同變體。
基於數據的工具，用戶經常需要排序和過濾。 它可以幫助用戶在冗長的數據中找到有價值的信息。 排序和過濾的挑戰是將排序控制項和過濾控制項與其他標題元素（列標題，度量單位等）結合起來。
與表格單元格不同，過濾器框通常在右側具有「重置」圖標，以便用戶可以查看未過濾的內容。
在示例中，有三種類型的過濾器框。 字母數字過濾器可以按字母和數字進行搜索。 它支持通配符 - 未知數量的未知字元。
日期選擇器過濾器具有日歷，其工作方式與其單元格相同。 允許用戶手動輸入日期並從日歷中選擇是一件好事。 如果他們知道他們在搜索什麼，那麼打字比點擊容易得多。 在我的一個項目中，我們允許輸入「01/25/2017」，「6 12 17」和「2016年9月4日」等日期，僅過濾一個月或一年。
復雜表的一個常見功能是固定列。 通常，包含關鍵信息的列（例如，元素名稱或狀態）不可滾動。
雖然表列應該巧妙地適應內容大小，但是當文本被截斷時會發生。 在這種情況下，列大小調整很有幫助。 用戶可以拖動列邊緣並查看長內容。
處理長文本字元串的另一種方法是：使用最長內容拉伸列或將內容折成多行。 第一種方法對於或多或少類似的文本字元串更有效。 如果看到全部內容對於人們來說比保持表格的垂直緊湊更重要，那麼第二個更好。
我們需要定義列的默認最小寬度，以防止表格不適合調整大小。
什麼構成一張表格？ 單元格，列，行。 此外，復雜的表通常有一個頂部操作區。 與其他組件一樣，頂部欄由較小的元素構成 - 標題和命令。 下面我收集了我們在其中一個產品中使用的各種狀態的命令列表。
現在我們可以嘗試組合不同的元素，看看它是否有效。 這里有些例子。
當然，這不是功能和元素的最終列表。 它不同於一個項目，可能包含其他內容，例如：
按多列排序;
可自定義的列;
可擴展行;
用於過濾和搜索的邏輯運算符（「和」，「或」，「其他」等）。
如果你猶豫要設計哪些功能，哪些沒有，可以參考奧卡姆的剃刀，或簡約法則。 如果現有的實例滿足需求，則設計者不應創建新實例。 你應該「削減」用戶可能需要的令人討厭的功能。
只讀表格 。 要構建的最簡單的表類型，因為它只顯示數據。 沒有過濾或編輯選項。
搜索表格 。 單元格不可編輯，標題有過濾框和排序控制項，可以選擇行。 從實踐來看，這些表格有助於從大量類似的東西中查找，比較和選擇一個項目或幾個項目。
可編輯的表格 。 所有或部分單元格都是可編輯的，通常沒有篩選，因為行的順序可能是自定義的。 這些表格通常會有工具欄並允許使用行執行操作。
簡而言之
從最小的組件開始。 然後逐漸走向更大的，最後，模擬整個表格。
事先考慮每個組件的所有可能狀態。
使用Occam的剃刀原則將元素數量保持在最小但覆蓋所有用例。
構建塊不足以構建像表格這樣復雜的。設計師應該考慮「游戲規則」，並設計視覺部分背後的邏輯原則和慣例。
容器與響應式
如何將表格放在界面中？ 例如，它會佔用現有容器中的一些空間還是一個單獨的模塊？ 這些問題的答案完全取決於產品，最好預見可能的問題並徹底定義原則。
有些應用程序使用線條或白色灰色「斑馬線」來使信息更易讀。
定義合理的默認寬度，並允許在需要時手動調整大小。對於閱讀表格，最好在右邊有一些空格而不是列之間的間隙。但是如果一個表包含許多行和列，則水平和垂直滾動是不可避免的。對於手機端的閱讀，還可以把表格做成卡片式利於用戶瀏覽數據。
即使是非常流暢和漂亮的表格也可能成為用戶的噩夢。因此，遵循可訪問性原則非常重要。 以下是可訪問性方面的主要設計考慮因素。
給出標題並准備簡明的摘要 。視力受損的用戶應該能夠在不對其所有單元進行語音處理的情況下處理表格。
注意字體大小 。盡管網路沒有正式的最小尺寸，但16 px（12 pt）被認為是最佳的。此外，用戶應該能夠在不破壞整個布局的情況下將表格增加到200％。
為有色盲的人測試顏色 。文本和控制項應與其背景具有足夠的對比度。最低要求色比3：1（越多越好）。顏色不應該是標記事物的唯一方式。例如，錯誤消息不應僅依賴於紅色文本，警告圖標將為色盲用戶提供參考。
避免使用小而模糊的控制項 。如果可點擊組件至少為40×40像素，則認為它們是觸摸友好的。由圖標表示的命令應標記或具有工具提示和替代文本。設計師不應過度使用圖標，因為用戶可能無法正確理解復雜的隱喻。
簡而言之
內容統一和格式化也是設計師的工作。
不僅要考慮界面元素，還要考慮用例，規則和常用模式。
原文：https://medium.muz.li/complex-tables-356826d11861
譯者：Ever
相關文章推薦：
在構建設計規范之前，你需要看看這些設計資源
如何構建設計語言系統
給初級UI&UE設計師的Sketch資源分享
交互設計原則和理論1——尼爾森十大可用性原則
交互設計原則和理論2——七大定律
國外設計團隊的高頻設計工具與協作工具
16個表單優化技巧
網頁端表格設計指南
怎樣提高注冊登錄流程的交互體驗
不可錯過的2019設計趨勢
㈡ jsp頁面如何在前端判斷表格兩行的數據是否相同
使用js進行獲取表格中的內容，然後進行判斷是否相同。
㈢ 前端圖表如果處理大量數據該怎麼辦
淺談一下Cognos處理大數據的思路，僅針對10.2.1以下的版本，對於10.2.1當中引入的hadloop等分布式數據倉庫等不做介紹。我們主要從一個一般中等項目當中，用怎樣的思路來優化我們的查詢。
我們主要從3個思路來思考大數據的處理
一、資料庫層次
現在主流的Cognos項目，主要的開發模式還是基於rolap的dmr報表建模。因此，資料庫的優化就顯得由為重要。主要通過以下幾個方面優化我們的資料庫：
(1)維度id，維度層次id等關鍵減縮欄位建立索引建立、維護。
(2)根據數據量的大小，按時間等進行分區優化。
(3)高速緩沖表MQT的使用
(4)表空間、緩沖池設置等
(5)資料庫性能優化
二、Cognos Server優化
Cognos優化包括對配置文件的優化，集群的搭建，服務和日誌的開啟等基於cognos 軟體安裝，配置的優化，主要包括以下幾個方面：
2.1 apache 配置優化
Timeout（超時）/MaxKeepAliveRequests（最大的請求數）/KeepAliveTimeout（請求超時）的優化配置
2.2Cognos自帶tomcat配置調優
(1)可修改TOMCAT配置文件CRN_ROOT\tomcat.\conf\server.xml。其參數集中在行：
可以對maxProcessors（最大進程數）/AcceptCount(最大連接數) ConnectionTimeout（連接超時）進行修改
(2)文件路徑：CRN_ROOT\tomcat.\conf\web.xml
可以對session-timeout進行修改.
2.3Cognos sever配置文件優化
2.3.1 reportservice.xml優化
文件路徑：CRN_ROOT\ webapps\p2pd\WEB-INF\services\ reportservice.xml
註：修改文件後，重啟服務後配置生效。
包括以下參數 max_process(交互報表處理進程數，和cpu有關) inger_process(交互報表初始化進程數，和cpu優關)
max_non_affine_connections_per_process(交互報表所佔線程數) idle_process_check_interval_ms(空閑檢測時間)
queue_time_limit_ms(報表服務隊列時間限制) async_wait_timeout_ms(Dispatcher請求等待同步時間)
2.3.2 batchreportservice.xml
文件路徑：CRN_ROOT\ webapps\p2pd\WEB-INF\services\ batchreportservice.xml
註：修改文件後，重啟服務後配置生效。
包括以下參數 max_process(服務批量報表處理所佔進程數) linger_process(服務批量報表處理初始化進程數)
max_non_affine_connections_per_process(服務批量報表處理所佔線程數) idle_process_check_interval_ms(空閑進程檢測時間間隔)
idle_process_max_idle_ticks(空閑進程檢測標記) queue_time_limit_ms(批量報表處理排隊時間限制) async_wait_timeout_ms(Dispatcher請求等待同步時間)
2.3.3 CQEConfig.xml
主要是與資料庫參數設置，文件路徑：CRN_ROOT\configuration\ CQEConfig.xml.sample
註：將CQEConfig.xml.sample文件名修改為CQEConfig.xml後，重啟服務後配置生效。
可以修改以下參數：Timeout(應用資料庫連接超時設置) PoolSize(應用資料庫連接池最大連接數設置) queryReuse(查詢緩沖設置)
2013-07-08 0
分享
答案對人有幫助，有參考價值1
曾力 - Cognos講師、Cognos獨立顧問、數據倉庫架構師 2013-07-08 回答
2.3.4 ppds_cfg.xml
主要進行緩存和日誌參數設置，文件路徑：\cognos\c8\configuration\ ppds_cfg.xml
註：重啟服務後配置生效。
可以修改以下參數：ReadCacheSize(可減少用戶訪問時伺服器的磁碟IO。提高訪問速度。) pcQueryLogFile(建議生產環境關閉該日誌的跟蹤，一般默認也是關閉狀態)
2.4 Cognos content store優化
2.4.1優化內容庫連接服務
內容庫最好外配為db2 oracle等資料庫，不要用自帶的derby.因為項目中的日誌信息會非常多，嚴重影響內容庫的效率。
Cognos Administration，在系統下選擇選擇對應的服務，選擇ContentManagerService的屬性，設置相應的連接參數信息。
2.4.2日誌優化
適當開啟各個cognos服務的日誌級別，越高級的級別對應更詳細，更明確的日誌，但也會影響整個系統的效率。
這是一把雙刃劍，需要適當調整。日誌級別設置得越高，就越降低系統性能。通常情況下，您可以將級別設置為
「最小」或「基本」來收集錯誤，或設置為「請求」來收集錯誤和警告。
2.5提高訪問資料庫速度
Cognos和資料庫間參數在cer\bin\cogdm.ini文件中,(根據版本不同是安裝目錄的數字，根據連接的資料庫不同，是對應資料庫名稱的關鍵字)
以oracle資料庫為例,參數在cogdmor.ini文件中，打開這個文件查找字元串Fetch Number of Rows=去掉這行前面的分號，將10改成2000；
這樣這行就成了Fetch Number of Rows=2000，表示是每次從資料庫取2000條數據。其他資料庫基本上都有類似的配置。用以提高從資料庫中提取數據的速度。
2.6加大緩存
cer\bin\Cer.ini(*根據版本不同是安裝目錄的數字)：
SortMemory=5120
（這里 SortMemory 單位是 2kbytes，5120代表 2k x 5120 = 10M）（技巧：一般 SortMemory 取空閑內存的十分之一到八分之一大小）
2.7修改cognos configuration中的參數來優化
在cognos configuration中有很多參數可以優化來提高整體軟體的運行效率，比如增加內存、增加查詢緩存
2.8分布式部署
分布式部署可以大大提升Cognos伺服器的負載能力，同時容錯保護功能可以使伺服器更為穩定的運行，很好的支持大用戶量的並發使用。
2013-07-08 0
答案對人有幫助，有參考價值1
曾力 - Cognos講師、Cognos獨立顧問、數據倉庫架構師 2013-07-08 回答
3.報表設計優化
Cognos報表作為一個工具，在非cube模式下，最終我們執行報表查詢的時候，我們的報表發送到資料庫進行查詢的本質還是sql，所以，在我們製作一張報表的時候，我們要盡可能的利用fm,rs當中的功能，優化報表最終執行生成的SQL實現整個報表的優化。而CUBE模式下，我們更多要考慮配置、存放和資料庫大小所造成的影響，下面我會細細說來。
2013-07-08 0
答案對人有幫助，有參考價值1
曾力 - Cognos講師、Cognos獨立顧問、數據倉庫架構師 2013-07-08 回答
3.1 FM建模優化
3.1.1手寫SQL定製查詢主題
右鍵點擊查詢主題的菜單項Edit Definition…可以進入SQL語句編寫框，調整查詢主題的SQL語句。默認情況下，這里的SQL語句為Cognos SQL類型。如果需要編寫應用資料庫可以直接運行的本地SQL需要將這里的SQL類型進行設置。點擊右上方的Options按鈕，選擇SQL Settings標簽頁，選擇SQL Type為Native。這個時候，我們手寫SQL就非常注重這個SQL的優化，盡量避免SELECT *,用EXISTS替代IN,多使用DECODE來進行判斷，條件語句注意點等常用SQL優化策略，編寫對應的SQL.
3.1.2盡量使用特定數據的資料庫函數
在菜單項Actions中選擇Specify Package Function List…指定報表定製中可以使用的資料庫函數列表。將除應用資料庫意外的其他資料庫類型從Selected function sets中選到Available function sets中，盡量使用特定資料庫的自帶函數可以提高查詢效率。
3.1.3表關聯設定
在建立表關聯盡量避免使用外關聯關系（包括左外關聯、右外關聯、全外關聯）。外關聯的使用會使資料庫的查詢壓力驟增，從而影響前端報表的生成。在星型結構、雪花型結構的數據倉庫模型中，盡量按照一對一、一對多的關聯關系設定維表與實事表之間的關聯，Cognos Server會依照這里的關聯關系自動優化提交給資料庫的SQL語句。如果關聯關系中出現了環狀連接關系，可以通過別名表或是快捷鍵的方式解決環狀連接問題.
3.1.4Edit Governors查詢性能設置
在菜單項Project中選擇Edit Governors，可以設置查詢的查詢性能
Report table limits 該屬性設置報表中運行SQL所涉及的TABLE數量
Data retrieval limits 該屬性設置報表中運行SQL返回結果的數量
Query execution time limits 該屬性設置報表中運行SQL的執行時間
Large text items limit 該屬性設置報表中運行SQL返回大文字塊的字元數量限制
2013-07-08 0
答案對人有幫助，有參考價值1
曾力 - Cognos講師、Cognos獨立顧問、數據倉庫架構師 2013-07-08 回答
3.2 RS報表調優
3.2.1報表函數的使用
在報表函數的使用上，盡可能使用應用資料庫能夠解析的本地資料庫函數，函數列表中的通用函數，在處理時會將函數放在報表伺服器進行運算，從而增大了報表伺服器的性能開銷。
3.2.2 觀察查詢的SQL
我們選擇查詢頁面，GENERATE SQL/MDX觀察這個報表生成的SQL並進行不斷優化，
3.3.33.2 RS報表調優
3.2.1報表函數的使用
在報表函數的使用上，盡可能使用應用資料庫能夠解析的本地資料庫函數，函數列表中的通用函數，在處理時會將函數放在報表伺服器進行運算，從而增大了報表伺服器的性能開銷。
3.2.2 觀察查詢的SQL
我們選擇查詢頁面，GENERATE SQL/MDX觀察這個報表生成的SQL並進行不斷優化，
3.3.3查詢欄位、查詢表順序調整
根據資料庫的優化策略，可能需要將查詢欄位的順序進行調整，可以在Data Items窗口中進行設置。查詢SQL語句中，From關鍵字後面的表順序是按照select關鍵字後出現的欄位順序進行設置的。在為表順序進行設置時，屬性為Identifier或Attribute的欄位比屬性為Fact的欄位在為表排序時的優先順序要高，即，先以Identifier、Attribute欄位的出現順序為表進行排序，如果沒有上述兩類欄位，才以Fact欄位的出現順序為表進行排序。
3.3.4聚合前後設置過濾條件
將過濾條件的Application屬性設置為After aggregation或Before aggregation可以調整過濾條件在聚合前或是聚合後生效。After aggregation生成過濾條件的SQL語句使用的是關鍵字having，而Before aggregation生成過濾條件的SQL語句使用的是關鍵字where。
3.3.5取消報表自動分組提高明細報表查詢速度
如果報表要展現明細數據，不想使用任何匯總，我們可以到此報表對應的查詢中將自動分組屬性定義為否。修改地方：對象的屬性Auto Group & Summarize可以設置當前SQL語句的查詢中是否加入distinct、sum、group by這樣的關鍵字。默認情況下，該屬性設置為Yes，可以根據查詢情況關掉此開關項，減少SQL語句的復雜度。
3.3.6自動排序設置
在Query的Auto-sort屬性中可以為查詢設置是否自動排序。如果選擇是，則會在生成的SQL語句中自動加入Order By關鍵字，排序欄位將自動根據數據項的屬性進行設置（如果查詢欄位的usage屬性為Attribute、Identifier則排序，如果為Fact則不排序）；如果選擇否、則不排序；如果選擇最小，則根據數據項的排序屬性進行排序設置。默認值為最小。
3.3.7報表Processing設置
在Query的Processing屬性中可以為查詢設置SQL的處理設置。Cognos Report Studio會將報表的所有設置首先轉換為Cognos SQL提交給報表伺服器，伺服器在進行必要處理後，會將SQL語句轉換為應用資料庫本地執行的SQL語句，進行資料庫處理。為提高報表的處理速度，要盡可能的將報表的處理運算放在資料庫進行，以保證其運行速度。將該屬性設置為Database only會將報表頁面生成的Cognos SQL不經報表伺服器處理全部轉換為資料庫能夠執行的本地資料庫SQL，如果將該屬性設置為Limited Local，則將報表頁面生成的Cognos SQL先進行必要的報表伺服器運算，然後再將剩餘的部分提交給資料庫進行本地SQL的處理。默認值為Framework中為Datasource對象的設置的queryProcessing屬性。
3.3.8使用With子句
在Query的Use SQL With Clause屬性中可以為查詢設置是否使用With子句。部分資料庫例如Oracle支持With關鍵字，當查詢中嵌套子查詢時，可以通過With子句的使用，減輕報表伺服器對Cognos SQL的處理，從而提升報表的運行性能。如果將該屬性設置為Yes，則允許使用With關鍵字，查詢中生成的Native SQL將出現With子句；如果將該屬性設置為No，雖然拒絕使用With關鍵字。默認值為Framework中Edit Governors下的Use WITH clause when generating SQL屬性設置。
3.3.9報表伺服器本地緩存設置
在Query的Use Local Cache屬性中可以為查詢設置是否使用本地緩存。如果將該屬性設置為Yes，則啟用伺服器的本地緩存，伺服器將為查詢結果保存在session中，當用戶在瀏覽器內再次打開同一張報表時，查詢結果將取自緩存，從而減輕了資料庫的負載壓力；如果將該屬性設置為No，則禁用伺服器的本地緩存，查詢結果全部取自資料庫的實時數據。默認值為Framework中Edit Governors下的Allow usage of local cache屬性設置。
我用的是finereport，比這個方便
㈣ 前端用echarts實現表格形柱形圖的有哪些
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性 化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表 盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展 現。模塊化單文件引入(推薦)1新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，2新建script標簽引入模塊化單文件echarts.js，3新建script標簽中為模塊載入器配置echarts和所需圖表的路徑(相對路徑為從當前頁面鏈接到echarts.js)，4script標簽內動態載入echarts和所需圖表，回調函數中可以初始化圖表並驅動圖表的生成，5瀏覽器中打開ecarts.html，就可以看到以下效果，：END標簽式單文件引入新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，新建script標簽引入echart-all.js，新建script，使用全局變數echarts初始化圖表並驅動圖表的生成，瀏覽器中打開echarts.html，可以看到如下效果，
㈤ 如何讓前端以表格形式動態展示後端Python的數據
主要就是js對數據的操作和對dom的操作。 前端的工作就是切圖，展示數據到網頁中。那麼怎麼獲取數據呢？以什麼格式獲取數據呢？都是需要和後台交互的。 後台語言都是不一樣的：php，jsp等等，我們前端js的工作就是把他們的數據拿過來顯示。
㈥ 前端入門|HTML基礎元素3，表格
表格在數據展示方面非常簡單，並且表現優秀，通過與CSS的結合，可以讓數據變得更加美觀和整齊。
行、列、單元格單元格特點：同行等高、同列等寬。
表格的基本語法：
創建一個3行3列的表格：
單元格中內容的填充間距通過cellpadding(默認1px)屬性來設置；
單元格與單元格之間的間距通過cellspacing(默認1px)屬性來設置。
設置單元格的填充間距為10，單元格之間的間距為0，紅色邊框
一般表格的第一行是標題，並且是文本居中、加粗，將td換成th。
而某些數據需要居中，但不希望加粗，可以給td添加align="center"
表格的跨行跨列
有時，表格的結構並沒有那麼簡單，可能會存在跨行和跨列的情況：
跨行：
跨列：
跨行、跨列並存：
這個問題看似很復雜，其實很簡單，在製作跨行和跨列的表格時，只需按照如下步驟就可以輕松搞定！：
首先做一個完整的表格：注意虛線部分，最終去掉這些虛線就是我們要的效果
找出最左上角那個「侵佔」其他單元格的單元格，如下圖標注數字的位置
觀察這個單元格「侵佔」的是行還是列，算上自己總共是幾個？(行數用r表示，列數用c表示)：
如果是行：在這個單元格上添加rowspan="r"
如果是列：在這個單元格上添加colspan="c"
如果既有行又有列：在這個單元格上添加rowspan="r" colspan="c"
把「被侵佔」的單元格刪掉，刪除順序：從右向左，從上至下，否則很容易出錯！
按以上步驟完成一個跨行跨列的表格：
每天持續更新，點點關注不迷路哦~
㈦ 如何前端實現類似汽車之家車輛對比的功能
但效果自己搞吧
給分析一下
每個產品都有獨立的id。
說白了，這幾個就是數據調用的問題，而怎麼判斷id就是個關鍵問題。
另外就是就數據的 i++1展示效果了
㈧ 大數據可視化大屏圖表設計經驗，教給你！
自從跟大家分享第一篇 《大數據可視化大屏設計經驗，教給你！》 ，很多小夥伴都會問我一些相關的問題，看了小夥伴給我發的視覺稿，整體都還不錯，但是發現圖表的設計都有一些問題，大家可能對數據可視化的圖表設計經驗少一些，所以這篇文章就挖掘一下圖表的細節表現，分享我曾經遇到過的坑和對圖表設計的理解。
圖表設計
圖表設計概念
圖表設計是數據可視化的一個分支領域，是對數據進行二次加工，用統計圖表的方式進行呈現，也是數據可視化的核心表現，圖表設計既要保證圖表本身數據清晰准確、直觀易懂，又要在找准用戶關注的核心內容進行適當的突顯，幫助用戶通過數據進行決策。
下面分析三種常用的可視化圖表設計：
折線圖
折線圖常用於表示數據的變化和趨勢，坐標軸的不同對折線的變化幅度有很大的影響。
左圖坐標軸設定的太低，折線變化過於陡峭，圖中數值區間為（10-34）數據可視化的表現過於誇大了折線變化的趨勢。
右圖坐標軸的數值設定的太高，則折線變化過於平緩，無法清晰的表現折線的變化。
合理的折線圖應當占據圖表的三分之二的位置，圖表的X軸數值范圍應根據折線的數值增減變化而變化，這需要跟前端小哥哥小姐姐說明，做成動態計算。
折線圖的折線粗細要合理，過細的折線會降低數據表現，過粗的折線會損失折線中的數據波動細節，視覺上較難精準找到折線點的相應數值！我通常用兩個像素的線，看起來比較合適！
右圖刻度線顏色過重，影響圖表數據的表現，零基線跟圖表內的刻度線對比不夠明顯，整體很亂。零基線是強調起始位置的，一般要比圖表內的線顏色凸出一些。
條形圖/柱狀圖
理想很豐滿，現實很骨感。這個案例是我之前在工作中遇到的問題，數據進來後，被嚇到了，問題的原因是沒有跟前端小哥姐溝通好，他們把X軸寫死，導致出現這種問題，其實應該情況要把這些圖表的取值范圍寫成動態計算的。
例如，以現在數值范圍為例，數據的最高值為18，X軸最高數值應該為25，當數據又上升一定的高度後，X軸再上升到相應的數值高度，這樣避免了如右圖的問題。
坐標軸的標簽文字最好能水平排列， 當X軸標簽文字過多時，不建議傾斜排列、上下排列、換行排列 文字多了這樣的展示大大降低了閱讀性！下圖給出兩個解決方案，大大提高標簽文字的閱讀性！
解決方案
柱子之間過於分散就會失去數據之間的關聯性，過密就會變得數據之間沒有獨立性更不利於舒適閱讀。
當柱子為n時，柱子直接的距離建議與n相差不要太大，柱子靠邊的距離，最好是柱子之間的一半的距離，這樣視覺上最為舒適。
餅圖
左1圖，不建議在餅圖內與百分比數值一起顯示，餅圖本身的形狀和大小，文字過多時容易溢出，如果出現一個2%一個1%，就很難辨別圖形指向，這樣也就失去了數據可視化的意義，PPT通常有這樣的設計樣式，因為是個死圖。
左3圖，人的閱讀習慣是從左到右，從上到下，所以數據從大到小排列，更有助於閱讀，圖形也更具美感！
當餅圖為檢出率，或者一些重要信息檢測的重點關注數據，就不建議大小數據順時針排列，左1圖這種情況一般很少出現，因為關注的是檢出數值，展示未檢出數據實為雞肋，可能是極少情況的需要吧！
右圖對於類似檢出率的數據最為合適，直觀清晰，沒有無用數據干擾！
當餅圖的標簽維度過多時，就不適合把數據圍繞餅圖一周展示，會很亂，不易閱讀，解決方案如右圖！
圖表分類圖
分享一張圖表分類大全，保存起來，設計數據可視化產品，會有重要參考價值！
這張圖由設計師Abela對圖表的各種特徵進行了大致的概括總結。
㈨ 前端—表單表格
作用:將前台用戶數據通過get或post請求方式,提交給後台,並將新頁面標簽中接收與後台相應
請求方式:
1,get:將數據以url鏈接拼接方式提交給後台,速度快,但安全性低,且有數據大小的限制
2,post:將數據以數據包的方式提交給後台,速度較慢,但安全性高,且無數據大小限制
3,前後台交換數據的依據為:表單元素的name與value,name為key,value為value
action:提交的後台介面(請求的伺服器指定路徑)
特點:1,表頭垂直水平居中
2,單元格垂直居中
3,cellspacing控制單元格之間的間距
4,table的顯示特性:內容不超過規定的寬高則採用規定的寬高,當內容顯示區域的寬高超過規定的寬高,表格的寬高由內容顯示區域決定
5,rules:邊框規則,設置後會合並邊框(cellspacing失效):groups分組帶有邊框 all所有帶有邊框,rows行帶有邊框,cols列帶有邊框
6,cellpadding:內邊距(一般對內容進行格式化布局)
7,cell的width可以規定列寬佔比(以上的設置一般在table標簽中設置)
8,colspan合並列 rowspan合並行(在表格中直接操作),以上的賦值可以在引號裡面直接給值,不用加單位