技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

漂亮CSS表格(Table),最后一行是匯總行【實例】

作者:admin    時間:2020-2-24 16:42:44    瀏覽:

本文給大家介紹一個漂亮的CSS價格表格,它與其他表格的不同在于,它最后一行是匯總行,在背景顏色和文字大小上要有所突出。

CSS價格表格

CSS價格表格

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
<title>Table V01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    
<style type="text/css">

* {
margin: 0px; 
padding: 0px; 
box-sizing: border-box;
}

body, html {
height: 100%;
font-family: sans-serif;
}

table {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin:0 auto;
  margin-top:30px;
}

caption {
  text-align: left;
  color: silver;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px;
}

thead {
  background: SteelBlue;
  color: white;
}

th,
td {
  padding: 5px 10px;
}

tbody tr:nth-child(even) {
  background: WhiteSmoke;
}

tbody tr td:nth-child(2) {
  text-align:center;
}

tbody tr td:nth-child(3),
tbody tr td:nth-child(4) {
  text-align: right;
  font-family: monospace;
}

tfoot {
  background: SeaGreen;
  color: white;
  text-align: right;
}

tfoot tr th:last-child {
  font-family: monospace;
}

</style>
</head>
<body>

<table>
  <caption>露營開支</caption>
  <thead>
    <tr>
      <th>項目</th>
      <th>數量</th>
      <th>價格</th>
      <th>總價</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>帳篷</td>
      <td>1</td>
      <td>$279.00</td>
      <td>$279.00</td>
    </tr>
    <tr>
      <td>睡袋</td>
      <td>2</td>
      <td>$159.95</td>
      <td>$319.90</td>
    </tr>
    <tr>
      <td>露營椅</td>
      <td>2</td>
      <td>$39.50</td>
      <td>$79.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">總計</th>
      <th>$667.90</th>
    </tr>
  </tfoot>
</table>


</body>
</html>

execcodegetcode

代碼分析

下面CSS代碼是定義表格頭部的背景和文字顏色。

thead {
  background: SteelBlue; /* 背景顏色 */
  color: white; /* 文字顏色 */
}

下面CSS代碼是定義表格最后一行的背景和文字顏色。

tfoot {
  background: SeaGreen; /* 背景顏色 */
  color: white; /* 文字顏色 */
  text-align: right; /* 文字靠右對齊 */
}

相關文章

標簽: table  css  css3  
  • IT熱文
  • 站長推薦
陕西11选5中奖助手 福彩江苏快三怎么玩 产业基金配资比例 湖南快乐十分动物开奖结果 亿融配资 山西快乐十分口诀 江苏11选5玩法规则 黑龙江彩票11选五开奖查询 云南十一选五开奖号码结果 天津快乐十分开奖走势 福利彩票排列7开奖