■前置き
- これからPHPを始めようかなと思っている人むけです
- 基本的にPHPでやる意味はない
- HTMLでイイじゃんとかツッコミは御法度
- 下記ソースはフリーですが自己責任でご利用ください。
- ソースコードのダブルクォーテーションが全角になってる箇所がありますが基本的に半角に直して下さい。（すいません、どうもシステム上、変換されてしまうらしい）
■PHPソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<title>九九表</title>
<style type="text/css">
table td,
table th {
width:2em;
text-align:right;
border:1px solid black;
}
table {
border-collapse:collapse;
}
</style>
</head>
<body>
<h4>普通に書いてみると...</h4>
<table>
<?php
for($i=1; $i<10; $i++){
print('<tr>');
for($h=1; $h<10; $h++){
print('<td>' . $i*$h . "</td>\n");
}
print('</tr>');
}
?>
</table>
<h4>発展させると…</h4>
<table>
<?php
for($i=1; $i<10; $i++){
print('<tr>');
for($h=1; $h<10; $h++){
if($h == 1 || $i == 1){
print('<th style="background-color:pink;">' . $i*$h . "</th>\n");
}
else{
print('<td>' . $i*$h . "</td>\n");
}
}
print('</tr>');
}
?>
</table>
</body>
</html>
■画面表示
普通に書いてみると…
※仕様上、多少変更してます。
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 |
| 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 |
| 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 |
| 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 |
| 6 | 12 | 18 | 24 | 30 | 36 | 42 | 48 | 54 |
| 7 | 14 | 21 | 28 | 35 | 42 | 49 | 56 | 63 |
| 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 |
| 9 | 18 | 27 | 36 | 45 | 54 | 63 | 72 | 81 |
発展させると…
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|---|---|---|---|---|---|---|---|
| 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 |
| 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 |
| 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 |
| 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 |
| 6 | 12 | 18 | 24 | 30 | 36 | 42 | 48 | 54 |
| 7 | 14 | 21 | 28 | 35 | 42 | 49 | 56 | 63 |
| 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 |
| 9 | 18 | 27 | 36 | 45 | 54 | 63 | 72 | 81 |
■生成されるHTMLソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<title>九九表</title>
<style type="text/css">
table td,
table th {
width:2em;
text-align:right;
border:1px solid black;
}
table {
border-collapse:collapse;
}
</style>
</head>
<body>
<h4>普通に書いてみると...</h4>
<table>
<tr><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>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>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>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>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>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>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>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>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>
<h4>発展させると...</h4>
<table>
<tr><th style="background-color:pink;">1</th>
<th style="background-color:pink;">2</th>
<th style="background-color:pink;">3</th>
<th style="background-color:pink;">4</th>
<th style="background-color:pink;">5</th>
<th style="background-color:pink;">6</th>
<th style="background-color:pink;">7</th>
<th style="background-color:pink;">8</th>
<th style="background-color:pink;">9</th>
</tr><tr><th style="background-color:pink;">2</th>
<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 style="background-color:pink;">3</th>
<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 style="background-color:pink;">4</th>
<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 style="background-color:pink;">5</th>
<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 style="background-color:pink;">6</th>
<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 style="background-color:pink;">7</th>
<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 style="background-color:pink;">8</th>
<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 style="background-color:pink;">9</th>
<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>
■一言
下の方は$hもしくは$iが一定条件の時に違うタグ、スタイルが適用されるようになっている。