操作表格
因为DOM代码很长，也太繁琐
为<table>元素对象添加的属性和方法：
（创建的元素都会返回对创建元素的引用）
caption 保存着对<caption>的指针 表格的标题
tBodies 是一个<tbody>元素的HTMLCollection
tFoot 保存着对<tfoot>元素的指针
tHead 保存着对<thead>元素的指针
rows 是一个表格中所有行的HTMLCollection
createTHead() 创建<thead>元素，将其放在表格中，并返回其引用
createTFoot 创建<tfoot>y元素，将其放在表格中，并返回其引用
createCaption 创建<caption>元素，将其放在在表格中，并返回其引用
deleteTHead 删除<head>元素
deleteTFoot 删除<foot>元素
deleteCaption 删除<caption>元素
deleteRow(pos) 删除指定位置的行
insertRow(pos) 插入指定位置的行
为<tbody>元素添加的属性和方法
rows 保存着<tbody>元素中行的HTMLCollection
deleteRow(pos) 删除指定位置的行
insertRow(pos) 向rows集合中的指定位置插入一行，返回对新插入行的引用
为<tr>元素添加的属性和方法
cells 保存着<tr>元素中单元格的HTMLCollection
deleteCell(pos) 删除指定位置的单元格
insertCell(pos) x向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用
<script>
var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.border = 1;
table.width = '50%';
var head = table.createTHead();//创建表头并返回表头的指针
table.appendChild(tbody);
var foot = table.createTFoot();//创建表尾并返回表尾的指针
var caption = table.createCaption();//创建表格标题并返回表格的指针
head.innerHTML = '健康指数';
foot.innerHTML = '2018-8-17';
caption.innerHTML = '《可丽可心》';
head.setAttribute('align','center');
foot.setAttribute('align','right');
/*
第一种创建行和单元格的方法
*/
var oRow = table.insertRow(0);
var oCell1 = oRow.insertCell(0);
var oCell2 = oRow.insertCell(1);
oCell1.innerHTML = '结束';
oCell2.innerHTML = '开始';
/*
第二种创建行和单元格的方法
*/
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 1.2'));//插入内容
tbody.rows[0].cells[0].innerHTML = '健康';
tbody.insertRow(1);//创建第二行
tbody.rows[1].insertCell(0);//创建第一列
tbody.rows[1].cells[0].appendChild(document.createTextNode('cell 1.1'));//插入内容
tbody.rows[1].insertCell(1);//创建第二列
tbody.rows[1].cells[1].appendChild(document.createTextNode('cell 1.2'));//插入内容
//插入单元格
//insertCell(pos)
var s1 = tbody.rows[0].insertCell(2);//插入一个单元格，会返回该单元格的指针
s1.innerHTML = 'sizesizesize';
/*
s1.setAttribute('color','red');
不能使用setAttribute()进行设置，它只支持元素的特性而不是属性
*/
/*
改变元素的属性即style
*/
s1.style.color = 'red';
document.body.appendChild(table);
</script>
pos参数表示将插入的行放在什么位置，如果没有按顺序插入则报错
