webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

php 計算結果を表にする

 完成図

f:id:ohta-felica:20160705221001p:plain

  • まず、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」と「変数」の間にはスペースが必要。

f:id:ohta-felica:20160705215908p:plain

<?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>