当前位置：首页 > 前端开发 > 正文

html99乘法表图如何做

admin
前端开发
2025-08-14
1

用 HTML 表格标签，嵌套循环生成行与列，结合 CSS

核心思路解析

99 乘法表的本质是「行 × 列 = 积」的二维数据展示，在 HTML 中，最适合呈现此类结构化数据的标签是 <table>，其核心逻辑为：
行方向：代表第一个乘数（1~9）；
列方向：代表第二个乘数（1~9）；
：对应两数相乘的结果。

通过双重循环（实际开发中可用后端语言或 JavaScript 动态生成，本例采用纯 HTML 静态写法）填充表格内容，即可完成基础框架。

完整代码实现步骤

搭建 HTML 基础结构

新建一个 .html 文件，写入以下基础模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">99 乘法表</title>
    <style>
        / CSS 样式将在后续步骤补充 /
    </style>
</head>
<body>
    <!-表格主体将在此插入 -->
</body>
</html>

️ 注意：<meta charset="UTF-8"> 确保中文正常显示；lang="zh-CN" 声明页面语言，提升搜索引擎友好度。

创建表格容器

在 <body> 标签内添加 <table> 元素，并通过 <caption> 添加标题：

<body>
    <table border="1" cellspacing="0" cellpadding="8">
        <caption><h2>九九乘法表</h2></caption>
        <!-表头行 & 数据行将在此插入 -->
    </table>
</body>

参数说明：

border="1"：设置表格边框粗细为 1px；
cellspacing="0"：消除单元格之间的默认间距；
cellpadding="8"：设置单元格内边距为 8px，使文字与边框保持距离。

添加表头行（可选但推荐）

为明确各列对应的乘数,可在首行添加空白单元格+列号：

<tr>
    <th></th> <!-左上角留空 -->
    <th>×1</th>
    <th>×2</th>
    <th>×3</th>
    <th>×4</th>
    <th>×5</th>
    <th>×6</th>
    <th>×7</th>
    <th>×8</th>
    <th>×9</th>
</tr>

技巧：使用 <th> 而非 <td>，浏览器会自动将其识别为表头，默认加粗且居中。

逐行填充乘法数据

以第一行为例（1×1 至 1×9）：

<tr>
    <td>1</td> <!-左侧行号 -->
    <td>1</td>   <!-1×1 -->
    <td>2</td>   <!-1×2 -->
    <td>3</td>   <!-1×3 -->
    <td>4</td>   <!-1×4 -->
    <td>5</td>   <!-1×5 -->
    <td>6</td>   <!-1×6 -->
    <td>7</td>   <!-1×7 -->
    <td>8</td>   <!-1×8 -->
    <td>9</td>   <!-1×9 -->
</tr>

重复此模式,依次修改左侧行号（2~9）及对应单元格的乘积结果，最终形成完整的 9 行数据。
示例片段（第 2 行）：

<tr>
    <td>2</td>
    <td>2</td>   <!-2×1 -->
    <td>4</td>   <!-2×2 -->
    <td>6</td>   <!-2×3 -->
    <td>8</td>   <!-2×4 -->
    <td>10</td>  <!-2×5 -->
    <td>12</td>  <!-2×6 -->
    <td>14</td>  <!-2×7 -->
    <td>16</td>  <!-2×8 -->
    <td>18</td>  <!-2×9 -->
</tr>

依此类推,直至完成第 9 行（9×1 至 9×9）。

样式优化技巧

全局样式调整

在 <style> 标签内添加以下 CSS，提升可读性：

table {
    width: 100%; / 表格宽度占满父容器 /
    border-collapse: collapse; / 合并相邻边框 /
    margin: 20px auto; / 上下边距 20px，左右自动居中 /
    font-family: Arial, sans-serif; / 设置字体 /
}
caption {
    font-size: 1.5em; / 标题放大 /
    margin-bottom: 15px; / 与表格顶部的距离 /
}
th, td {
    border: 1px solid #ccc; / 自定义边框颜色 /
    text-align: center; / 文字居中 /
    padding: 8px; / 统一内边距 /
}
th {
    background-color: #f0f8ff; / 表头浅蓝色背景 /
}
tr:nth-child(even) { / 隔行变色 /
    background-color: #f9f9f9; / 偶数行浅灰色背景 /
}

效果说明：

border-collapse: collapse; 消除单元格间距带来的双线问题；
tr:nth-child(even) 选择器实现斑马纹效果，提高阅读体验；
th 的特殊背景色突出表头区域。

响应式适配（可选）

若需在手机上正常显示,可添加媒体查询限制最大宽度：

@media screen and (max-width: 600px) {
    table {
        width: auto; / 根据内容自动调整宽度 /
        overflow-x: auto; / 超出部分显示滚动条 /
    }
}

完整代码整合

将上述所有代码组合后,完整文件如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">99 乘法表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }
        caption {
            font-size: 1.5em;
            margin-bottom: 15px;
        }
        th, td {
            border: 1px solid #ccc;
            text-align: center;
            padding: 8px;
        }
        th {
            background-color: #f0f8ff;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        @media screen and (max-width: 600px) {
            table {
                width: auto;
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="8">
        <caption><h2>九九乘法表</h2></caption>
        <tr>
            <th></th>
            <th>×1</th>
            <th>×2</th>
            <th>×3</th>
            <th>×4</th>
            <th>×5</th>
            <th>×6</th>
            <th>×7</th>
            <th>×8</th>
            <th>×9</th>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>4</td>
            <td>6</td>
            <td>8</td>
            <td>10</td>
            <td>12</td>
            <td>14</td>
            <td>16</td>
            <td>18</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>6</td>
            <td>9</td>
            <td>12</td>
            <td>15</td>
            <td>18</td>
            <td>21</td>
            <td>24</td>
            <td>27</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>8</td>
            <td>12</td>
            <td>16</td>
            <td>20</td>
            <td>24</td>
            <td>28</td>
            <td>32</td>
            <td>36</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
            <td>10</td>
            <td>15</td>
            <td>20</td>
            <td>25</td>
            <td>30</td>
            <td>35</td>
            <td>40</td>
            <td>45</td>
        </tr>
        <tr>
            <td>6</td>
            <td>6</td>
            <td>12</td>
            <td>18</td>
            <td>24</td>
            <td>30</td>
            <td>36</td>
            <td>42</td>
            <td>48</td>
            <td>54</td>
        </tr>
        <tr>
            <td>7</td>
            <td>7</td>
            <td>14</td>
            <td>21</td>
            <td>28</td>
            <td>35</td>
            <td>42</td>
            <td>49</td>
            <td>56</td>
            <td>63</td>
        </tr>
        <tr>
            <td>8</td>
            <td>8</td>
            <td>16</td>
            <td>24</td>
            <td>32</td>
            <td>40</td>
            <td>48</td>
            <td>56</td>
            <td>64</td>
            <td>72</td>
        </tr>
        <tr>
            <td>9</td>
            <td>9</td>
            <td>18</td>
            <td>27</td>
            <td>36</td>
            <td>45</td>
            <td>54</td>
            <td>63</td>
            <td>72</td>
            <td>81</td>
        </tr>
    </table>
</body>
</html>