⑴ 前端—表單表格
作用:將前台用戶數據通過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合並行(在表格中直接操作),以上的賦值可以在引號裡面直接給值,不用加單位
⑵ 前端入門之HTML的表格
表格：
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。border是邊框屬性。
row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2
運行結果：
image
表格標簽：
| 標簽 | 描述 |
|
| 定義表格 |
|
| 定義表格的行 |
|
| 定義表格列的組 |
|
| 定義用於表格列的屬性 |
|
| 定義表格的頁眉 |
|
| 定義表格的主體 |
|
| 定義表格的頁腳 |
表格形式：
1.無邊框表格
第一種：100200300400500600第二種：100200300400500600
2.表頭
水平標題：表頭一表頭二表頭三100200300垂直標題：表頭一100表頭二200表頭三300
運行結果：
3.標題
標題表頭一100表頭二200表頭三300
運行結果：
4.跨行跨列的表格單元格（
合並單元格：
單元格屬性：
colspan=2 水平合並 向右合並 值包含自己
rowspan=2 垂直合並 向下合並 值包含自己
合並單元格本質就是改變寬度 高度 佔位實現的
）
表頭一表頭二100200300表頭一100表頭二200300
運行結果：
5.表格內的標簽
這是一個段落
這是另一個段落
運行結果：
6.單元格邊距， cellpadding="0" 邊距（內容和單元格的距離）
運行結果：
7.單元格間距， cellspacing="0" 間距（單元格與單元格的距離
運行結果：
⑶ Web前端怎樣實現像excel那樣的按列拖選的表格
一般來說，樓主的要求，通常會通過模擬來實現
1、 捕獲滑鼠按鍵按下的事件，記錄按下的位置
2、 捕獲滑鼠移動事件，計算應該被選中的節點，改變其樣式，以實現反饋
3、 捕獲滑鼠按鍵彈起的事件，完成選中的操作
基本上沒難度，只是需要工作量而已。
⑷ 前端 豎向（縱向）表格如何處理
可以先按橫向表格的思路來做，再使用專門用於表格行列轉換的插件來處理。這類插件網路上很容易搜索到的。
⑸ 前端，哪位大神知道這種布局的表格代碼怎麼寫
好了，至於樣式您再調一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
ul li{list-style: none;}
div{width: 600px;float: left;border: 1px solid #000000;text-align: center;}
div ul li{border-bottom: 1px solid #000000;}
div ul li:last-child ul li:last-child{border-bottom: 0px;}
div ul li ul li{margin-bottom: 0px;width: 100%;float: left;}
div ul li ul li span{width: 33.3%;float: left;border-right: 1px solid #000000;box-sizing: border-box;}
div ul li ul li span:last-child{border-right: 0px;}
</style>
</head>
<body>
<div>
<ul>
<li>
<h1>大標題1</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
<li>
<h1>大標題2</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
<li>
<h1>大標題3</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
⑹ 網頁端表格設計指南
想像一下你為企業端產品設計了一個系統，或是設計了某個應用程序。在諸如此類的設計中都需要用到表格。這些表格設計不是那些設計網站中展示的非常精美的表格樣式，而是具有復雜交互和數百個單元格的表格。
在這種情況下，設計師會面臨許多挑戰。 例如：將設計與現有的前端框架進行匹配，或與破壞布局的「不舒服」數據進行斗爭。 我們將通過以下步驟來解決這些問題：系統化需求，原子化，定義交互。
所以，你已經采訪了目標受眾。現在是時候將他們的需求和需求拼湊在一起，並轉化為對設計有用的東西。例如，一位用戶說：「我需要看看我的數據如何影響應用程序的其他部分。」或者在看到另一個人使用軟體時，你注意到他只使用快捷方式而根本不摸滑鼠。這是什麼意思？第一個用戶的話是關於輸入驗證和提示。你需要考慮將警報或幫助信息附加到表中，或者開發一個有意義的顏色系統。這取決於領域和心理模型。觀察第二個用戶的工作可能是你需要設計鍵盤可設置快捷方式，可能需要考慮比「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設計趨勢
⑺ Web前端怎樣實現像excel那樣的按列拖選的表格
Web前端實現像excel那樣的按列拖選表格的方法：
1.通過flash，flex實現FLEX 功能強大的datagrid
2.通過jquery插件，js實現
JS實現可編輯的表格，雙擊可編輯，可以刪除行和列，增加行和列，重置，導出表格，也可以上下移動元素
Flexigrid – Web 2.0 Javscript Grid for jQuery - 可變列寬，自動適應表頭寬度，可通過 Ajax 連接 XML 數據源，類似 Ext Grid，但基於 jQuery 因此更輕量小巧。
⑻ 前端幾種常見的布局方式
1.靜態布局（固定寬高）
2.彈性布局（flex）————常用
3.聖杯布局
flex：flex-group、flex-shrink、flex-basis
flex：auto/none/負數/一個長度或百分比/兩個非負數/一個非負數和一個長度或百分比等
A，flex-group：當父元素有剩餘空間時，子元素占據剩餘空間的量
B，flex-shrink：當父元素的空間不足以展示所有的子元素，父元素沒設置flex-wrap，子元素需要進行收縮的量
C，flex-basis：表示該子元素的初始寬度
4.自適應布局（為不同的屏幕解析度定義的布局 @media媒體查詢技術）
5.流式布局：（寬高用百分比，按屏幕解析度調整，布局不發生變化）
6.響應式布局（使用meta標簽，寬高隨窗口調整自動適配，適應布局和流式布局的綜合方式）
7.柵格布局
1）.柵格(網格劃分)：在一個特定區域內劃分出有規律的格子，依靠這些格子進行有規律的版面布局。
使用柵格布局：bootstrap（12列），element（24欄），antDesign
2）.柵格布局
container：柵格系統容器；rows：行；cols：列；gutters：各列間的空隙
3）.柵格布局實現響應式布局
8.table布局（使用表格進行頁面排版和樣式設置）
1）.用法
display:table
display:table-cell，相當於td元素
display:table-row，相當於tr元素
table-layout:fixed | auto(默認)：table-layout 屬性用於顯示表格單元格、行、列；auto, 自動表格布局，列的寬度由單元格中最大內容的寬度決 定；fixed ,固定表格布局。