九九乘法表

九九乘法表

首先，把表格的样式整一下，均分表格，合并单元格边框。

table {
    width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
}

td:not(:empty) { /*这个选择器的意思是要把内容为空的单元格去掉，选中的单元格都是有的内容的*/
    padding: 10px;
    border: 1px solid #999;
}

1. 两种简易版

第一种：

思路：既然是在页面打印，就要打好表格框架，九行九列，最外面是table主体标签，九行用for循环循环九次，那么单元格呢，当然是要嵌套在每一行里，每一行里有几个单元格呢，仔细观察，每行的单元格恰好和行数相同，所以单元格的内循环条件就出来了，代码如下：

document.write('<table>');
for (var i = 1; i <= 9; i++) {
    document.write('<tr>');
    for (var j = 1; j <= i; j++) {
        document.write('<td>' + j + '×' + i + '=' + j * i + '</td>');
    }
    document.write('<tr>');
}
document.write('</table>');

第二种：

思路：还是先打好表格框架，九行九列，行数不变，但是，仔细思考，外层行数循环需要做什么改进，是的，没错，每一行和上面那种输出方式刚好相反，那么外层循环的值恰好可以反一反，从1递增到9，变为从9递减到1，合理改变。那么每一行中的单元格数量呢？和外层循环的值一致，也是从9到1，代码如下：

document.write('<table>');
for (var i = 9; i >= 1; i--) {
    document.write('<tr>');
    for (var j = 1; j <= i; j++) {
        document.write('<td>' + j + '×' + i + '=' + j * i + '</td>');
    }
    document.write('<tr>');
}
document.write('</table>');
document.write('<br>');

2. 两种进阶版

第一种：

思路：为什么会靠右显示？因为是被前面没有内容的单元格挤过去的。所以，这一次，我们需要在大循环内写两个并列循环，一个输出空单元格，一个输出每行九九乘法表内容，代码如下：

document.write('<table>');
for (var i = 1; i < 10; i++) {
    document.write('<tr>');
    for (var j = 1; j <= 9 - i; j++) {
        document.write('<td></td>');
    }
    for (var j = 1; j <= i; j++) {
        document.write('<td>' + j + '×' + i + '=' + j * i + '</td>');
    }
    document.write('<tr>');
}
document.write('</table>');
document.write('<br>');

第二种：

思路：自己想吧。

document.write('<table>');
for (var i = 9; i >= 1; i--) {
    document.write('<tr>');
    for (var j = 1; j <= 9 - i; j++) {
        document.write('<td></td>');
    }
    for (var j = 1; j <= i; j++) {
        document.write('<td>' + j + '×' + i + '=' + j * i + '</td>');
    }
    document.write('<tr>');
}
document.write('</table>');
document.write('<br>');

总结： 后两种只是在前两种的基础上添加了一个循环，打印空白单元格，把有内容的单元格挤到了右边。