整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
1、表格分析：**表格由 5 行 ，6 列 構(gòu)成，且第一行第一列為 空。
2、繪制思路：
（1）先畫出第一行第一列，且空著它。
（2）再加一列，寫上周一。
（3）再?gòu)?fù)制幾個(gè) td 標(biāo)簽，將周二至周五也繪制出來(lái)，此時(shí) “列” 就繪制完了。
（4）繪制行：在下面再?gòu)?fù)制一行 tr 和 td ，并且添加上文字，此時(shí)第 2 行的 第1列也就出來(lái)了。此時(shí)第一行的第一列的單元格就自動(dòng)展開了，不用特殊調(diào)試。
（5）如法炮制，再?gòu)?fù)制兩行 tr 和 td ，將第二節(jié)和第三節(jié)也添加上。
（6）在第 2 行中復(fù)制一對(duì) td 標(biāo)簽添加 html ，這樣，再?gòu)?fù)制 td 添加 css ，以此表格就繪制出來(lái)了。
成品圖標(biāo)注：↓
ava程序員學(xué)習(xí)HTML，表格和表單是用得比較多的，掌握好這2個(gè)標(biāo)簽的詳細(xì)用法會(huì)對(duì)你非常有益！
一、table表格
表格由table標(biāo)簽表示，里面嵌套tr，表示一行，而tr里面嵌套td和th，表示一行有多少列。它們的具體屬性和使用方法如下：
注意點(diǎn)：table、tr和td都有align屬性，但含義不同。其中table的align表示整個(gè)表格居中對(duì)齊，而在tr中表示整行中所有的單元格中的內(nèi)容居中對(duì)齊，在td中則表示該單元格中的內(nèi)容劇中對(duì)齊。此外td和th還有跨行和跨列的功能。現(xiàn)在利用這個(gè)知識(shí)點(diǎn)實(shí)現(xiàn)一個(gè)具有層次結(jié)構(gòu)的表格：
代碼：
<html>
<head>
<TITLE>first page!!</title>
</head>
<body>
<table border="1" width="700px" align="center">
<tr>
<th>待執(zhí)行項(xiàng)目</th>
<th> </th>
<th>正在執(zhí)行項(xiàng)目</th>
</tr>
<tr>
<td valign="top">
<table border="1" width="100%" >
<tr>
<th>
<input type="checkbox" />
</th>
<th>項(xiàng)目名</th>
<th>花費(fèi)</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
<td align="center">
<input type="button" value="移入>>" /><br/><br/>
<input type="button" value="<<移出" />
</td>
<td valign="top">
<table border="1" width="100%">
<tr>
<th>
<input type="checkbox" />
</th>
<th>項(xiàng)目名</th>
<th>花費(fèi)</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
代碼運(yùn)行效果：
二、form表單
對(duì)于javaEE程序員，我們?nèi)粘］斎胗脩裘兔艽a，然后提交表單，可是對(duì)表單總是懵懵懂懂，現(xiàn)在超詳細(xì)精煉總結(jié)如下，希望可以幫到你！
希望你照著我給出的模板，每一個(gè)都去測(cè)試一下，你便會(huì)豁然開朗，從此表單提交不再困惑！
lt;table>元素是HTML中最復(fù)雜的結(jié)構(gòu)之一。要想創(chuàng)建表格，一般都必須涉及表示表格行、單元格、表頭等方面的標(biāo)簽。由于涉及的標(biāo)簽多，因而使用核心DOM方法創(chuàng)建和修改表格往往都免不了要編寫大量的代碼。假設(shè)我們要使用DOM來(lái)創(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代碼很長(zhǎng)，還有點(diǎn)不太好懂。為了方便構(gòu)建表格，HTML DOM還為<table>、<tbody>和<tr>元素添加了一些屬性和方法。
為元素添加的屬性和方法如下。
caption：保存著對(duì)<caption>元素（如果有）的指針。
tBodies：是一個(gè)<tbody>元素的HTMLCollection。
tFoot：保存著對(duì)<tfoot>元素（如果有）的指針。
tHead：保存著對(duì)<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集合中的指定位置插入一行，返回對(duì)新插入行的引用。
為<tr>元素添加的屬性和方法如下。
cells：保存著<tr>元素中單元格的HTMLCollection。
deleteCell(pos)：刪除指定位置的單元格。
insertCell(pos)：向cells集合中的指定位置插入一個(gè)單元格，返回對(duì)新插入單元格的引用。
使用這些屬性和方法，可以極大地減少創(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í)，通過(guò)<tbody>元素調(diào)用了insertRow()方法，傳入了參數(shù)0——表示應(yīng)該將插入的行放在什么位置上。執(zhí)行這一行代碼后，就會(huì)自動(dòng)創(chuàng)建一行并將其插入到<tbody>元素的位置0上，因此就可以馬上通過(guò)tbody.rows[0]來(lái)引用新插入的行。
創(chuàng)建單元格的方式也十分相似，即通過(guò)<tr>元素調(diào)用insertCell()方法并傳入放置單元格的位置。然后，就可以通過(guò)tbody.rows[0].cells[0]來(lái)引用新插入的單元格，因?yàn)樾聞?chuàng)建的單元格被插入到了這一行的位置0上。
總之，使用這些屬性和方法創(chuàng)建表格的邏輯性更強(qiáng)，也更容易看懂，盡管技術(shù)上這兩套代碼都是正確的。
想要了解更多Java基礎(chǔ)知識(shí)，可以點(diǎn)擊評(píng)論區(qū)鏈接和小編一起學(xué)習(xí)java吧，此視頻教程為初學(xué)者而著，零基礎(chǔ)入門篇！給同學(xué)們帶來(lái)全新的Java300集課程啦!java零基礎(chǔ)小白自學(xué)Java必備優(yōu)質(zhì)教程_手把手圖解學(xué)習(xí)Java，讓學(xué)習(xí)成為一種享受_嗶哩嗶哩_bilibili
?
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
