「HTML」操作表格

lt;table>元素是HTML中最復雜的結構之一。要想創建表格，一般都必須涉及表示表格行、單元格、表頭等方面的標簽。由于涉及的標簽多，因而使用核心DOM方法創建和修改表格往往都免不了要編寫大量的代碼。假設我們要使用DOM來創建下面的HTML表格。
<table border="1" width="100%">
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>

要使用核心DOM方法創建這些元素，得需要像下面這么多的代碼：
//創建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//創建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//創建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell1_1 = document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);

//創建第二行
var row2 = document.createElement("tr");
tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2= document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);

//將表格添加到文檔主體中
document.body.appendChild(table);

顯然，DOM代碼很長，還有點不太好懂。為了方便構建表格，HTML DOM還為<table>、<tbody>和<tr>元素添加了一些屬性和方法。
為元素添加的屬性和方法如下。

caption：保存著對<caption>元素（如果有）的指針。
tBodies：是一個<tbody>元素的HTMLCollection。
tFoot：保存著對<tfoot>元素（如果有）的指針。
tHead：保存著對<thead>元素（如果有）的指針。
rows：是一個表格中所有行的HTMLCollection。

createTHead()：創建<thead>元素，將其放到表格中，返回引用。
createTFoot()：創建<tfoot>元素，將其放到表格中，返回引用。
createCaption()：創建<caption>元素，將其放到表格中，返回引用。
deleteTHead()：刪除<thead>元素。
deleteTFoot()：刪除<tfoot>元素。
deleteCaption()：刪除<caption>元素。
deleteRow(_pos_)：刪除指定位置的行。
insertRow(_pos_)：向rows集合中的指定位置插入一行。
為<tbody>元素添加的屬性和方法如下。
rows：保存著<tbody>元素中行的HTMLCollection。
deleteRow(pos)：刪除指定位置的行。

insertRow(pos)：向rows集合中的指定位置插入一行，返回對新插入行的引用。
為<tr>元素添加的屬性和方法如下。
cells：保存著<tr>元素中單元格的HTMLCollection。
deleteCell(pos)：刪除指定位置的單元格。
insertCell(pos)：向cells集合中的指定位置插入一個單元格，返回對新插入單元格的引用。
使用這些屬性和方法，可以極大地減少創建表格所需的代碼數量。例如，使用這些屬性和方法可以將前面的代碼重寫如下（加陰影的部分是重寫后的代碼）。
//創建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//創建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//創建第一行tbody.insertRow(0);tbody.rows[0].insertCell(0);tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));tbody.rows[0].insertCell(1);tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));//創建第二行tbody.insertRow(1);tbody.rows[1].insertCell(0);tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));tbody.rows[1].insertCell(1);tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//將表格添加到文檔主體中
document.body.appendChild(table);

在這次的代碼中，創建<table>和<tbody>的代碼沒有變化。不同的是創建兩行的部分，其中使用了HTML DOM定義的表格屬性和方法。在創建第一行時，通過<tbody>元素調用了insertRow()方法，傳入了參數0——表示應該將插入的行放在什么位置上。執行這一行代碼后，就會自動創建一行并將其插入到<tbody>元素的位置0上，因此就可以馬上通過tbody.rows[0]來引用新插入的行。
創建單元格的方式也十分相似，即通過<tr>元素調用insertCell()方法并傳入放置單元格的位置。然后，就可以通過tbody.rows[0].cells[0]來引用新插入的單元格，因為新創建的單元格被插入到了這一行的位置0上。
總之，使用這些屬性和方法創建表格的邏輯性更強，也更容易看懂，盡管技術上這兩套代碼都是正確的。

想要了解更多Java基礎知識，可以點擊評論區鏈接和小編一起學習java吧，此視頻教程為初學者而著，零基礎入門篇！給同學們帶來全新的Java300集課程啦!java零基礎小白自學Java必備優質教程_手把手圖解學習Java，讓學習成為一種享受_嗶哩嗶哩_bilibili

格是組織和顯示數據的一種有效方式，無論是在文檔中還是網頁上。良好的表格設計可以提高信息的可讀性和易理解性。本文將詳細介紹如何創建和格式化表格，并提供一些實例。

創建表格

在Word或類似文檔編輯器中創建表格

插入表格：打開文檔編輯器，例如Microsoft Word，找到“插入”選項卡，點擊“表格”，選擇需要的行數和列數。
輸入數據：點擊表格中的單元格，開始輸入數據。可以使用Tab鍵在單元格之間跳轉。
調整行列：根據需要調整行高和列寬。在Word中，可以通過拖動表格邊框來調整，或者點擊右鍵選擇“表格屬性”進行精確設置。

在HTML中創建表格

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

<table> 標簽用于創建表格。
<tr> 標簽定義表格中的行。
<th> 標簽定義表頭單元格，通常加粗居中顯示。
<td> 標簽定義標準單元格。

格式化表格

格式化表格包括調整表格的樣式、布局和顏色等，以提高其可讀性和美觀性。

文檔編輯器中的格式化

