# 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)