A Multiplication Table

This table example demonstrates how to code a 2D array as a table with a caption on it. A colgroup element is used to group the entries in the first column so that they may be styled together. The caption is a label that is centered over the table.

MultiplicationTable.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      th, td {
        text-align: center;
      }
      table {
        background-color:white;
      }
    </style>
  </head>
  <body>
  <table cellspacing="0" cellpadding="10" border="3">
    <caption><h3>Multiplication Table</h3></caption>
    <colgroup>
      <col style="background-color:Gainsboro">
    </colgroup>
    <tr style="background-color:Gainsboro">
      <th>*</th>
      <th>0</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><b>0</b></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td><b>1</b></td>
      <td>0</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><b>2</b></td>
      <td>0</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><b>3</b></td>
      <td>0</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><b>4</b></td>
      <td>0</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><b>5</b></td>
      <td>0</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><b>6</b></td>
      <td>0</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><b>7</b></td>
      <td>0</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><b>8</b></td>
      <td>0</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><b>9</b></td>
      <td>0</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>

Core HTML

A Multiplication Table

MultiplicationTable.html

Output