PHP - Multiplication Table

How to Generate Multiplication Table with PHP and HTML

How to Generate Multiplication Table with PHP and HTML


In this PHP tutorial, we will see how to create Multiplication Tables with HTML and PHP.
Users can specify the number of rows and columns they want in the multiplication table.



Project Source Code:



<?php

// Initialize an empty string variable to hold the HTML table code
$table = "";

// Check if the 'submit' button has been clicked
if(isset($_POST['submit'])){
// Filter and validate the number of rows and columns entered by the user
$rows = filter_input(INPUT_POST, 'rows', FILTER_VALIDATE_INT);
$cols = filter_input(INPUT_POST, 'cols', FILTER_VALIDATE_INT);

// If both the number of rows and columns are valid integers
if($rows && $cols){
// Start building the HTML table code
$table .= "<table>";
// Loop through each row of the table
for($i = 1; $i <= $rows; $i++)
{
// Add a new row to the HTML table
$table .= "<tr>";

// Loop through each column of the current row
for($j = 1; $j <= $cols; $j++)
{
// If this is the first row, add a table header with the column number
if($i === 1)
{
$table .= "<th>".$j."</th>";
}
// Otherwise, add a table data cell with the product of the row and column numbers
else
{
$table .= "<td>".$i * $j."</td>";
}
}

// Close the current row of the HTML table
$table .= "</tr>";
}

// Close the HTML table
$table .= "</table>";

}
}

?>

<!DOCTYPE html>
<html>
<head>
<title>Multiplication</title>
<meta charset="UTF-8">

<style>

body{ font-family: 'Arial', 'sans serif'; font-size:18px; line-height:1.5;
color:#333; background-color:#f5f5f5;}
#container{ width:90%; margin:20px auto; padding:20px; }

form{ text-align:center; }

label{ margin-bottom:10px; color:$666; }

input[type="number"]{ width:20%; padding:10px; border:none; border-radius:5px;
margin-bottom:20px; margin-right:20px; box-sizing:border-box; }
input[type="submit"]{ background-color:#007aff; color:#fff; padding:10px 20px;
border-radius:5px; border:none; cursor:pointer;
margin-bottom:20px; transition:all 0.3s ease; }
input[type="submit"]:hover{ background-color:#0062cc; }

table{ border-collapse:collapse; width:100%; margin-top:20px; margin-bottom:30px; }

th, td{ border:1px solid #ddd; padding:10px; text-align:center; }

th{ background-color:#007aff; color:#fff; }

</style>

</head>
<body>

<div id="container">

<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<label for="rows"> Number of Rows:</label>
<input type="number" name="rows" id="rows" mini="1" max="100">
<label for="cols"> Number of Columns:</label>
<input type="number" name="cols" id="cols" mini="1" max="100">
<input type="submit" name="submit" value="Create Table">
</form>

<?php echo $table; ?>

</div>

</body>
</html>




Code Explanation:

Processing User Input: Once the user submits their input, PHP comes into action. It filters and validates the input to ensure that it's a valid number of rows and columns. If the input is valid, the PHP script generates an HTML table that represents the multiplication table.

Displaying the Multiplication Table: The generated table includes row and column headers, with the individual multiplication results arranged in the table cells. 
Users can easily see the products of different numbers.



OUTPUT:
PHP Multiplication Table





Aucun commentaire:

Enregistrer un commentaire