webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

PHP forを使用して、九九表を作成する。

PHP forを使用して、九九表を作成してみましょう。

出来上がり例

f:id:kaoru01-05:20140526184641p:plain

 

では、入力してみましょう。

1. 縦軸と横軸の1~9を表示。

f:id:kaoru01-05:20140526190056p:plain

<body>
<h1>九九表</h1>
<table>
<tr><th>&nbsp;</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>
<?php
for ( $i = 1; $i <= 9; $i++ ) {

  print '<tr>';
  print '<th>' . $i . '</th>';
  print '</tr>' . "\n";
}
?>
</table>
</body>

 

 

2. 計算結果を表示。

f:id:kaoru01-05:20140526191723p:plain

 

<body>

<h1>九九表</h1>
<table>
<tr><th>&nbsp;</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>
<?php
for ( $i = 1; $i <= 9; $i++ ) {

  print '<tr>';
  print '<th>' . $i . '</th>';

    for ( $j = 1; $j <= 9; $j++ ) {
      print '<td>' . $i*$j . '</td>';
    }
  print '</tr>' . "\n";
}
?>
</table>
</body>

 

 

<style>

<style>
body {
  font-family:
  "Hiragino Kaku Gothic Pro N",
  Meiryo,
  sans-serif;
}
table {
  border-collapse: collapse;
  border: 1px solid coral;
}
th, td {
  width: 50px;
  border: 1px dotted coral;

}
th {
  background: lightpink;
}
td {
  text-align: center;
}
</style>

 

お疲れ様でした。