プログラム初心者の超簡単なPHP
■前置き
- これから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が一定条件の時に違うタグ、スタイルが適用されるようになっている。
トラックバック URL :
コメント (0)
