<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Table、TableHeader、TableRow、TableData 对象</title>
<script type="text/javascript">
//更改表格边线的宽度
function changeBorder(){
document.getElementById("myTable").border = 10;
}
//更改表格的 cellPadding 和 cellSpacing
function padding()(){
document.getElementById("myable").cellPadding = "15";
}
function spacing(){
document.getElementById("myable").cellSpacing = "15";
}
//规定表格的外部边框
function aboveFrames(){
document.getElementById("myTable").frame = "above";
}
function belowFrames(){
document.getElementById("myTable").frame = "below";
}
//规定表格的内部边线
function Rowrules(){
document.getElementById("biaoge1").rules = "rows";
}
function Cellrules(){
document.getElementById("biaoge1").rules = "cols";
}
//某一行的 InnerHTML
function showRow(){
alert(document.getElementById("biaoge1").row[0].innerHTML);
}
//表格单元的 InnerHTML
function cell(){
var x = document.getElementById("biaoge1").rows[0].calls;
alert(x[0].innerHTML);
}
//为表格创建了一个标题
function newCaption(){
var X = document.getElementById("biaoge1").createCaption();
X.innerHTML = "My headLine";
}
//从表格删除行
function deleteRow(r){
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("table2").deleteRow(i);
}
//向表格添加新行 - 然后向其添加内容
function inRow(){
var a = document.getElementById("table2").insertRow(0);
var b = a.insertCell(0);
var c = a.insertCell(1);
b.innerHTML = "hello";
c.innerHTML = "world";
}
//向一个已有的行中插入单元格
function insCell(){
var d = document.getElementById("tr2").insertCell(0);
d.innerHTML = "sally";
}
//对齐行中的单元格内容
function leftAlign(){
document.getElementById("header").align = "left";
}
</script>
</head>
<body>
//更改表格边线的宽度
<table border="1" id="myTable">
<tr id = "header">
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="changeBorder()" value="改变边框">
//更改表格的 cellPadding 和 cellSpacing
<table id = "myable" border = "1">
<tr>
<td>milk</td>
<td>binggan</td>
</tr>
<tr>
<td>1024</td>
<td>0312</td>
</tr>
</table>
<input type="button" onclick="padding()" value="改变cellSpading">
<input type="button" onclick="spacing()" value="改变spacing">
//规定表格的外部边框
<input type="button" onclick="aboveFrames()" value="显示上边框">
<input type="button" onclick="belowFrames()" value="显示下边框">
//规定表格的内部边线
<table id = "biaoge1">
<tr>
<td>Row1 Cell1</td>
<td>Row1 Cell2</td>
</tr>
<tr>
<td>Row2 Cell1</td>
<td>Row2 Cell2</td>
</tr>
<tr>
<td>Row3 Cell1</td>
<td>Row3 Cell2</td>
</tr>
</table>
<br>
<input type="button" onclick="Rowrules()" value="尽显示行边框">
<input type="button" onclick="Cellrules()" value="仅显示列边框">
//某一行的 InnerHTML
<input type="button" onclick="showRow()" value="显示第一行的innerHTML">
//表格单元的 InnerHTML
<input type="button" onclick="cell()" value="显示第一个单元">
//为表格创建了一个标题
<input type="button" onclick="newCaption()" value="创建标题">
//从表格删除行
<table id = "table1" border="1">
<tr>
<td>Row1</td>
<td><input type="button" onclick="deleteRow(this)" value="删除"></td>
</tr>
<tr>
<td>Row2</td>
<td><input type="button" onclick="deleteRow(this)" value="删除"></td>
</tr>
<tr>
<td>Row3</td>
<td><input type="button" onclick="deleteRow(this)" value="删除"></td>
</tr>
</table>
//向表格添加新行 - 然后向其添加内容
<input type="button" onclick="inRow()" value="add rows">
//向一个已有的行中插入单元格
<table border = "1">
<tr id = "tr1">
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr id = "tr2">
<th>snoopy</th>
<th>peter</th>
</tr>
</table>
<input type="button" onclick="insCell()" value="插入下一行">
//对齐行中的单元格内容
<table width="100%" border="1">
<tr>
<td>Name</td>
<td>ming</td>
</tr>
<tr>
<td>peter</td>
<td>john</td>
</tr>
</table>
<input type="button" onclick="leftAlign()" value="左对齐换行">
</body>
</html>
2015/12/20--Table、TableHeader、TableRow、TableData 对象
原文：http://www.cnblogs.com/whatcanido/p/5062159.html