格語法:

注意：顏色使用格式有三種：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或%)

<table border="1" cellspacing="0" cellpadding="0">

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

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

rules屬性:none 沒有線條。

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

rows 位于行之間的線條。

cols 位于列之間的線條。

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

<table summary="Monthly savings for the Flintstones family"></table>

定義了表格內容的摘要：

表格結構：

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

<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>標簽

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

為了方便構建表格，HTML DOM為表格專門創建了HTMLTableElement 接口；其繼承自HTMLElement接口；

該接口提供了專門的屬性和方法來處理表格的布局與呈現；

HTMLTableElement接口屬性：

• caption：返回HTMLTableCaptionElement類型的<caption>元素；
• tHead：指向一個HTMLTableSectionElement類型的<thead>；
• tBodies：是一個保存著<tbody>元素的HTMLCollection對象，該對象的length屬性返回了<tbody>元素的數量；
• tFoot：指向一個HTMLTableSectionElement類型的<tfoot>元素；
• rows：返回一個表格中所有行的HTMLCollection，也就是所有的<tr>，包含在<thead>、<tbody>和<tfoot>三者之中，該屬性是只讀的；

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對象還擁有一些表現性的屬性，但這些屬性已建議不被使用，因為可以使用CSS來指定樣式，如；

• width：表格寬度，值可以是像素也可以是百分比；注意，此寬不會返回CSS指定的寬，它只映射<table>標簽中的width特性；
• border：邊框寬度，其以像素為單位；
• align：表格的對齊方式，可能的值為”left”、”center”和”right”；
• bgColor：背景顏色，該屬性也可以應用在tbody、row和cell對象上；
• cellPadding：單元格內邊距；
• cellSpacing：單元格間距；
• summary：表描述；
• frame：表格外邊框位置，可能的值為：void無邊、above頂部、below底部、hsides頂部和底部、vsides右側和左側、lhs左側、rhs右側、box四個邊、border四個邊；
• rules：表中如何呈現單元格邊框，可能的值為：none沒有、groups組之間的線、rows行之間的線、cols列之間的線、all所有單元格之間的線；

以上屬性除了summary，都可以使用CSS進行定義，所以盡量不要再使用；

HTMLTableElement接口方法：

createCaption()：返回表格元素的標題，如該表沒有標題，這個方法創建并返回標題，隨后可以使用其他方法對其添加內容；

deleteCaption()：移除表格元素的<caption>；

var table = document.getElementsByTagName("table")[0];
// 也可以創建一個，并添加到DOM樹中
var table = document.createElement("table");
document.body.appendChild(table);
var caption = table.createCaption();
caption.innerHTML = "Web前端開發課程";
table.deleteCaption();

createTHead()：返回表元素的tHead對象，如果表元素中沒有<thead>，則創建并返回；注意：如果不存在<thead>，該方法創建<thead>并直接插入表中；

deleteTHead()：移除表元素中的<thead>；

var thead = table.createTHead();  // 如果不存在，則創建
console.log(thead);
var row = thead.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
table.deleteTHead();

createTFoot()：返回表元素的tHead對象，如果表元素中沒有<thead>，則創建并返回；

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()方法：創建并返回表元素的<tbody>；

注意：與createTHead()、createTFoot()方法的不同的是，createTBody()可以創建多個<tbody>元素，新創建的<tbody>在最后位置；

新創建的<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都可以調用該方法；

如果一個表有多個<tbody>元素，默認情況下，新行將插入到最后的<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>對象，再使用該對象執行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>），它定義了若干操作當前行的屬性和方法；

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);  // 4

sectionRowIndex屬性：返回該行在所屬部分（如<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);  // 1

cells：返回某個行中的所有單元格的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或者等于當前行中單元格的數目，則新的單元格將被追加到當前行的最后；

插入的新Cell對象，可以使用其他DOM方法添加子元素或內容；

var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.appendChild(document.createTextNode("4"));
var cell2 = row.insertCell(1);
cell2.innerHTML = "Web開發";

該方法不能創建<th>元素，如果需要創建<th>，必須使用document.createElement()方法及Node.insertBefore()或相關的方法來創建和插入<th>元素；

deleteCell(index)：刪除行中給定位置的單元格；

row.deleteCell(0);

HTMLTableCellElement接口：

表示表元素中的單元格，包括<th>及<td>元素；其繼承自HTMLElement接口；

• cellIndex屬性：只讀，返回該單元格在cells集合中的位置；
• colSpan屬性：單元格跨越的列數；
• rowSpan屬性：單元格跨越的行數；

var row = table.insertRow();
var cell = row.insertCell();
cell.innerHTML = "Web前端開發";
console.log(cell.cellIndex); // 0
cell.colSpan = "3";  // 跨3列
var cell = table.rows[1].cells[1];
cell.rowSpan = 2;  // 跨行
table.rows[2].deleteCell(2);

使用這些屬性和方法，可以極大地減少創建表格所需的代碼量，如：

var table = document.createElement("table");
table.border = "1";
table.width = "600px";
var caption = table.createCaption();
caption.innerHTML = "Web前端開發課程";
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])方法：

將數據以表格的形式顯示；這個方法需要一個必須參數data，data必須是一個數組或者是一個對象；

它會把數據data以表格的形式打印出來，數組中的每一個元素（或對象中可枚舉的屬性）將會以行的形式顯示在表格中；

// 打印一個由字符串組成的數組
console.table(["HTML","CSS","Javascript"]);

表格的第一列是index，如果數據data是一個數組，那么這一列的單元格的值就是數組的索引，如果數據是一個對象，那么它們的值就是各對象的屬性名稱；；

// 打印一個屬性值是字符串的對象
function Person(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
}
var p = new Person("王","唯");
console.table(p);

打印復合的參數類型：

如果需要打印的元素在一個數組中，或者需要打印的屬性在一個對象，并且他們本身就是一個數組或者對象，則將會把這個元素顯示在同一行，每個元素的成員占一列；

// 二元數組的打印
var people = [["wang","wei"],["jing","jing"],["juan","zi"]];
console.table(people);
// 打印一個包含對象的數組
var wang = new Person("王","唯");
var jing = new Person("靜","靜");
var juan = new Person("娟","子");
// 如果數組中包含該對象，打印出來的列標簽將是該對象的屬性名
console.table([wang, jing, juan]);
// 打印屬性名是對象的對象
var family = {};
family.mother = jing;
family.father = wang;
family.daughter = juan;
console.table(family);

選擇要隱藏的列：

console.table()會把所有元素羅列在每一列，可以使用columns參數選擇要顯示的列的子集；其是一個包含列的名稱的數組；

// 一個對象數組，只打印 firstName
console.table([wang, jing, juan],"firstName");

按列重新排序：

可以點擊每列的頂部標簽來重排輸出的表格；

TML作為一種用來描述網頁的語言，是制作網頁必不可少的，但HTML 不是一種編程語言，而是一種標記語言 (markup language），本著為了更好的了解大數據開發的基礎，今天就帶著大家更進一步的了解HTML的使用，HTML的表格與表單。

1.HTML表格

表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的作用就不言而喻了，讓看起來更簡潔直觀有序性。

下面給大家帶來一些常用的標簽：

<table> 表格的最外層容器

<tr> 定義表格行

<th> 定義表頭

<td> 定義表格單元

<caption>定義表格表題

　　<width>:寬度。可以用像素或百分比表示。 常用960像素。

　　<border>：邊框，常用值為0。

　　<cellpadding>：內容跟邊框的距離，常用值為0。

　　<cellspacing>：單元格與單元格之間的間距，常用值為0。

　　<algin>：對齊方式。

　　<bgcolor>：背景色。

<background>：背景圖片。

<align>: 一行內容的水平對齊方式。

<valign>: 一行內容的垂直對齊方式。

<height>：行高。

創建表格

在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。

創建表格的基本語法：

<table>

<tr>

<td>單元格內的文字</td>

...

</tr>

...

</table>

舉個例子

其中：table用于定義一個表格標簽。

tr標簽 用于定義表格中的行，必須嵌套在 table標簽中。

td 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。

字母 td 指表格數據（table data），即數據單元格的內容。

再比如說我們可以建立個有顏色的格子，如下圖

表格的作用除了可以顯示一個表格外，有的時候還可以用于輔助排版。但現在都不怎么使用了，因為時代的進步，以前的表格排版的網頁已經被淘汰了。

2. HTML表單

關于表單的制定，因為在瀏覽器中輸入的內容都必須要經過網絡提交到服務器端再處理，所以需要把所有的控件都包含在一個form表單控件中，然后一次提交給服務器，再由服務器處理用戶提交的數據。

HTML 支持有序列表(有序列表是一列項目，列表項目使用數字進行標記。

有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。)無序列表(無序列表也是一個項目的列表，此列項目使用粗體圓點“典型的小黑圓圈“進行標記。)和定義列表(自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。)。

表單常用標簽：

form: 表單的最外層容器

input: 用于搜集用戶信息,根據不同的type屬性值,展示不同的控件

Text：普通的文本輸入框

Password：密碼輸入框

Checkbox：復選框

Radio：單選框

File：上傳文件

Submit：提交按鈕

Reset：重置按鈕

Cols：列

Rows：行

注意事項：

<form id="" name="" method="post/get" action="負責處理的服務端">--輸入系統時，必須有

Name ：定義表單的名稱；

Method: 定義表單結果從瀏覽器傳送到服務器的方式，默認參數為：get

Action ：用來指定表單處理程序的位置(服務器端腳本處理程序）

Fieldset：把表單分組；

Legend：分組名稱。

id不可重復，name可重復，get提交有長度限制，并且編碼后的內容在地址欄可見，post提交沒有長度限制，且編碼后內容不可見。

舉個例子

<form action="login.asp" method="post">

<label>用戶名: </label><input type="text" name="username" />

<label>密碼: </label><input type="password" name="password" />

</form>

得到結果如圖

本期的內容比較多，大家可以在平日里多加練習，這是大數據開發基礎的重要部分，做到能更熟練，更準確，希望大家能有所進步。