表格標題位置-CSS入門基礎（020）
阿新 • • 發佈：2020-12-31
今天我們接著分享表格樣式的內容。
預設情況下，表格標題位置是在表格的上方，但是如果我們想要把表格標題放在表格下方呢？
在css中，我們可以使用caption-side屬性來定義表格標題的位置。
語法：
caption-side:屬性值；| caption-side屬性取值 | |
| 屬性值 | 說明 |
| top | 預設值，標題在頂部 |
| bottom | 標題在底部 |
示例程式碼：
<html><head><title>表格標題</title><styletype="text/css">table,td{border:1pxsolidblack;}caption{caption-side:bottom;}</style></head><body><table><caption>表格標題</caption><tr><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td></tr></table></body></html>
這個大家瞭解一下就好了，因為我們中國人制作表格，基本標題都會在上方使用，在下面的很少見。
本章總結：
邊框合併border-collapse：
語法：
border-collapse：屬性值；它是表格獨有的屬性，其他元素沒有這個屬性。
屬性取值有，
separate，邊框分開不合並，
collapse，邊框合併，相鄰共用。
邊框邊距border-spacing:
語法：
border-spacing:畫素值；該屬性指定單元格邊界之間的距離。指定一個畫素值時，作用於橫向和縱向上的間距；指定兩個畫素值時，第一個作用於橫向間距，第二個作用於縱向間距。
標題位置caption-side：
語法：
caption-side：屬性值；屬性取值，
top，上方
bottom，下方
表格在網頁設計中，使用的還是比較多的，大家如果需要掌握表格的應用，就需要多加練習，下面給一段示例程式碼，寫一個我們經常見到的場景。
<html><head><title>表格示例</title><style type="text/css">table,th,td{border:1pxsolidblack;}th{height:30px;}td { height:24px;}table{border-collapse:collapse;text-align:center;width:60%;margin:0auto;}caption{caption-side:top;font-size:20px;margin-bottom:20px;font-family:"黑體"，"宋體";font-weight:bold;}thead{background-color:#666666;font-size:18px;font-family:"楷體","宋體";}tbody{background-color:#dddddd;font-size:15px;font-family:"Arial","新宋體";}tfoot{background-color:yellow;font-size:18px;}</style></head><body><table><caption>賣場貨品統計表</caption><thead><tr><th>序號</th><th>品名</th><th>數量</th><th>單價（元）</th><th>金額(元)</th></tr></head><tbody><tr><td>1</td><td>牛奶</td><td>20箱</td><td>30.00</td><td>600.00</td></tr><tr><td>2</td><td>蘋果</td><td>70斤</td><td>10.00</td><td>700.00</td></tr><tr><td>3</td><td>青島啤酒</td><td>100桶</td><td>5.00</td><td>500.00</td></tr></tbody><tfoot><tr><tdcolspan="4">合計金額</td><td>1800.00</td></tr></tfoot><table></body></html>
之前給大家分享時，這些程式碼都是我手動敲上去的，也希望大家多加練習，也是手動敲上去，但是隨著屬性學習多了後，手動容易出錯，難以除錯，在這裡建議大家去下載一些可以IDE工具，比如webstrom，phpstorm等等，有了工具的幫助後，學習程式碼會輕鬆些。
