HTML + CSS + JavaScript 实现简单的 9 x 9 乘法表

步骤：

第一步：定义for循环，实现一个基本乘法表框架

<script>
    for (let i = 0; i <= 9; i++) {
        for (let j = 0; j <= i ; j++) {
            document.write(i + " * " + j + " = " + (i * j) + "&nbsp;&nbsp;&nbsp;");
        }
        document.write("<br>");
    }
</script>

效果如下：

第二步：将没项结果放到一个表格对应的单元格中

<script>
    /* 创建一个表格，乘法表中的每个元素都站一个单元格 */
    document.write("<table align='center'>");
    for (let i = 0; i <= 9; i++) {
        document.write("<tr>");
        for (let j = 0; j <= i ; j++) {
            document.write("<td>");
            document.write(i + " * " + j + " = " + (i * j) + "&nbsp;&nbsp;&nbsp;");
            document.write("</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>

效果：

第三步：利用CSS，对每个单元格进行描述

<style>
    /* 对每个单元格进行描述：方框 + 方框线宽度为1px + 方框线为实线 */
    td {
        border: 1px solid;
    }
</style>

效果：

HTML文件代码总和：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <!-- CSS -->
    <style>
        /* 对每个单元格进行描述：方框 + 方框线宽度为1px + 方框线为实线 */
        td {
            border: 1px solid;
        }
    </style>

    <!-- JavaScript -->
    <script>
        /* 创建一个表格，乘法表中的每个元素都站一个单元格 */
        document.write("<table align='center'>");
        for (let i = 0; i <= 9; i++) {
            document.write("<tr>");
            for (let j = 0; j <= i ; j++) {
                document.write("<td>");
                document.write(i + " * " + j + " = " + (i * j) + "&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>

</head>
<body>

</body>
</html>