php 計算結果を表にする
完成図
- まず、PHPのファイルを作るときは、xamppでapacheを立ち上げておく。
- 暗算できてしまう計算であっても、すべての値を変数にする。
- 数字も変数に置き換えてから計算してもらう。
- phpの変数は、「$変数名」と記述する。「$」と「変数名」のあいだにスペースはない。
- var宣言ではない。だから変数を使って計算するときは必ず前に「$」がついてくる。
<?php
$a=5;
$b=3;
$plus=$a+$b;
$minus=$a-$b;
$multiple=$a*$b;
$surplus=$a%$b;
?>
- htmlのテーブルの復習。
- <tr>○○○○○</tr> table row テーブルの「行」
- 先頭の行は、table header 「th」
- 先頭行の記述、<tr><th>計算式</th><th>計算結果</th></tr>
- 続く行は、table data 「td」
- <tr><td>5+3</td><td><?php $plus; ?></td></tr>
- dreamweaverだとphp変数は青色。
- 「echo」と「変数」の間にはスペースが必要。
<?php
$a=5;
$b=3;
$plus=$a+$b;
$minus=$a-$b;
$multiple=$a*$b;
$surplus=$a%$b;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tableを作る</title>
<style>
body, html, table, tr, th, td, h1{
margin: 0;
padding: 0;
line-height: 1.0;
}
#container{
width: 400px;
margin: 50px auto;
text-align: center;
}
h1{
margin-bottom: 2rem;
}
table{
width: 400px;
border: 1px solid #777;
border-collapse: collapse;
font-size: 24px;
text-align: center;
}
tr, th, td{
border: 1px solid #777;
}
th, td{
line-height: 1.6;
}
th{
background: #CCC;
}
</style>
</head><body>
<div id="container">
<h1>計算結果を表にする</h1><table>
<tr><th>計算式</th><th>計算結果</th></tr>
<tr><td>5+3</td><td><?php echo $plus; ?></td></tr>
<tr><td>5-3</td><td><?php echo $minus; ?></td></tr>
<tr><td>5×3</td><td><?php echo $multiple; ?></td></tr>
<tr><td>5÷3の余り</td><td><?php echo $surplus; ?></td></tr>
</table>
</div>
</body>
</html>