邊框樣式：可以為表格或單個單元格設置邊框樣式、顏色和寬度。在Word中，選擇表格，然后在“設計”選項卡中選擇邊框樣式。
單元格填充：為了區分不同的行或列，可以對單元格進行顏色填充。在Word中，選擇單元格或行列，然后在“布局”選項卡中選擇“填充”。
文本對齊：文本對齊方式可以設置為左對齊、居中或右對齊。選擇單元格后，在“布局”選項卡中選擇對齊方式。
合并單元格：有時需要將多個單元格合并為一個單元格以顯示標題或其他信息。選擇要合并的單元格，然后點擊“合并單元格”。

HTML中的格式化

在HTML中，格式化通常通過CSS完成。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

border-collapse 設置為 collapse 以消除單元格之間的間隙。
th, td 設置了邊框、填充和文本對齊。
th 設置了表頭的背景色。
tr:nth-child(even) 為偶數行設置了條紋效果。

實例

文檔編輯器實例

假設我們需要創建一個3x3的表格，顯示一個小型團隊的成員信息。

插入一個3行3列的表格。
輸入數據：姓名、職位、郵箱。
設置第一行為表頭，加粗并填充淡藍色背景。
設置所有單元格的文本為居中對齊。
為表格添加外邊框，并為行添加細邊框。

HTML實例

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 50%;
    border-collapse: collapse;
    margin: 25px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Manager</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Developer</td>
    <td>bob@example.com</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>Designer</td>
    <td>charlie@example.com</td>
  </tr>
</table>

</body>
</html>

在這個HTML實例中，我們創建了一個帶有條紋效果的表格，表頭有綠色背景和白色文字，每個單元格都有適當的填充和邊框。

結論

創建和格式化表格是一項基本技能，無論是在文檔編輯器還是HTML中。一個良好格式化的表格不僅能有效傳達信息，還能提升整體文檔或網頁的美觀性和專業性。通過實踐這些技巧和使用示例作為參考，你可以創建出既實用又吸引人的表格。

格語法:

注意：顏色使用格式有三種：rgb(x,x,x) #xxxxxx colorname

<table width=""></table>指定表格的寬度大小(使用數字pixel或%)

<table border=""></table>設定表格邊框大小(使用數字pixel)

<table align=""></table>表格位置,置左,為默認值

align屬性:left(左對齊表格，默認值)、right(右對齊表格)、center(居中對齊表格)

<table bgcolor=""></table>設定表格的背景顏色

<table cellpadding=""></table>指定內容與網格線之間的間距(使用數字pixel或%)

<table cellspacing=""></table>指定網格線與網格線之間的距離(使用數字pixel或%)

通常表格, 這兩個參數都設置為 0 。

<table rules="rows"></table>規定內側邊框的哪個部分是可見的。(兼容性差)

rules屬性:none 沒有線條。

groups 位于行組和列組之間的線條。

rows 位于行之間的線條。

cols 位于列之間的線條。

all 位于行和列之間的線條。

定義了表格內容的摘要：

表格結構：

在使用表格進行布局時, 可以將表格劃分為頭部、主體和頁腳, 具體如下所示：

<thead></thead>：用于定義表格的頭部, 必須位于<table></table>標記中, 一般包含網頁的logo和導航等頭部信息。

<tfoot></tfoot>：用于定義表格的頁腳, 位于<table></table>標記中<thead></thead>標記之后, 一般包含網頁底部的企業信息等。

<tbody></tbody>：用于定義表格的主體, 位于<table></table>標記中<tfoot></tfoot>標記之后, 一般包含網頁中除頭部和底部之外的其他內容。

注意：在沒有<tbody></tbody>比較的情況下, 瀏覽器會自動添加<tbody></tbody>標記。

<table bordercolor=""></table>設定表格邊框的顏色

<table cols=""></table>指定表格的欄數

<table height=""></table>指定表格的高度大小(使用數字)

<table background=""></table>背景圖片的URL=就是路徑網址(默認是repeat：水平和垂直方向重復)

<table bordercolordark=""></table>設定表格暗邊框的顏色

<table bordercolorlight=""></table>設定表格亮邊框的顏色

<tr align=""></tr> 定義表格行的內容對齊方式。

align屬性值:right、left、center、justify、char

<tr bgcolor=""></tr> 規定表格行的背景顏色。

<tr valign=""></tr> 規定表格行中內容的垂直對齊方式。

valign屬性值right、left、center、justify、char

<td colspan=""></td>指定儲存格合并欄的欄數(使用數字)

<td rowspan=""></td>指定儲存格合并列的列數(使用數字)

<td align=""></td> 調整表格字段之左右對齊

<td bgcolor=""></td> 設定表格字段之背景顏色

<td colspan="" rowspan=""></td> 表格字段的合并

<td valign=""></td> 調整表格字段之上下對齊

<td width=""></td> 調整表格字段寬度

<td nowrap="nowrap"></td> 規定表格單元格中的內容不換行(注意只有一個值:nowrap)

<caption></caption>為表格加上標題

<caption align="">設定表格標題位置

align屬性:left, center(默認值), right

<th></th> 定義表頭(粗體居中)

細表格邊框

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>

表格創建后瀏覽器會自動添加<tbody>標簽

在線咨詢

上一篇：HTML5基礎+元素
下一篇：JavaScript 的 .reduce() 函數的完整指南（帶有真實示例）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商