---
# System prepended metadata

title: HTML 表格
tags: [HTML]

---

# HTML 表格

###### tags: `HTML`

* 表格結構
![](https://i.imgur.com/R4gYDJn.png)
:::info 
table屬性不會自動補滿表格空白，要用合併表格的語法
:::

![](https://i.imgur.com/NOZxBrC.png)

---


==練習:打出一張表格==
* cellspacing 儲存格間距
* cellpadding 儲存格內距
```htmlmixed=
<body>
    <table border="1" width="80%" height="80%" cellspacing="5" cellpadding="5">
        <tr>
            <th>表格標題</th>
            <th>表格標題2</th>
        </tr>
        <tr>
            <td>表格內容</td>
            <td>表格內容2</td>
        </tr>
    </table>
</body>
```


---

==練習:合併表格==
* colspan 水平合併
* rowspan 垂直合併
* 垂直與水平可以一起用
```htmlmixed=
<body>
    <table border="1" width="40%" height="80%" cellspacing="5" cellpadding="5">
        <tr>
            <th rowspan="2">垂直合併 rowspan</th>
            <th>表格標題2</th>
        </tr>
        <tr>
            <td>表格內容</td>
        </tr>
        <tr>
            <td colspan="2">水平合併 colspan</td>
            <td>角落格</td>
        </tr>
    </table>
</body>
```

顯示出來的樣式:
![](https://i.imgur.com/5yUfWvx.png)
