網頁前端工程入門：CSS 表格樣式 - 詳細使用介紹 By 彭彭

喜歡彭彭的教學影片嗎？點擊「加入」按紐取得更多會員服務哦。
加入會員： / @cwpeng-course
詳細的表格樣式美化教學：(CSS Styling Tables)
表格寬度、標頭設定、條紋樣式 (Striped Table)、水平分隔線 (Horizontal Dividers)、邊線崩塌 (Collapse Borders) 等等超有用的表格 CSS 設定。
更多教學內容請參考：training.pada-...

[@helloha4552]

謝謝老師，找了那麼多資料 只有看得懂你的

[@cwpeng-course]

不客氣，很高興對你有幫助哦 :)

[@yun-ruzeng5026]

繼續學習中，老師講的超棒，謝謝老師

[@cwpeng-course]

:)

[@wty5188]

老师讲解的太好了，非常感谢教解。

[@cwpeng-course]

不会呦，谢谢回馈~~~~

[@ednaho5536]

謝謝彭彭老師!

[@lorenalu4129]

感谢彭彭老师！

[@cwpeng-course]

:)

[@phonedr.1013]

超棒

[@cwpeng-course]

謝謝 :)

[@Ts2pc]

請問可以用th做為表頭的標籤選擇器, 代替tr:nth-child(1)?

[@cwpeng-course]

可以哦，不過這樣 HTML 裡面就要使用 th 而不是用 tr

[@康煒棋]

範例您是用 row 這樣堆疊過去，如果要用 column 排下來，也是這樣嗎?

[@cwpeng-course]

不太確定您的使用 column 排下來的意思，但我估計不會完全一樣。

[@aphroditefirst2209]

Thanks a lot

[@cwpeng-course]

:)

[@ziyuyang9508]

老師想請問一下，在第一部影片中在table的標籤內塞入屬性就可以得到完整的表格 那為什麼在這裡使用標籤選擇器加入屬性後td 需要另外再輸入屬性呢 感謝您

[@cwpeng-course]

第一部影片是最早期的作法，能控制的樣式比較少。這部影片是用 CSS 去控制，可以處理得更細節，分開來看就行了。

[@姚字丞]

[@cwpeng-course]

:)

[@踢球]

老師 想請教下有辦法讓整個表格置中嗎 我試著在表格外面包一層

[@asiaboy3289]

1. class='wrap' 兩邊的引號要相等 可以都為雙引或都為單引 但要一樣 2. {margin} 少了一個r

[@cwpeng-course]

感謝 @Asia Boy 的協助，很清楚 :)

[@Leo-qo3jz]

我發現老師都凌晨才在錄...都不睡覺嗎 XD

[@cwpeng-course]

一種不太良好的生活習慣 XDDDD

[@oakform5857]

老師，照你的程式碼打，第二列的底線會變粗，有什麼方法可以把顏色條成跟三、四列底線一樣的顏色，謝謝

[@cwpeng-course]

可能性很多，要看你的專案結構，執行程式的方式還有完整的程式，比較有機會找到問題點嘍 ~

[@charlielee902]

