九九表のHTML生成に関する解説

左下のようなHTMLの生成を考えよう（コメントは除く）． これらは，右下のように分けて考えることができる．

<table border>
<tr>
<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>
<tr>
<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>

	… 中略 …

<tr>
<td>9</td>    <!-- 9 × 1 -->
<td>18</td>   <!-- 9 × 2 -->
<td>27</td>   <!-- 9 × 3 -->
<td>36</td>   <!-- 9 × 4 -->
<td>45</td>   <!-- 9 × 5 -->
<td>54</td>   <!-- 9 × 6 -->
<td>63</td>   <!-- 9 × 7 -->
<td>72</td>   <!-- 9 × 8 -->
<td>81</td>   <!-- 9 × 9 -->
</tr>
</table>
 ⇒
[先頭部分]
<table border>
[1の段]
<tr>
<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の段]
<tr>
<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の段]
<tr>
<td>9</td>    <!-- 9 × 1 -->
<td>18</td>   <!-- 9 × 2 -->
<td>27</td>   <!-- 9 × 3 -->
<td>36</td>   <!-- 9 × 4 -->
<td>45</td>   <!-- 9 × 5 -->
<td>54</td>   <!-- 9 × 6 -->
<td>63</td>   <!-- 9 × 7 -->
<td>72</td>   <!-- 9 × 8 -->
<td>81</td>   <!-- 9 × 9 -->
</tr>
[末尾部分]
</table>

標準体重表の場合と同じように考えて， 最初に [先頭部分] を出力してから， 反復を用いて各 […の段] を出力し， 最後に [末尾部分] を出力すればよい． （流れ図(a)）

更にまた，各 [iの段] の内容も，下のように分けて考えることができる．

<tr>
<td>i</td>    <!-- i × 1 -->
<td>2i</td>   <!-- i × 2 -->
<td>3i</td>   <!-- i × 3 -->
<td>4i</td>   <!-- i × 4 -->
<td>5i</td>   <!-- i × 5 -->
<td>6i</td>   <!-- i × 6 -->
<td>7i</td>   <!-- i × 7 -->
<td>8i</td>   <!-- i × 8 -->
<td>9i</td>   <!-- i × 9 -->
</tr>
 ⇒
[段の先頭]
<tr>
[iの段の個々の積]
<td>i</td>    <!-- i × 1 -->
<td>2i</td>   <!-- i × 2 -->
<td>3i</td>   <!-- i × 3 -->
<td>4i</td>   <!-- i × 4 -->
<td>5i</td>   <!-- i × 5 -->
<td>6i</td>   <!-- i × 6 -->
<td>7i</td>   <!-- i × 7 -->
<td>8i</td>   <!-- i × 8 -->
<td>9i</td>   <!-- i × 9 -->
[段の末尾]
</tr>

この部分も，[iの段の個々の積] の各行を，反復を用いて出力することとして，その反復の前後で[段の先頭] と[段の末尾]を出力するようにすればよい． （流れ図(b)）

したがって，プログラム全体の流れとしては，九九の各段を出力するための反復の中（反復パートの中）に， 各段の個々の積を出力するための反復を入れ子にした，二重反復の構造になる． （流れ図(c)）

〔おまけ〕