整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
lt;table>元素是HTML中最復(fù)雜的結(jié)構(gòu)之一。要想創(chuàng)建表格，一般都必須涉及表示表格行、單元格、表頭等方面的標(biāo)簽。由于涉及的標(biāo)簽多，因而使用核心DOM方法創(chuàng)建和修改表格往往都免不了要編寫大量的代碼。假設(shè)我們要使用DOM來創(chuàng)建下面的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方法創(chuàng)建這些元素，得需要像下面這么多的代碼：
//創(chuàng)建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//創(chuàng)建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//創(chuàng)建第一行
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);
//創(chuàng)建第二行
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代碼很長，還有點(diǎn)不太好懂。為了方便構(gòu)建表格，HTML DOM還為<table>、<tbody>和<tr>元素添加了一些屬性和方法。
為元素添加的屬性和方法如下。
caption：保存著對<caption>元素（如果有）的指針。
tBodies：是一個(gè)<tbody>元素的HTMLCollection。
tFoot：保存著對<tfoot>元素（如果有）的指針。
tHead：保存著對<thead>元素（如果有）的指針。
rows：是一個(gè)表格中所有行的HTMLCollection。
createTHead()：創(chuàng)建<thead>元素，將其放到表格中，返回引用。
createTFoot()：創(chuàng)建<tfoot>元素，將其放到表格中，返回引用。
createCaption()：創(chuàng)建<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集合中的指定位置插入一個(gè)單元格，返回對新插入單元格的引用。
使用這些屬性和方法，可以極大地減少創(chuàng)建表格所需的代碼數(shù)量。例如，使用這些屬性和方法可以將前面的代碼重寫如下（加陰影的部分是重寫后的代碼）。
//創(chuàng)建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//創(chuàng)建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//創(chuàng)建第一行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"));//創(chuàng)建第二行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);
在這次的代碼中，創(chuàng)建<table>和<tbody>的代碼沒有變化。不同的是創(chuàng)建兩行的部分，其中使用了HTML DOM定義的表格屬性和方法。在創(chuàng)建第一行時(shí)，通過<tbody>元素調(diào)用了insertRow()方法，傳入了參數(shù)0——表示應(yīng)該將插入的行放在什么位置上。執(zhí)行這一行代碼后，就會自動創(chuàng)建一行并將其插入到<tbody>元素的位置0上，因此就可以馬上通過tbody.rows[0]來引用新插入的行。
創(chuàng)建單元格的方式也十分相似，即通過<tr>元素調(diào)用insertCell()方法并傳入放置單元格的位置。然后，就可以通過tbody.rows[0].cells[0]來引用新插入的單元格，因?yàn)樾聞?chuàng)建的單元格被插入到了這一行的位置0上。
總之，使用這些屬性和方法創(chuàng)建表格的邏輯性更強(qiáng)，也更容易看懂，盡管技術(shù)上這兩套代碼都是正確的。
想要了解更多Java基礎(chǔ)知識，可以點(diǎn)擊評論區(qū)鏈接和小編一起學(xué)習(xí)java吧，此視頻教程為初學(xué)者而著，零基礎(chǔ)入門篇！給同學(xué)們帶來全新的Java300集課程啦!java零基礎(chǔ)小白自學(xué)Java必備優(yōu)質(zhì)教程_手把手圖解學(xué)習(xí)Java，讓學(xué)習(xí)成為一種享受_嗶哩嗶哩_bilibili
?
格是組織和顯示數(shù)據(jù)的一種有效方式，無論是在文檔中還是網(wǎng)頁上。良好的表格設(shè)計(jì)可以提高信息的可讀性和易理解性。本文將詳細(xì)介紹如何創(chuàng)建和格式化表格，并提供一些實(shí)例。
<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>
格式化表格包括調(diào)整表格的樣式、布局和顏色等，以提高其可讀性和美觀性。
在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>
假設(shè)我們需要創(chuàng)建一個(gè)3x3的表格，顯示一個(gè)小型團(tuán)隊(duì)的成員信息。
<!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>
在這個(gè)HTML實(shí)例中，我們創(chuàng)建了一個(gè)帶有條紋效果的表格，表頭有綠色背景和白色文字，每個(gè)單元格都有適當(dāng)?shù)奶畛浜瓦吙颉?/p>
創(chuàng)建和格式化表格是一項(xiàng)基本技能，無論是在文檔編輯器還是HTML中。一個(gè)良好格式化的表格不僅能有效傳達(dá)信息，還能提升整體文檔或網(wǎng)頁的美觀性和專業(yè)性。通過實(shí)踐這些技巧和使用示例作為參考，你可以創(chuàng)建出既實(shí)用又吸引人的表格。
格語法:
注意：顏色使用格式有三種：rgb(x,x,x) #xxxxxx colorname
<table width=""></table>指定表格的寬度大小(使用數(shù)字pixel或%)
<table border=""></table>設(shè)定表格邊框大小(使用數(shù)字pixel)
<table align=""></table>表格位置,置左,為默認(rèn)值
align屬性:left(左對齊表格，默認(rèn)值)、right(右對齊表格)、center(居中對齊表格)
<table bgcolor=""></table>設(shè)定表格的背景顏色
<table cellpadding=""></table>指定內(nèi)容與網(wǎng)格線之間的間距(使用數(shù)字pixel或%)
<table cellspacing=""></table>指定網(wǎng)格線與網(wǎng)格線之間的距離(使用數(shù)字pixel或%)
<table border="1" cellspacing="0" cellpadding="0">
通常表格, 這兩個(gè)參數(shù)都設(shè)置為 0 。
<table rules="rows"></table>規(guī)定內(nèi)側(cè)邊框的哪個(gè)部分是可見的。(兼容性差)
rules屬性:none 沒有線條。
groups 位于行組和列組之間的線條。
rows 位于行之間的線條。
cols 位于列之間的線條。
all 位于行和列之間的線條。
<table summary="Monthly savings for the Flintstones family"></table>
定義了表格內(nèi)容的摘要：
表格結(jié)構(gòu)：
在使用表格進(jìn)行布局時(shí), 可以將表格劃分為頭部、主體和頁腳, 具體如下所示：
<thead></thead>：用于定義表格的頭部, 必須位于<table></table>標(biāo)記中, 一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息。
<tfoot></tfoot>：用于定義表格的頁腳, 位于<table></table>標(biāo)記中<thead></thead>標(biāo)記之后, 一般包含網(wǎng)頁底部的企業(yè)信息等。
<tbody></tbody>：用于定義表格的主體, 位于<table></table>標(biāo)記中<tfoot></tfoot>標(biāo)記之后, 一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。
注意：在沒有<tbody></tbody>比較的情況下, 瀏覽器會自動添加<tbody></tbody>標(biāo)記。
<table bordercolor=""></table>設(shè)定表格邊框的顏色
<table cols=""></table>指定表格的欄數(shù)
<table height=""></table>指定表格的高度大小(使用數(shù)字)
<table background=""></table>背景圖片的URL=就是路徑網(wǎng)址(默認(rèn)是repeat：水平和垂直方向重復(fù))
<table bordercolordark=""></table>設(shè)定表格暗邊框的顏色
<table bordercolorlight=""></table>設(shè)定表格亮邊框的顏色
<tr align=""></tr> 定義表格行的內(nèi)容對齊方式。
align屬性值:right、left、center、justify、char
<tr bgcolor=""></tr> 規(guī)定表格行的背景顏色。
<tr valign=""></tr> 規(guī)定表格行中內(nèi)容的垂直對齊方式。
valign屬性值right、left、center、justify、char
<td colspan=""></td>指定儲存格合并欄的欄數(shù)(使用數(shù)字)
<td rowspan=""></td>指定儲存格合并列的列數(shù)(使用數(shù)字)
<td align=""></td> 調(diào)整表格字段之左右對齊
<td bgcolor=""></td> 設(shè)定表格字段之背景顏色
<td colspan="" rowspan=""></td> 表格字段的合并
<td valign=""></td> 調(diào)整表格字段之上下對齊
<td width=""></td> 調(diào)整表格字段寬度
<td nowrap="nowrap"></td> 規(guī)定表格單元格中的內(nèi)容不換行(注意只有一個(gè)值:nowrap)
<caption></caption>為表格加上標(biāo)題
<caption align="">設(shè)定表格標(biāo)題位置
align屬性:left, center(默認(rèn)值), right
<th></th> 定義表頭(粗體居中)
細(xì)表格邊框
<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>表格創(chuàng)建后瀏覽器會自動添加<tbody>標(biāo)簽
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
