# HTML 6. 進階表格製作 - table 的屬性: colspan rowspan - 承 5. 基本的表格製作，雛形有點醜對吧？ 我們現在則要學習，如何替它上匡線: 1. 於 `<head>` 加入: `<style>` 標籤: ``` <head> <style> // 加入外框線，1px 實線： border: 1px solid black; <style/> </head> ``` - 原本完成的表格就會變成這樣，在所有的標籤上外圍都新增了框線: ![](https://i.imgur.com/6vqGCFE.png) - 但我們要的不是這種單一元素填滿四個外框的線，而是單純的一個外框線：這時候就需要加入： ``` border-collapse: collapse; ``` ![](https://i.imgur.com/0kogr3D.png) --- ## 假設我們現在要加入一個標題： - 長成這樣的: ![](https://i.imgur.com/cxqCySM.png) - 這邊我們肯定是需要再加一 `tr` > `th` 對吧? 來看看究竟會變成什麼 ``` <table> <tr> <th>國家熊貓表格</th> </tr> <tr> <th>國家</th> <th>年份</th> <th>熊貓</th> </tr> <tr> <td>墨西哥</td> <td>1975</td> <td>迎迎、貝貝</td> </tr> <tr> <td>台灣</td> <td>2008</td> <td>團團、圓圓</td> </tr> <tr> <td>日本</td> <td>2011</td> <td>比力、仙女</td> </tr> </table> ``` ![](https://i.imgur.com/fgBGQ9w.png) - 會是以 row 的方式，佔據1格萊顯示: 這時候則需要 table 裡面的一個屬性來解決: `colspan` ### 什麼是 colspan ? - 在 table 的走向有縱向與橫向，像今天標題的問題 我們要針對縱向的擴張來解決，這邊則是需要用到 colspan:3 開發者也可以嘗試使用: 2 來看看會發生什麼事 ``` <th colspan="3">國家熊貓表格</th> ``` ![](https://i.imgur.com/84pAv5i.png) ### 重新複習: column & row ![](https://i.imgur.com/k6ZrTvu.png) ###### tags: `2022 網頁開發全攻略教程`