html中可以实现九九乘法表效果吗?怎么编写代码?

济南云服务器 2024年3月18日06:28:22HTML教程html中可以实现九九乘法表效果吗?怎么编写代码?已关闭评论1621阅读模式

在html想要实现九九乘法表的效果,有很多种方法,我们可以通过for循环的方式解决该需求,当然,我们也可以通过一种更加简洁明了的编码方式实现

关键代码:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
   table {
       width: 100%;
       border-collapse: collapse;
   }
   td, th {
       border: 1px solid #ddd;
       padding: 8px;
       text-align: center;
   }
   th {
       background-color: #f2f2f2;
   }
</style>
</head>
<body>
<h2>九九乘法表</h2>
<table>
   <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>
       <th>1</th>
       <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>
       <th>2</th>
       <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>
       <th>3</th>
       <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>
       <th>4</th>
       <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>
       <th>5</th>
       <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>
       <th>6</th>
       <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>
       <th>7</th>
       <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>
       <th>8</th>
       <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>
       <th>9</th>
       <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>

济南云服务器
  • 本文由 发表于 2024年3月18日06:28:22
  • 转载请务必保留本文链接:http://news.hcsw666.com/955