HTML&CSS入門：為你的網頁換上精美的表格(Table)樣式

網頁上常看到Table的蹤跡，一張好看的表格會決定頁面的吸睛程度。

所以今天要重新認識一下表格設計，不依靠其他模板的力量，自己動手製作出幾個常見的 ... CyuBlogArticlesCategoryAndroid(🇹🇼)Flutter(🇯🇵)Flutter(🇹🇼)PHP(🇹🇼)Javascript(🇹🇼)Javascript(🇯🇵)Python(🇯🇵)Python(🇹🇼)Python(🇺🇸)Develop(🇺🇸)Develop(🇹🇼)Server(🇹🇼)CSS(🇹🇼)G検定(🇯🇵)ToolsAboutPrivacyPolicyContactarticlescss-zhhtml-table-cssHTML&CSS入門：為你的網頁換上精美的表格(Table)樣式Sunday,June28,2020| Sunday,June28,2020| CSSTableofContentsTableofContents [HideOpen] TableofContentsResults製作要點適用於產品方案的表格適用於資料介紹的表格無框線，圓角表格參考後感網頁上常看到Table的蹤跡，一張好看的表格會決定頁面的吸睛程度。

所以今天要重新認識一下表格設計，不依靠其他模板的力量，自己動手製作出幾個常見的表格。

以後在做調整時就能比較輕鬆設計出理想的樣貌。

雖然用複製貼上即可達到一樣的效果，但如果您想學習如何網站設計就要先具備基礎的html知識。

最近有一篇國外的html基礎知識教學的文章相當不錯，很適合初學者，在此推薦給大家。

BasicHTMLCodesforBeginners 我推薦的點有 從0開始淺顯易懂的說明。

實際的範例跟結果圖片。

TableofContents Results 製作要點 適用於產品方案的表格 適用於資料介紹的表格 無框線，圓角表格 參考 後感 Results 製作完成的幾個表格如下。

了解並掌握其中的技巧，稍作調整也能做出自己風格的表格。

適用於產品方案 適用於資料介紹，像是公司資訊等等 無框線，圓角表格 製作要點 Table中的主要構成有

，， 。

tr:表示表格的列。

td:表示表格的資料格。

th:表示表格的標題格。

另外也可以加入， ， 來方便分別設計表頭，表尾，跟中間內容。

所以針對這些要素做設計就可以達成上述實作完成的表格。

適用於產品方案的表格 SeethePenplan-table-cssbyscobin (@scobin-1472130965)onCodePen. Table中的border-collapse設為collapse是為了讓表格的整個外框跟各個格子的邊框統一起來。

想要各個標題格的背景色不同，因此分別給上class來做設計。

.basic{ background-color:#0ceffe; } .standard{ background-color:#039be5; border:1pxsolid#039be5; color:white; } .premium{ border:1pxsolid#2e3a4d; background-color:#2e3a4d; color:white; } 中間的方案是人氣方案，設計較為不同，因此要做一些特殊處理。

No.1 Standard .popular{ position:relative; } .no1{ position:absolute; top:-10px; background:#bdcc28; width:60px; font-size:10px; border-radius:15px; line-height:1; padding:5px; } 適用於資料介紹的表格 SeethePenintro-table-cssbyscobin (@scobin-1472130965)onCodePen. 因最左邊的格子為標題格，所以每一個中都含有一個。

Company	CSS-PlayInc.
Founded	1990/3/20
Numberofemployees	500
E-mail	[email protected]

為了製作出三角形箭頭的效果，特地加入以下css設計。

tableth{ position:relative; ... } tableth:after{ display:block; content:""; width:0px; height:0px; position:absolute; top:calc(50%-10px); right:-10px; border-left:10pxsolid#7d7d7d; border-top:10pxsolidtransparent; border-bottom:10pxsolidtransparent; } 無框線，圓角表格 SeethePentable-css-examplebyscobin (@scobin-1472130965)onCodePen. 這個例子使用了， 方便做區分。

標題列以外，奇數列跟偶數列的背景色有所區分。

所以用tr:nth-child(odd)設計奇數列，tr:nth-child(even)設計偶數列。

外框的圓角設計較為麻煩些，必須對四個角的要素做調整，指定各個角落的方式如下。

th:first-child:左上角 th:last-child:右上角 tr:last-childtd:first-child:左下角 tr:last-childtd:last-child:右下角 tabletheadth:first-child{ border-radius:5px000; border:1pxsolidblue; } tabletheadth:last-child{ border-radius:05px00; border-right:1pxsolidblue; } tabletbodytr:last-childtd:first-child{ border-radius:0005px; } tabletbodytr:last-childtd:last-child{ border-radius:005px0; } 參考 https://css-tricks.com/complete-guide-table-element/ 後感 border設計時，可以對table,td,th來做設定，，上設置border似乎沒有效果，在使用時要留心一下。

RelatedPost CSS入門：學習flex的使用方法 HTML&CSS入門：為你的網頁換上精美的表格(Table)樣式 HTML&CSS入門：為你的網頁換上精美的標題(Title)樣式 CSS入門：製作一個含有header,footer的簡易頁面