簡單CSS語法美化Table表格底色奇數偶數相間-2022年最推薦 ...

我們常常在網頁設計的時候，會需要使用到Table表格來排版，有時候多少需要加一點顏色來美化。

今天要教大家的是僅透過簡單的CSS語法，來讓Table表格 ... 網頁新知 首頁 網頁設計新知 網頁設計教學 21 2014.09 【CSS教學】-簡單CSS語法美化Table表格底色奇數偶數相間 文章日期：2014-09-21 文章分享：admin 瀏覽人數：19,422 字體大小： 大 中 小 我們常常在網頁設計的時候，會需要使用到Table表格來排版，有時候多少需要加一點顏色來美化 今天要教大家的是僅透過簡單的CSS語法，來讓Table表格達到奇偶底色相間，整個語法不需要用到任何javascript，但是，僅限使用在IE7版本以上，若IE7以下恐怕還是不支援（不過這年頭IE7以下直接可以捨棄掉了），但即使是如此，還是不影響整個程式上的運作，頂多也只是美觀上的問題而已。

首先，很簡單，僅需要加上以下兩行CSS語法，就可以達到Table的奇偶底色相間： tr:nth-child(even){ background:#CCC } tr:nth-child(odd){ background-color:#FAFAFA; } 接下來，我再加上表格的border語法，讓他有邊框： table{ border:1pxsolid#666; border-collapse:collapse; } 但這樣只有表格的邊邊有線框，所以我們再加上儲存格的邊框語法，這樣就更好看了一些： tr,td{ border:1pxsolid#666; } 最後，我們還可以加上滑鼠移過後，會有不一樣的底色，整個Table的美化就大功告成了： td:hover{ background-color:#E6FBFF; } 你看，是不是很簡單呢？ 上一篇 下一篇 文章分享 文章標籤 CSS3網頁設計HTML教學台北網頁設計台北網站設計 文章分類 最新文章 5 網頁設計教學 21 網頁資訊與新知 54 網頁實用工具 31 網頁趨勢與資訊 35 網路行銷 2 網路產業相關 19 RWD網站成功案例 3 熱門關鍵字 RWD響應式網站RWD網站RWD台北網頁設計台北網站設計網頁設計網站架設購物商城購物車網站購物車網頁設計CSS3HTML5PHP7jQuery手機版網頁設計商業攝影網路行銷HTML手機版網站HTML教學網路開店網路商城網頁市場趨勢數位時代網路安全互聯網網頁設計教學RWD響應式網頁WordPressGooglechrome電子商務FlashSSLAdobeYoutubeFacebookSEO網路購物SSL憑證資訊安全DDoSSSL數位憑證行動支付 文章年份 2022 2 2021 6 2020 7 2019 5 2018 16 2017 20 2016 33 2015 32 2014 44 文章分類及檢索 相關熱門文章 【網頁設計教學】X-UA-Compatible設置IE兼容模式 IE瀏覽器多種版本，對於設計師而言，有時候會產生相容性的問題；今天在這裡教大家X-UA-Compatible設置IE兼容模式，設計師只需要在head之間加入以下meta語法，即可相容.... 瀏覽人數:4,617 如何製作RWD(ResponsiveWebDesign)自適應網站? 一個RWD響應式網站的製作並不困難，在國外這項技術已經發展的相當普及；要製作RWD響應式網站，設計師須要俱備以下技能：HTML5及CSS3的語法，以及Grid格線的概念，以下就讓我們來簡單介紹一下該如何製作.... 瀏覽人數:66,037 CSS3的Calc運算 有沒有人跟小編我一樣只要碰到數學算式就一個頭兩個大的呢，使用CSS來設計版型，雖然版面修改上相對靈活，但每當版面有多個區塊組合時，就得分別計算出每個區塊的大小及間距... 瀏覽人數:3,422 【網路教學】相對路徑與絕對路徑 當需要從A網頁連結到B網頁，從A連到B的中間就會有所謂的「路徑」，也就是用來描述A與B兩個網頁的關連性的東西。

瀏覽人數:24,776 關閉