web實戰：裝飾表格

newbeehh發表於2018-06-26
Web

table標籤在我們學習HTML的時候可能會經常用到，但開始做專案了後，原生table的使用反而減少了，因為大多UI框架都會對table進行包裝美化，方便了我們的使用，但也使我們逐漸忘記了如何進行原生的修飾，今天通過一個小demo回顧溫習下吧。

假設一個簡單的需求：建立一個展示庫存（inventory）的表格。那麼，首先就是用HTML寫好整個表格框架了。

<table class="inventory">
    <caption>
        Table: Current Inventory
    </caption>
    <colgroup>
        <col id="product">
        <col id="price">
        <col id="rating">
    </colgroup>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Rating</th>
    </tr>
    <tr>
        <td>Vitae Quam Lorem</td>
        <td>$19.95</td>
        <td>4.5</td>
    </tr>
</table>複製程式碼
body {
    width: 760px;
    margin: 0 auto;
    background-color: #FDFCD2;
}

.inventory{
    font-family: "Trebuchet MS",Arial Helvetica,sans-serif;
    width:100%;
    margin-top: 25px;
}複製程式碼

table的構建程式碼是不是很少，省略了一些程式碼，因為有些沒有太大的作用，比如thead之類的，好像只是是改變table的渲染順序而已。具體程式碼就不詳講了，個別的下面的修飾過程中會提及。

我們看看沒有任何修飾時的表單：

web實戰：裝飾表格

是不是無法直視。接下來我們一步一步來修該。

首先從標題開始，標題放中間不好看，把它移動到最右邊吧，然後和表格得有一定的間距，並且加粗加顏色讓別人知道這貨是個標題。

.inventory caption{
    color: #797865;
    text-align: right;
    font-size: 1.5em;
    margin-bottom: 10px;
}複製程式碼

這裡使用了em做單位，與基本字型大小成倍數關係，方便設定。

web實戰：裝飾表格

嗯，還是很醜，繼續。

為了方便資料的查閱，我們為單元格新增邊框，從視覺上把資料隔開。

.inventory td,.inventory th{
    font-size: 1.1em;
    border: 1px solid #DDB575;
}複製程式碼

web實戰：裝飾表格

單元格間出現間隙，邊框也重複了，我們要把間距去掉並把邊框合併成一條，如果要在th，td上修改，那就比較麻煩，作用在table標籤上的border-collapse樣式屬性就是專門解決這個問題的。單元格的資料有點擁擠，得新增一些內邊距，並設定對齊方式如：

.inventory{
    /*坍塌邊框，去掉單元格空隙*/
    border-collapse: collapse;
}複製程式碼
.inventory td, .inventory th{
    padding: 3px 7px;
    cursor: pointer;
    /*text-align可以繼承*/
    text-align: left;
    /*vertical-align不能繼承，所有要應用在td，th中*/
    vertical-align: middle;
}複製程式碼

web實戰：裝飾表格

是不是好多了，但表頭資訊和表格資料沒有明顯區分，容易混淆，而且一旦單元行數過多，使用者很難區分資料屬於哪一行，或者是自己讀到哪一行了。因此，好的視覺指引極其重要。所以我們要突出表頭，並且隔行設定不同的顏色，如奇偶數行，並在使用者使用滑鼠選中資料檢視時，要高亮該行顏色進行指引。

/*突出表頭*/
.inventory th{
    text-transform:uppercase;
    padding-top: 5px;
    padding-bottom: 5px;
    /*相容舊的瀏覽器，比如IE9之前*/
    background: rgb(229,76,16);
    background: linear-gradient(to bottom, rgb(229,76,16),rgb(173,54,8));
    color:white;
}

/*突出關鍵列的資料*/
.inventory tr td:last-of-type{
    color: rgb(229,76,16);
}複製程式碼
/*增加奇偶數行的顏色，方便使用者對每行資料的識別*/
.inventory tr:nth-of-type(odd){
    /*選擇透明色，防止覆蓋資料*/
    background-color: rgba(229,76,16,.1);
}
.inventory tr:nth-of-type(even){
    background-color: rgba(225,255,255,.1);
}
/*標識選中的資料*/
.inventory tr:hover{
    background: rgba(238, 79, 17, 0.4);
}複製程式碼

最後做個小修該，就是縮小後兩列的列寬，讓表格展示更加合理美觀。

/*用列組的方式設定列寬，但只能使用兩組屬性width和背景屬性（background-）*/
#price,#rating{
    width: 15%;
}複製程式碼

完成全部修改後：

web實戰：裝飾表格

本來我想比較少見的程式碼都提下，但好像能說的只是功能而已，搜尋下就知道了，沒有難度。需要注意的是vertical-align屬性，它是比較常見的一個css屬性，但也是很難的一個，一般作用於內聯格式上下文（IFC）如inline或inline-block等屬性的元素中，還有就是作用於table-cell屬性的元素，如td，在td中，vertical-align：middle是垂直居中作用，但在inline-block中就不一定了，具體的推薦去看這篇文章：深入理解 CSS：字型度量、line-height 和 vertical-align，但這篇文章篇幅較長而且難點多，建議有充足的時間再去閱讀。

最後，原始碼祭上：web實戰：裝飾表格。

參考：CSS實戰手冊（書籍，demo中的素材是從裡面提取的，如顏色，名稱等）


相關文章