Multiplication Table in PHP taking Number and Limit from another Form and CSS Styling

Here the user will enter the number and the limit upto which he wants the table, based on that the Multiplication Table of that number gets generated.

We need to create a HTML Form where the user will enter the values.

MultiplicationTableForm.html

<html>
<head>
<title>Multiplication Table Generator Form</title>

<style type="text/css">
table.tab
	{
	border: 1px solid blue;
	text-align: center;
	border-collapse:collapse;
	background: #E0FFFF;
   }

tr.head{font-family: Tahoma,Arial; font-size: 15pt; font-style: normal; font-weight:; color: white;
text-align: center; background-color:#00CED1}

tr.bod{font-family:Tahoma, Arial; font-size: 11pt; font-style: normal; font-weight: ; color:black}

input.sub{font-family:Tahoma, Arial; font-size: 12pt; font-style: normal; font-weight: ; color:black}
</style>

</head>
<body>



<form name="MultiTableForm" method="POST" action="MultiTable.php">

	<table border='0' width='400' cellspacing='10' cellpadding='05' align='center' class='tab'>
		<tr class='head'>
			<td colspan='2' align='center'>Multiplication Table Generator

</td>
		</tr>

		<tr class='bod'>
			<td>Number:</td>
			<td><input type="text" name="num" id="num" />1-100</td>
		</tr>

		<tr class='bod'>
			<td>Upto:</td>
			<td><input type="text" name="upto" id="upto" />1-100</td>
		</tr>

		<tr>
			<td colspan='2' align='center'>


			<input type="submit" name="submit" value="Submit" class='sub' />&nbsp;&nbsp;
			<input type="reset" name="reset" value="Reset Fields" class='sub' />
			</td>
		</tr>
	</table>
</form>

</body>
</html>

Snapshot of the Form

MultiTableHTMLForm1

The PHP File will take the values and generate the Form. Appropriate validations are performed here.

MultTable.php

<html>
<head>
<title>Multiplication Table</title>

<style type="text/css">
	/*Style for Table*/
	table
	{
	border-collapse:collapse; width:0%;
	}

	td
	{
	height:35px;
	}
	/*Style for Table Header*/
	td.head{font-family: Tahoma; font-size: 15pt; font-style: normal; color: white;
    text-align: center; background: #00CED1;}

	/*Style of other Table Elements*/
	table, th, td
	{
	font-family:Tahoma, Arial; font-size:11pt;
	color:black; font-style: normal; font-weight: normal;
	border: 1px solid blue;
	text-align: center;
	}

</style>

</head>

<body>

<?php

$num = $_POST['num'];
$upto = $_POST['upto'];

$errorFlag = 0;
$errorString = "Invalid Arguments: 
";

if ($num <1 || $num >100) {
		$errorFlag = 1;
		$errorString = $errorString." - Number should be between 1 to 100 
";
	}
	if ($upto < 1 || $upto > 100) {
		$errorFlag = 1;
		$errorString = $errorString." - Limit should be between 1 to 100";
	}

if ($errorFlag == 0) {

echo "<table align='center'>";

echo "<tr>";
echo "<td colspan='5' class='head'>
		Multiplication Table of $num upto $upto
	</td>";
echo "<tr>";

for($i=1; $i<=$upto; $i++)
{
	if($i%2 == 0)
	{
		echo "<tr bgcolor='PowderBlue'>";
	}

	else
	{
		echo "<tr bgcolor='LightCyan'>";
	}

	echo "<td>$num</td>";

	echo "<td>x</td>";

	echo "<td>$i</td>";

	echo "<td>=</td>";

	echo "<td>".$num*$i."</td>";

	echo "</tr>";

}//for loop ends

echo "</table>";
}

else
{
  echo "<div align='center'>";
  echo "$errorString";
  echo "


";
  echo "<a href='MultiTableForm.html'>Back</a>";
  echo "</div>";
}
?>

</body>

</html>

Snapshot of the o/p

User enters the number and limit upto which he wants a Table

MultiTableHTMLForm

Multiplication Table gets generated.

MultiTableGenerated

So Here it comes. Very Useful Program for any School kid. 😀 and a great learning tool for PHP Beginners. 😀

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s