HTMLで九九の表を作る

7095 ワード
HTML table 枠線 HTML テキストリンク

HTMLでシンプルな九九の表を作っていきます。

まずはbodyを作っていきます。

index.html
<!DOCTYPE html>
</head>
<body>
  <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>

これにCSSでデザインしていきます。

index.html
body {
  font-size: 22px;
  background: #808080;
}

table {
  border-collapse: collapse;
  border-collapse: separate;
  border-spacing: 2px 2px;
}

th {
  background: #FFA500;
  padding: 3px 12px;
}

td {
  text-align: right;
  background: white;
}

これでこのようになります。