標題：使用JavaScript 在HTML表格中添加CSS樣式

HTML表格是Web開發中常用的一種表單容器，可以用來展示各種數據表格。在HTML表格中，我們可以使用CSS樣式來美化表格布局和樣式，使表格更加美觀和易于使用。本文將介紹如何使用JavaScript來在HTML表格中添加CSS樣式。

1. 創建一個HTML表格。可以使用HTML的表格標簽<table>來創建一個表格，并添加表格內容和樣式。

<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>22</td>

<td>女</td>

</tr>

</tbody>

</table>

2. 添加CSS樣式。我們可以使用CSS的表格標簽<table>和樣式屬性來定義表格的樣式。

table {

border-collapse: collapse;

width: 100%;

th, td {

border: 1px solid black;

padding: 8px;

background-color: #f2f2f2;

background-color: #ddd;

border: 1px solid black;

3. 使用JavaScript來修改樣式。我們可以使用JavaScript的DOM操作來修改HTML表格的樣式。

var table = document.querySelector("table");

table.style.width = "100%";

這段代碼將修改HTML表格的寬度為100%，使其與頁面匹配。

4. 驗證效果。我們可以使用JavaScript的調試工具來驗證修改后的樣式是否生效。

console.log(table.style.width);

這段代碼將輸出當前表格的寬度，可以看到寬度已經修改為100%。

通過使用JavaScript和CSS，我們可以在HTML表格中添加樣式，使表格更加美觀和易于使用。使用JavaScript的DOM操作來修改樣式，可以確保樣式在頁面上正確顯示。