樣式圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/table1.js"></script>
</head>
<body>
<table align="center">
<tr>
<td>行數:</td>
<td><input type="text" id="row" /></td>
</tr>
<tr>
<td>列數:</td>
<td><input type="text" id="col" /></td>
</tr>
<tr>
<td>寬度px:</td>
<td><input type="text" id="w" /></td>
</tr>
<tr>
<td>高度px:</td>
<td><input type="text" id="h" /></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" id="createTable" onclick="createTable()" value="創建" /></td>
</tr>
</table>
<div id="table"> </div>
</body>
<script type="text/javascript">
function createTable() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var w = document.getElementById("w").value;
var h = document.getElementById("h").value;
var show = "";
var bgcolor;
show += '<table border="1" align="center" style="border-collapse: collapse;" >';
for (var i = 0; i < row; i++) {//外層循環，輸出表格的行
if (i % 2 != 0) {
bgcolor = "#87CEEB";
} else {
bgcolor = "#FFFFE0";
}
show += "<tr bgcolor='" + bgcolor + "'>";
for (var j = 0; j < col; j++) {//內層循環，輸出表格的列
show += '<td height = "' + h + '" width = "' + w + '"></td>';
}
show += '</tr>';
}
show += '</table>';
var result = document.getElementById("table");
result.innerHTML = show;
}
</script>
</html>