技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

3款淺灰色大氣通用Table表格CSS【實(shí)例演示/源碼下載】

作者:admin    時(shí)間:2022-4-13 16:8:46    瀏覽:

今天因需要做個(gè)Table表格，要求大氣通用的那種樣式，淺灰色比較合適。找了一下，最后結(jié)合自己的修改，現(xiàn)在做了幾個(gè)樣式不錯(cuò)的Table表格，給大家分享一下。

我做了3款大氣通用的表格樣式。

普通樣式大氣通用表格

 灰色大氣通用Table表格CSS

demodownload

這個(gè)樣式，灰、白背景相間，最普遍通用，一般教程站都用它。淺灰色，大氣，看著舒服，眼睛看久了也不覺得累。

完整代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <style type="text/css">
  table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }
  
  table thead th {
    background-color: #CCE8EB;
    width: 100px;
  }
  
  table tr:nth-child(odd) {
    background: #fff;
  }
  
  table tr:nth-child(even) {
    background: #F5FAFA;
  }
  </style>
</head>

<body>
  <table>
    <caption>
      <h2>班級(jí)學(xué)生成績(jī)表</h2> </caption>
    <thead>
      <tr>
        <th> 姓名 </th>
        <th> 性別 </th>
        <th> 年齡 </th>
        <th> 成績(jī) </th>
      </tr>
    </thead>
    <tr>
      <td> 張麗麗 </td>
      <td> 女 </td>
      <td> 15 </td>
      <td> 85 </td>
    </tr>
    <tr>
      <td> 李小剛 </td>
      <td> 男 </td>
      <td> 14 </td>
      <td> 78 </td>
    </tr>
    <tr>
      <td> 張曉明 </td>
      <td> 男 </td>
      <td> 16 </td>
      <td> 85 </td>
    </tr>
    <tr>
      <td> 馬小東 </td>
      <td> 男 </td>
      <td> 15 </td>
      <td> 82 </td>
    </tr>
    <tr>
      <td> 陳小梅 </td>
      <td> 女 </td>
      <td> 15 </td>
      <td> 74 </td>
    </tr>
    <tr>
      <td> 劉小光 </td>
      <td> 男 </td>
      <td> 14 </td>
      <td> 86 </td>
    </tr>
  </table>
</body>

</html>

陰影樣式大氣通用表格

為表格加上陰影，其實(shí)很簡(jiǎn)單，只需在CSS加多一句。

table {
    box-shadow:0px 3px 5px 0px #999; //陰影
}

所以是上面普通樣式的CSS代碼就變成了這樣。

<style type="text/css">
  table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }
  
  table thead th {
    background-color: #CCE8EB;
    width: 100px;
  }
  
  table tr:nth-child(odd) {
    background: #fff;
  }
  
  table tr:nth-child(even) {
    background: #F5FAFA;
  }
  table {
    box-shadow:0px 3px 5px 0px #999; //陰影
  }
</style>

你可以設(shè)置陰影box-shadow的參數(shù)，4個(gè)參數(shù)分別是：水平陰影、垂直陰影、陰影偏離、陰影擴(kuò)散。

表格顯示效果這樣。

 灰色大氣通用Table表格CSS

demodownload

圓角樣式大氣通用表格

為表格加上圓角，看起來(lái)更圓滑了，很多人都喜歡圓角表格，這也是現(xiàn)在UI設(shè)計(jì)的多數(shù)選擇。

所以，我又做了一款圓角樣式大氣通用的表格。

不過，圓角樣式不能再在上面的普通樣式里修改了，這是另一個(gè)完全不同的樣式設(shè)計(jì)思路。

 淺灰色大氣通用Table表格CSS

demodownload

同樣是背景顏色灰、白相間，表頭背景顏色較深。

實(shí)例完整HTML代碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    table {
        margin: 50px auto;
        border-spacing: 0;
    }
    
    table th {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #c1c1c1;
        color: white;
    }
    
    table td {
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #cad9ea;
        /* 給table設(shè)置左邊框 */
        border-right: 1px solid #cad9ea;
    }
    
    table tr th:last-child,
    table tr td:last-child {
        border-left: 1px solid #cad9ea;
        border-right: 1px solid #cad9ea;
        /* 給table設(shè)置右邊框 */
    }
    
    table tr td:first-child,
    table tr td:nth-child(2),
    table tr td:nth-child(3) {
        border-bottom: 1px solid #cad9ea;
        /* 給tbody各列設(shè)置下邊框 */
    }
    
    table tr:first-child th:first-child {
        border-top-left-radius: 6px;
        /* 設(shè)置table左上圓角 */
    }
    
    table tr:first-child th:last-child {
        border-top-right-radius: 6px;
        /* 設(shè)置table右上圓角 */
    }
    
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
        /* 設(shè)置table左下圓角 */
    }
    
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
        /* 設(shè)置table右下圓角 */
    }
    
    table tr:nth-child(odd) {
        background: #fff;
    }
    
    table tr:nth-child(even) {
        background: #F5FAFA;
    }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th id="score">年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張麗麗</td>
                <td>女</td>
                <td>16</td>
            </tr>
            <tr>
                <td>陳明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>歐陽(yáng)珊珊</td>
                <td>女</td>
                <td>15</td>
            </tr>
            <tr>
                <td>李小剛</td>
                <td>男</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

這個(gè)CSS設(shè)計(jì)看起比較復(fù)雜了一點(diǎn)，它要具體到單獨(dú)為th、td設(shè)計(jì)border屬性，不過都很好理解，沒有什么特別的東西。

總結(jié)

本文介紹了3款淺灰色大氣通用Table表格CSS，都是平時(shí)常常要用到的，所以我都收藏起來(lái)備用。

您可能對(duì)以下文章也感興趣

標(biāo)簽: table  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */