格语法:

注意：颜色使用格式有三种：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>

得到结果如图

本期的内容比较多，大家可以在平日里多加练习，这是大数据开发基础的重要部分，做到能更熟练，更准确，希望大家能有所进步。