---
# System prepended metadata

title: 'HTML 6. 進階表格製作 - table 的屬性: colspan rowspan'
tags: [2022 網頁開發全攻略教程]

---

# 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 網頁開發全攻略教程`