想請問老師，為什麼table的部分順利執行，出現了邊界框框。但是 td 和 tr:nth-child的部分卻沒有出現呢。 謝謝! table{ 　　　　width:400px ; border:1px solid #888888 ; } td{ 　　border:1px solid #888888;padding:10px } /*表格當中的第一對*/ tr:nth-child(1){ 　　background-color:green; } 　　 　　 　　 　　數學 　　英文 　　 化學 　　 　　 　　 98 　　 98 　　　　　　95 　　 　　 　　 99 　　96 　　88 　　 　　 　　72 　　85 　　98 　　 　　 　　

[@cwpeng-course]

background-color:green; 這段字前面的空白可能不小心打入預期外的字元，建議這行字全部刪掉重新打過。

[@charlielee902]

@@cwpeng-course 太感謝了!

[@黃鉦勝]

請問彭老師，在Notepad++ 編輯時候，怎麼讓空格不要刪除所寫的文字 或者說有其他好用的設定可以請老師說明一下

[@cwpeng-course]

一般都不會刪除所寫的文字嘍，可能是你按到了鍵盤上的 insert 鍵，再按一次試試看 ~

[@Ray-cn7ks]

發現老師在寫顏色的時候會去用編碼 , 會推薦學生在寫顏色的時候用編碼嗎?因為我比較習慣英文

[@cwpeng-course]

英文能表達的顏色種類很少，最終還是需要色碼才能表達各式各樣的顏色。可以直接查詢色碼產生器，或者蠻多工具都能協助我們產生想要的色碼。

[@Ray-cn7ks]

了解了謝謝老師

[@raychen4458]

請問老師，table, td, tr 該怎麼分辨呢

[@cwpeng-course]

table 代表整個表格，tr 代表一個橫向的列 (row)，td 代表一個欄位 (column)

[@allisonhuang3450]

請問老師 我將第一列國家 勝敗的底色調整了，但是我想要把基數列設定顏色就把even改成odd...然後第一列的表頭就跟著改了，請問是為什麼這個設定被取代了呢?應該怎麼修正呢?這樣代表tr的設定比較優先嗎?謝謝老師

[@cwpeng-course]

你可以把 CSS 設定的順序調換一下試試看 ~~~

[@allisonhuang3450]

@@cwpeng-course 謝謝老師，可以了

[@mingshiguo2758]

google網頁無法存取電腦照片 請老師能夠說明 謝謝

[@cwpeng-course]

沒有很理解你的問題哦 ~

[@jihshenglin9144]

老師，請問border後面加的solid #888888代表甚麼意思?

[@cwpeng-course]

solid 代表樣式，單實線。 #888888 代表顏色，那個是灰色的色碼。

[@GNSSA6213]

老師，如何改字的顏色呢？

[@cwpeng-course]

用 CSS 的 color 設定就可以了

[@Cindy-ib9ml]

老師想請問為什麼我執行出來的的第二列底線會加粗呢? table{ width:400px; border-collapse:collapse; /*表格從兩條線變一條線*/ } td{ border-bottom:1px solid #888888;padding:10px; } /* 虛擬選擇器:表格中的第一對tr */ tr:nth-child(1){ background-color:#7788aa; color:#ffffff; } /* 表格中的偶數對tr */ tr:nth-child(even){ background-color:#e8e8e8; }

[@cwpeng-course]

光看你貼的程式，不太能理解你的問題點，有時候只是顏色造成的錯覺也不一定 ~

[@stevenlai4772]

我也是欸

[@4teren142]

老師 請問為審麼我 nth-child那行htm顯示不出來 這行css樣式沒辦法秀出來 我要設定審麼麻 tr:nth-child(even){ background-color:#e8e8e8; }

[@cwpeng-course]

只看你貼的這段程式是沒問題的哦，可能要看看其他部份 ~~~~

[@毛驢-f9j]

請問之前表格顯示出線條是用，請問為什麼可以直接涵蓋到td的線?

[@毛驢-f9j]

如果我把設table{ border="1" width="300" cellpadding="5" } ，會顯示不出線條

[@cwpeng-course]

表格的 html 屬性 border，也就是你上面寫的那個，會直接涵蓋 td 的線條沒錯，某方面來說比較方便，但能做的事情也比較少。 使用 css 是另外一個狀況，只設定 table 的 border，就只有最外框而已。所以得像我們影片中一樣，同時去設定 td 的 border。

[@renhao8230]

有辦法選擇直的(行)嗎?

[@cwpeng-course]

類似像這樣的選擇器可以選到第二行： table td:nth-child(2){}

[@asiaboy3289]

@@cwpeng-course 不好意思 是否為 tr td:nth-child(2){}呢? 因為 3個tr在table裡 代表table有9個td 如果是tr td:nth-child(2){}是否理解為 各個row的 第二個data cell 就是直的行?

[@lhc7603]

如果我連最下面那一條橫線都不要，要怎麼做呢？

[@cwpeng-course]

可能要特別針對最下面的列 (row) 去設定下邊線 (border-bottom) 哦 ~

[@毛驢-f9j]

請問如果有兩個表格，只想讓其中一個的偶數列呈現灰色，該如何做呢? 我用階層式選擇器的方法會顯示不出來。

[@cwpeng-course]

你可以給不同的表格，不同的 class，例如其中之一是 。 然後再利用這個 class 去區分設定，例如： table.table-1{} table.table-1 td{}

[@毛驢-f9j]

如果用tr:nth-child(even){}，是一定會改到全部的表格嗎?(不能包在table的class裡?) 因為我用table.even_gray{ tr-nth-child(even){background-color:#e8e8e8;} } 會沒反應

[@cwpeng-course]

純 css 不能這樣包，你那個是 scss 的語法，這是不同的。 純用 css 要表達階層結構，要寫成： table.even_gray tr:nth-child(even){ } 這部份就與表格無關了，你可以去找找 css 選擇器的文件說明： www.w3schools.com/cssref/css_selectors.asp

[@毛驢-f9j]

謝謝彭彭老師!

[@TpcTpc-jb5jz]

彭彭老师,你好。你有私下授课吗?

[@cwpeng-course]

比较少哦 ~

[@張育嘉-q1k7t]

你是把顏色的tag都背下來了嗎？！

[@cwpeng-course]

因為寫網頁快二十年了，有些常用的顏色我會記得 ~

[@rsmn1709]

那奇數對呢

[@cwpeng-course]

nth-child(odd)