CSS表格(Table)

介紹 CSS對表格屬性設定 文字、字體、邊框、顏色及背景屬性與屬性值應用


CSS 表格(Table)屬性表

屬性 說明
border 屬性簡化寫法指定表格邊框線條、粗細、顏色
border-collapse 使線條中間沒有空隙
Width and Height 指定表格寬度 和 長度
Text Alignment 指定表格內的文字對齊位置
Padding 指定表格內側的留白空間大小
Color 指定表格顏色

尚未加CSS前的 表格(Table)

編號 水果名稱 重量 價錢 產地
1 西瓜 5斤 100元 嘉義
2 冬瓜 3斤 50元 屏東
3 南瓜 2斤 35元 台南
4 胡瓜 3斤 55元 雲林
5 木瓜 3斤 25元 高雄

範例::CSS 表格屬性的檢視

範例觀測重點 :

動手實驗一下 : 將 屬性值改變看看變化了什麼

你可以在上方編輯區之<style>區間內的大括弧{}內加入下列屬性:值做實驗觀測:

background-color:green; /* 設定背景顏色 */

border-collapse:collapse; /* 設定非雙線框線 */

border: 1px dotted blue; /* 設定框線厚度 點狀線 顏色 */

css與表格之奇數與偶數列:

橫向背景::奇數與偶數列不同背景範例

CSS 寫法:

tr:nth-child(even) {background: #CCC}

tr:nth-child(odd) {background: #FFF}

縱向背景::奇數與偶數垂直行不同背景範例

先在HTML 依欄位數量加上等量的<col>標籤寫法:

<table>
<col><col><col>...略
<tr><td>欄1</td></tr><tr><td>欄2</td></tr> <tr><td>欄3</td></tr>...略

CSS 寫法:

col:first-child {background: #FF0}

col:nth-child(2n+3) {background: #CCC}

結果:間格的背景顏色
X行1行2行3行4行5行6行7行8行9
列1112233445566778899
列2112233445566778899
列3112233445566778899
列4112233445566778899
列5112233445566778899
列6112233445566778899
列7112233445566778899
列8112233445566778899
列9112233445566778899

border屬性(邊框線條樣式)

元素{屬性: 值 }說明
p {border-style:solid; }

實線

p {border-style:dotted; }

點線

p {border-style:dashed; }

虛線

p {border-style:double; }

雙線

p {border-style:groove;}

凹線

p {border-style:ridge;}

凸線

p {{border-style:outset;}

浮出線

p {border-style:inset;}

嵌入線