在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>
评论