九九乘法表的制作

最新推荐文章于 2025-12-16 21:51:40 发布

原创最新推荐文章于 2025-12-16 21:51:40 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

web 前端同时被 3 个专栏收录

14 篇文章

订阅专栏

html

6 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

该博客展示了如何使用HTML、CSS和JavaScript实现一个居中对齐的九九乘法表，通过双层for循环构建表格，并用内联样式添加边框。代码中详细解释了每个部分的作用，包括换行和空格的处理，最终生成了一个标准的乘法表。

先制作框架

使用双层for循环确定框架

确定想要实现的效果

没有换行很难看

增加换行

靠的太近了，加上空格

添加表格

添加表格边框

成品：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是九九乘法表</title>
<!--    添加css样式-->
    <style>
        td{
            border: solid 1px;
        }
    </style>
    <script>
    //最外层定义一个表   居中对齐
        document.write("<table align='center'>");

        //双层for循环确定框架
        for (var i = 1; i <= 9; i++){
            document.write("<tr>");
            for (var j = 1; j <= i; j++){
                document.write("<td>");
                //想要实现的效果 1*1=1                   //靠的太近了，加上空格
                document.write(i+ "*" +j + "=" +(i*j)+"&nbsp;&nbsp;");
                document.write("</td>");
            }
            // //换行
            // document.write("<br>");

            document.write("</tr>");
        }

    document.write("</table>");
    </script>
</head>
<body>

</body>
</html>