整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
格語法:
注意：顏色使用格式有三種：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">
通常表格, 這兩個參數(shù)都設(shè)置為 0 。
<table rules="rows"></table>規(guī)定內(nèi)側(cè)邊框的哪個部分是可見的。(兼容性差)
rules屬性:none 沒有線條。
groups 位于行組和列組之間的線條。
rows 位于行之間的線條。
cols 位于列之間的線條。
all 位于行和列之間的線條。
<table summary="Monthly savings for the Flintstones family"></table>
定義了表格內(nèi)容的摘要：
表格結(jié)構(gòu)：
在使用表格進(jìn)行布局時, 可以將表格劃分為頭部、主體和頁腳, 具體如下所示：
<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)容不換行(注意只有一個值: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)簽
內(nèi)容是《Web前端開發(fā)之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學(xué)習(xí)。
為了方便構(gòu)建表格，HTML DOM為表格專門創(chuàng)建了HTMLTableElement 接口；其繼承自HTMLElement接口；
該接口提供了專門的屬性和方法來處理表格的布局與呈現(xiàn)；
HTMLTableElement接口屬性：
var table = document.getElementsByTagName("table")[0];
console.log(table.caption);
console.log(table.tHead);
console.log(table.tBodies);
console.log(table.tFoot);
console.log(table.rows);
console.log(table.rows[0]);
console.log(table.rows[table.rows.length-1]);另外，HTMLTableElement對象還擁有一些表現(xiàn)性的屬性，但這些屬性已建議不被使用，因為可以使用CSS來指定樣式，如；
以上屬性除了summary，都可以使用CSS進(jìn)行定義，所以盡量不要再使用；
HTMLTableElement接口方法：
createCaption()：返回表格元素的標(biāo)題，如該表沒有標(biāo)題，這個方法創(chuàng)建并返回標(biāo)題，隨后可以使用其他方法對其添加內(nèi)容；
deleteCaption()：移除表格元素的<caption>；
var table = document.getElementsByTagName("table")[0];
// 也可以創(chuàng)建一個，并添加到DOM樹中
var table = document.createElement("table");
document.body.appendChild(table);
var caption = table.createCaption();
caption.innerHTML = "Web前端開發(fā)課程";
table.deleteCaption();createTHead()：返回表元素的tHead對象，如果表元素中沒有<thead>，則創(chuàng)建并返回；注意：如果不存在<thead>，該方法創(chuàng)建<thead>并直接插入表中；
deleteTHead()：移除表元素中的<thead>；
var thead = table.createTHead(); // 如果不存在，則創(chuàng)建
console.log(thead);
var row = thead.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
table.deleteTHead();createTFoot()：返回表元素的tHead對象，如果表元素中沒有<thead>，則創(chuàng)建并返回；
deleteTFoot()：移除表元素中的<tfoot>；
var tfoot = table.createTFoot();
console.log(tfoot);
var row = tfoot.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
table.deleteTFoot();createTBody()方法：創(chuàng)建并返回表元素的<tbody>；
注意：與createTHead()、createTFoot()方法的不同的是，createTBody()可以創(chuàng)建多個<tbody>元素，新創(chuàng)建的<tbody>在最后位置；
新創(chuàng)建的<tbody>元素會被保存到tBodies集合中；
var tbody = table.createTBody();
console.log(tbody);
var row = tbody.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
console.log(table.tBodies);insertRow(index)：向rows集合中在指定位置插入行；即在表元素中index位置插入新行<tr>，并返回對該新行的類型為HTMLTableRowElement對象；
table及tbody都可以調(diào)用該方法；
如果一個表有多個<tbody>元素，默認(rèn)情況下，新行將插入到最后的<tbody>；
var row = table.insertRow(0); // 第一行
console.log(row);
table.insertRow(); // 最后一行
table.insertRow(-1); // 最后一行
table.insertRow(table.rows.length); // 最后一行
// 如果存在第二個<body>，并且指定的index=4位于該<body>中，則在此處添加
table.insertRow(4);
console.log(table.rows);要將行插入特定的<tbody>，先取得該<tbody>對象，再使用該對象執(zhí)行insertRow()方法；但index不能超過此<tbody>的索引下界；
var tbody = table.tBodies[0];
tbody.insertRow(); // 在第一個<body>的最后添加新行
tbody.insertRow(table.rows.length); // 異常
deleteRow(index)：刪除指定位置的行；如果 index 值為 -1，最后一行會被移除；
table.deleteRow(1);
var tbody = table.tBodies[1];
tbody.deleteRow(1);HTMLTableRowElement接口對象：
該類型表示表格中的一行（<tr>），它定義了若干操作當(dāng)前行的屬性和方法；
rowIndex屬性：返回該行在整個表中的邏輯位置，即索引，如果該行不屬于表，則返回-1；
var row = table.rows[1];
console.log(row.rowIndex); // 1
var tbody = table.tBodies[1];
var row = tbody.rows[1];
console.log(row.rowIndex); // 4sectionRowIndex屬性：返回該行在所屬部分（如<thead>、<tbody>和<tfoot>部分）中的邏輯位置，如果該行不屬于某部分，則返回-1；
var row = table.rows[1];
console.log(row.sectionRowIndex); // 1
var tbody = table.tBodies[1];
var row = tbody.rows[1];
console.log(row.sectionRowIndex); // 1cells：返回某個行中的所有單元格的HTMLCollection集合；該集合中保存著類型為HTMLTableCellElement的cell對象；
var row = table.rows[1];
console.log(row.cells); // HTMLCollection
console.log(row.cells[0]);insertCell(index)：向cells集合中的指定位置插入一個單元格，即在<tr>的index位置插入<td>，返回對新插入單元格的引用；如果index值為空或者為-1或者等于當(dāng)前行中單元格的數(shù)目，則新的單元格將被追加到當(dāng)前行的最后；
插入的新Cell對象，可以使用其他DOM方法添加子元素或內(nèi)容；
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.appendChild(document.createTextNode("4"));
var cell2 = row.insertCell(1);
cell2.innerHTML = "Web開發(fā)";該方法不能創(chuàng)建<th>元素，如果需要創(chuàng)建<th>，必須使用document.createElement()方法及Node.insertBefore()或相關(guān)的方法來創(chuàng)建和插入<th>元素；
deleteCell(index)：刪除行中給定位置的單元格；
row.deleteCell(0);HTMLTableCellElement接口：
表示表元素中的單元格，包括<th>及<td>元素；其繼承自HTMLElement接口；
var row = table.insertRow();
var cell = row.insertCell();
cell.innerHTML = "Web前端開發(fā)";
console.log(cell.cellIndex); // 0
cell.colSpan = "3"; // 跨3列
var cell = table.rows[1].cells[1];
cell.rowSpan = 2; // 跨行
table.rows[2].deleteCell(2);使用這些屬性和方法，可以極大地減少創(chuàng)建表格所需的代碼量，如：
var table = document.createElement("table");
table.border = "1";
table.width = "600px";
var caption = table.createCaption();
caption.innerHTML = "Web前端開發(fā)課程";
var thead = table.createTHead();
var row = thead.insertRow();
var th1 = document.createElement("th");
th1.appendChild(document.createTextNode("序號"));
row.appendChild(th1);
var th2 = document.createElement("th");
th2.appendChild(document.createTextNode("課程"));
row.appendChild(th2);
var tbody = table.createTBody();
tbody.insertRow();
tbody.rows[0].insertCell();
tbody.rows[0].cells[0].appendChild(document.createTextNode("1"));
tbody.rows[0].insertCell();
tbody.rows[0].cells[1].appendChild(document.createTextNode("HTML"));
tbody.insertRow();
tbody.rows[1].insertCell();
tbody.rows[1].cells[0].appendChild(document.createTextNode("2"));
tbody.rows[1].insertCell();
tbody.rows[1].cells[1].appendChild(document.createTextNode("CSS"));
var tfoot = table.createTFoot();
tfoot.insertRow();
var cell = tfoot.rows[0].insertCell();
cell.colSpan = 2;
cell.align = "right";
cell.innerHTML = "由大師哥王唯主講";
document.body.appendChild(table);生成簡單的空表格：
<style>
#mytable{width: 400px; border: 1px solid lightgreen;}
#mytable td{padding: .5em; border: 1px solid lightgreen;}
</style>
<script>
function MyTable(id, caption, rows, cols){
this.id = id ? id : "table";
this.caption = caption ? caption : undefined;
this.rows = rows ? rows : 2;
this.cols = cols ? cols : 2;
var table = document.createElement("table");
table.id = this.id;
if(this.caption){
var _caption = table.createCaption();
_caption.innerText = this.caption;
}
for(var i=0; i<this.rows; i++){
var _rows = table.insertRow();
for(var j = 0; j < this.cols; j++){
var _cell = _rows.insertCell();
_cell.appendChild(document.createTextNode(""));
}
}
return table;
}
var t = new MyTable("mytable","我的表格",4,3);
document.body.appendChild(t);
</script>控制臺表格：
console.table(data [, columns])方法：
將數(shù)據(jù)以表格的形式顯示；這個方法需要一個必須參數(shù)data，data必須是一個數(shù)組或者是一個對象；
它會把數(shù)據(jù)data以表格的形式打印出來，數(shù)組中的每一個元素（或?qū)ο笾锌擅杜e的屬性）將會以行的形式顯示在表格中；
// 打印一個由字符串組成的數(shù)組
console.table(["HTML","CSS","Javascript"]);表格的第一列是index，如果數(shù)據(jù)data是一個數(shù)組，那么這一列的單元格的值就是數(shù)組的索引，如果數(shù)據(jù)是一個對象，那么它們的值就是各對象的屬性名稱；；
// 打印一個屬性值是字符串的對象
function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var p = new Person("王","唯");
console.table(p);打印復(fù)合的參數(shù)類型：
如果需要打印的元素在一個數(shù)組中，或者需要打印的屬性在一個對象，并且他們本身就是一個數(shù)組或者對象，則將會把這個元素顯示在同一行，每個元素的成員占一列；
// 二元數(shù)組的打印
var people = [["wang","wei"],["jing","jing"],["juan","zi"]];
console.table(people);
// 打印一個包含對象的數(shù)組
var wang = new Person("王","唯");
var jing = new Person("靜","靜");
var juan = new Person("娟","子");
// 如果數(shù)組中包含該對象，打印出來的列標(biāo)簽將是該對象的屬性名
console.table([wang, jing, juan]);
// 打印屬性名是對象的對象
var family = {};
family.mother = jing;
family.father = wang;
family.daughter = juan;
console.table(family);選擇要隱藏的列：
console.table()會把所有元素羅列在每一列，可以使用columns參數(shù)選擇要顯示的列的子集；其是一個包含列的名稱的數(shù)組；
// 一個對象數(shù)組，只打印 firstName
console.table([wang, jing, juan],"firstName");按列重新排序：
可以點擊每列的頂部標(biāo)簽來重排輸出的表格；
Web前端開發(fā)之Javascript-零點程序員-王唯
TML作為一種用來描述網(wǎng)頁的語言，是制作網(wǎng)頁必不可少的，但HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language），本著為了更好的了解大數(shù)據(jù)開發(fā)的基礎(chǔ)，今天就帶著大家更進(jìn)一步的了解HTML的使用，HTML的表格與表單。
1.HTML表格
表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的作用就不言而喻了，讓看起來更簡潔直觀有序性。
下面給大家?guī)硪恍┏Ｓ玫臉?biāo)簽：
<table> 表格的最外層容器
<tr> 定義表格行
<th> 定義表頭
<td> 定義表格單元
<caption>定義表格表題
<width>:寬度。可以用像素或百分比表示。 常用960像素。
<border>：邊框，常用值為0。
<cellpadding>：內(nèi)容跟邊框的距離，常用值為0。
<cellspacing>：單元格與單元格之間的間距，常用值為0。
<algin>：對齊方式。
<bgcolor>：背景色。
<background>：背景圖片。
<align>: 一行內(nèi)容的水平對齊方式。
<valign>: 一行內(nèi)容的垂直對齊方式。
<height>：行高。
創(chuàng)建表格
在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。
創(chuàng)建表格的基本語法：
<table>
<tr>
<td>單元格內(nèi)的文字</td>
...
</tr>
...
</table>
舉個例子
其中：table用于定義一個表格標(biāo)簽。
tr標(biāo)簽 用于定義表格中的行，必須嵌套在 table標(biāo)簽中。
td 用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中。
字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。
再比如說我們可以建立個有顏色的格子，如下圖
表格的作用除了可以顯示一個表格外，有的時候還可以用于輔助排版。但現(xiàn)在都不怎么使用了，因為時代的進(jìn)步，以前的表格排版的網(wǎng)頁已經(jīng)被淘汰了。
2. HTML表單
關(guān)于表單的制定，因為在瀏覽器中輸入的內(nèi)容都必須要經(jīng)過網(wǎng)絡(luò)提交到服務(wù)器端再處理，所以需要把所有的控件都包含在一個form表單控件中，然后一次提交給服務(wù)器，再由服務(wù)器處理用戶提交的數(shù)據(jù)。
HTML 支持有序列表(有序列表是一列項目，列表項目使用數(shù)字進(jìn)行標(biāo)記。
有序列表始于 <ol> 標(biāo)簽。每個列表項始于 <li> 標(biāo)簽。)無序列表(無序列表也是一個項目的列表，此列項目使用粗體圓點“典型的小黑圓圈“進(jìn)行標(biāo)記。)和定義列表(自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。)。
表單常用標(biāo)簽：
form: 表單的最外層容器
input: 用于搜集用戶信息,根據(jù)不同的type屬性值,展示不同的控件
Text：普通的文本輸入框
Password：密碼輸入框
Checkbox：復(fù)選框
Radio：單選框
File：上傳文件
Submit：提交按鈕
Reset：重置按鈕
Cols：列
Rows：行
注意事項：
<form id="" name="" method="post/get" action="負(fù)責(zé)處理的服務(wù)端">--輸入系統(tǒng)時，必須有
Name ：定義表單的名稱；
Method: 定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方式，默認(rèn)參數(shù)為：get
Action ：用來指定表單處理程序的位置(服務(wù)器端腳本處理程序）
Fieldset：把表單分組；
Legend：分組名稱。
id不可重復(fù)，name可重復(fù)，get提交有長度限制，并且編碼后的內(nèi)容在地址欄可見，post提交沒有長度限制，且編碼后內(nèi)容不可見。
舉個例子
<form action="login.asp" method="post">
<label>用戶名: </label><input type="text" name="username" />
<label>密碼: </label><input type="password" name="password" />
</form>
得到結(jié)果如圖
本期的內(nèi)容比較多，大家可以在平日里多加練習(xí)，這是大數(shù)據(jù)開發(fā)基礎(chǔ)的重要部分，做到能更熟練，更準(zhǔn)確，希望大家能有所進(jìn)步。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
