相信小伙伴每天都會上網沖浪，每天會瀏覽很多網頁來尋找我們想要的知識，小伙伴有沒有想過這些網頁是怎么設計的呢？相信肯定想過，下面我們就說說怎么設計網頁電話表格。

Web頁面中的表格設計，遠沒那么簡單

　　作為頁面布局的重要組成部分，表格的身影隨處可見。了解與熟知To B業務平臺軟件設計的工作人員都應該知道，表格在平臺應用中的重要性。表格出現的概率不是一般的多，內容信息的排列布局、大量數據的展示、眾多功能操作的按鈕擺放，一般都會用到相應的表格，而且表格的樣式類別也是多種多樣。表格的設計也遠遠沒你想象中的那沒簡單，可以說要想設計出滿足業務需求、符合用戶心智模型的表格不是那么的輕而易舉。

　　列表，英文釋義為List。百度釋義為：以表格為容器，裝載著文字或圖表的一種形式，叫列表。如，班主任點名的花名冊，就是一個列表;QQ軟件的好友列表等等。

　　表格，英文釋義為Table，又稱為表，即是一種可視化交流模式，又是一種組織整理數據的手段，主要承載數據的歸納、展示與對比的功能，是列表的一種。

　　表單，英文釋義為Form。表單在網頁中主要負責數據采集功能。如當我們注冊某個網站的賬號時，填寫個人信息的頁面，就是一個表單。表格經常和其他界面元素一起協同使用，用于展示和操作結構化數據，并經常用于詳情信息的入口。通常表格的組成元素以及相關元素會有多個部分，筆者根據自己設計表格的工作經驗將表格概括為篩選區、表頭、正文以及底欄等四個部分。

（圖片來自網絡）

　　網頁設計自適應的表格怎么做

　　1， 自適應寬度：

　　td {

　　width: 1px;

　　white-space: nowrap; /* 自適應寬度*/

　　word-break: keep-all; /* 避免長單詞截斷，保持全部 */

　　}

　　2，自適應高度

　　table {

　　table-layout: fixed;

　　width: 100%;

　　}

　　將所有列設置為固定寬度，顯然是不能滿足此類要求的，但是若把全部的列都設置為百分比，恐怕在某些尺寸，或分辨率下，會變得很難看。在Bigtree看來，比較習慣于用如下的方式來處理——在表格列數不是很多的前提下——將大部分列寬用固定值設置死，留下一列不設置寬度，將table的寬度設置為屏幕的百分比(譬如95%、98%等)。

（圖片來自網絡）

　　電話表格頁面怎么設計

　　表格的類型

　　表格是一種對數據進行組織整理的手段。大體上可分為四類，入口型表格、設置型表格、純記錄型表格以及被動生成型表格。這四類表格對應提供的功能以及用戶行為是有所區分的。在我所負責的簽到和工作匯報的管理后臺頁面中只包含兩類表格：設置型表格與純記錄型表格。

　　設置型表格

　　用戶使用設置型表格主要進行的操作是快速掃視，搜索到需要進行增、刪、改、查的內容。簽到后臺中用到的設置型表格有(管理員對簽到規則以及人員規則進行查看和編輯)、簽到管理員設置(管理員對簽到管理員及其權限進行設置)。

　　純記錄型表格

　　純記錄型表格在大多數情況下只是作為一個數據的存放地而存在的。簽到后臺中用到的純記錄表格有簽到記錄表(員工及負責人查看或導出自己的簽到記錄)、各類明細報表(管理員及負責人查看或導出員工的簽到明細)。

（圖片來自網絡）

電話表格在設計時應該注意什么

　　根據不同角色用戶對表格的使用行為中可以看出，在這兩類表格設計上最重要的就是易讀性和效率。即要在保證閱讀舒適性的同時突出重要信息以便于查找。

　　1. 用戶的目標是什么，而不是業務邏輯是什么

　　企業后臺頁面經常會出現的一個問題就是數據展示的邏輯是按照業務邏輯來展示，而非用戶的角度來展示的。當你質疑這一點時，產品經理還會言之鑿鑿地說“業務邏輯就是這樣的”，讓人啼笑皆非。

　　例如簽到記錄表，對用戶來說最重要的是「簽到狀態」這個信息，但是業務上的邏輯是先展示你的各種簽到明細，最后才展示簽到狀態。因此按照業務邏輯來設計的話就會將無用信息固定在了左側，用戶最關心的信息反而排列在最后一列，大大降低了使用效率。

　　2. 告訴用戶「你從哪里來」「你要到哪里去」

　　用戶在使用設置型表格和純記錄型表格時的主要目的都是檢視頁面、找到自己要操作的項。因此在頁面設計時要清晰地告訴用戶你現在在看什么，以及你關心的數據在哪里。

　　例如簽到記錄表，由于表格自身屬性原因，數據量大是無法避免的，用戶在查看表格時比較吃力，容易不知道自己現在看的是哪里，因此給這一行提供一個懸浮的狀態顯示。對于用戶關心的異常信息，可以通過標紅等方式去展示，讓用戶在掃視過程中就能快速找到目標。

　　怎么設計網頁電話表格?讀完上面相信小伙伴肯定知道了怎么設計網頁電話表格了，是不是對于不懂編程的你有點困難呢，其實是很簡單的，小伙伴可以請教一下身邊的大神哦，相信很快就能學會。