CSS表格是網頁設計中非常實用的一種元素，可以將數據整齊地排列在網頁上。在設置表格寬度時，使用百分比是非常常見的做法。下面我們就來學習一下如何用CSS設置表格寬度百分比。

<style>
table {
width: 100%; /* 設置表格寬度為100% */
border-collapse: collapse; /* 邊框合并 */
}
td, th {
border: 1px solid black; /* 設置單元格邊框 */
padding: 10px; /* 設置單元格內邊距 */
}
</style>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>小紅</td>
<td>18</td>
<td>女</td>
</tr>
</tbody>
</table>

代碼中，我們先通過<style></style>標簽定義CSS樣式，設置表格寬度為100%。接著使用border-collapse屬性將邊框合并，使表格看起來更整潔。然后使用td和th選擇器設置單元格邊框和內邊距。

在HTML代碼中，我們使用<table>標簽定義表格，使用<thead>和<tbody>標簽定義表格頭部和主體部分。在<thead>中，我們使用<tr>和<th>標簽定義表頭單元格。在<tbody>中，我們使用<tr>和<td>標簽定義表格數據單元格。

使用CSS設置表格寬度為百分比可以使表格自適應網頁大小，可以讓用戶獲得更好的閱讀體驗。同時，我們還可以根據實際需求設置表格寬度的具體百分比。