古早古早以前，要排出一個美觀的網頁必須使用 <table> 標籤，利用表格合併欄位的方式，把圖片跟文字放在想放的位置，但是 CSS 橫空出世之後，網頁排版變得靈活許多，<table>標籤就回歸它原本的用途，真的就只是拿來排表格。剛好最近切版，有許多表格元件，就來重新溫習一下 <table> 的使用方法。
裸露的表格
<table> 標籤裡面的結構分為 <thead> 、<tbody>與<tfoot>，<thead>放的是表頭，<tbody>放的是表格的內容，<tfoot>放的則是表尾。三者裡面都必須放一個<tr></tr>標籤，告訴瀏覽器那是一個橫列，而<tr></tr>中間放的標籤則略有不同，<thead>部分要放 <th>，<tbody>與<tfoot>則是放<td>。
<thead>、<tbody> 和 <tfoot> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」
<thead>CSS 的 display 屬性為「table-header-group」，只能作為<table>的子元素，無法單獨使用於<table>標籤之外。<tbody>CSS 的 display 屬性為「table-row-group」，只能作為<table>的子元素，無法單獨使用於<table>標籤之外。<tfoot>CSS 的 display 屬性為「table-footer-group」，只能作為<table>的子元素，無法單獨使用於<table>標籤之外。
原始沒有任何修飾的表格結構如下：
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Weight</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>18</td>
<td>50</td>
<td>180</td>
</tr>
<tr>
<td>Mary</td>
<td>23</td>
<td>70</td>
<td>160</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>average</td>
<td>31</td>
<td>60</td>
<td>170</td>
</tr>
</tfoot>
</table>
可以看到一個醜醜的表格，每一個 <td> 都有被一個距離隔開，粉紅色的底色則是為了標示出表格的範圍，唯一設定的 CSS 選擇器。
<table>的CSS 預設樣式如下：
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
那要如何將每一格中間的距離取消呢？這必須在 CSS 中設定 border-collapse 這一個屬性為 collapse。
table {
// 原始的設定 border-collapse: separate
border-collapse: collapse;
}
在 border-collapse: separate 的狀態下可以用 border-spacing
table {
// 原始的設定 border-collapse: separate
border-collapse: separate;
border-spacing: 10px;
}
在這裡可以看到，原本的欄位間的間隔都被消除了，表格間的欄位都緊緊貼在一起。
<tr>可以設定框線但是無法設定圓角
<tr>標籤的意思為 table-row，表示一個橫列，<tr></tr>中間必須放入<th></th>或是<td></td>標籤，我們可以為 <tr> 設定框線，甚至設定 border-bottom 等屬性都可以起作用，但是無法設定圓角。
tr{
background: pink;
border: 4px solid red;
border-radius: 10px;
// padding 無作用
padding: 100px;
}
<th>與<td>
<th>的 text-align 預設為 center。<td>的 text-align 預設為 left。<th>跟<td>都有 padding 屬性。<th>跟<td>都可以設定 background 背景屬性。- <th> 跟
<td>都可以設定 border。 - <th> 跟
<td>都可以設定 border-radius 圓角，但是 border 不會跟著變化，變成背景有圓角，但是邊框是直角的狀態，這是因為 border-collapse 設為 collapse，先改回 separate，再將 border-spacing 設為 0 ，這樣邊框也會變成圓角貼齊在有圓角的背景上。
table {
// 原始的設定 border-collapse: separate
border-collapse: collapse;
}
tr{
background: pink;
// border-bottom:4px solid red;
border-radius:10px;
}
th{
border:2px solid brown;
padding: 50px;
border-radius: 20px;
}
td {
border: 2px solid blue;
padding: 50px;
text-align:right;
border-radius: 20px;
}也可以分別設定 <th>與<td>的4個圓角：
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 20px; 在 <td> 上面設圓角，<tr> 的 border 不會跟著變圓角
在 <td>的第一個元素設定左上角跟左下角為圓角，最後一個元素設定右下角跟右上角為圓角，同時設定 <tr> 的外框線：
td:first-child,
th:first-child {
border-radius: 20px 0 0 20px;
}
td:last-child,
th:last-child {
border-radius: 0 20px 20px 0;
}
tr{
background: pink;
border:4px solid red;
// border-radius: 20px 不會起作用
border-radius: 20px;
}參考資料
https://www.w3schools.com/css/css_table_style.asp
https://steam.oxxostudio.tw/category/html/tags/thead-tbody-tfoot.html