page is available here: http://macrorevolution.com/calculators/bmr/
How do I go about creating space after my input[text] box. For example, I want to create 1px spacing between the input box and "Years","ft","In"."k/cal per day".
I tried using .ipadding but that didn't work so ignore it. Also, how can I shift all of the input boxes closer to "Age", "Height", "weight"?
I am new to html/css.
<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
$agev = $_POST['agev'];
$feetv = $_POST['feetv'];
$inchesv = $_POST['inchesv'];
$weightv = $_POST['weightv'];
$sex = $_POST['sex'];
$totalheightv = $inchesv + ($feetv*12);
$heightcm = $totalheightv*2.54;
$weightkg = $weightv/2.2;
if($sex=='male') $answer = round((66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev)),0);
if($sex=='female') $answer = round((665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev)),0);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Basal Metabolic Rate Calculator</title>
<style>
table {
border: 30px;
font-size:13px;
font-family: 'PT Sans', sans-serif;
background-color:#FFFFFF;
}
tr.spaceUnder > td
{
padding:0em 1em 1em 0em;
}
p.ss {
font-size:30px;
}
.ipadding {
padding:1px;
}
</style>
</head>
<body>
<div class="box pt20">
<p class="ss">MacroRevolution BMR Calculator</p><br>
<table width='80%' style="margin: 0 auto;">
<tr class="spaceUnder">
<td colspan="4">
BMR = Basal Metabolic Rate (similar to RMR = Resting Metabolic Rate). Your BMR represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
</td>
</tr>
</table>
<form method='post' action=''>
<table width='80%' style="margin: 0 auto;">
<tr class="spaceUnder">
<td>Age:</td>
<td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
</tr>
<tr class="spaceUnder">
<td>Height:</td>
<td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<p> </p>
<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
</tr>
<tr class="spaceUnder">
<td>Weight:</td>
<td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
</tr>
<tr class="spaceUnder">
<td colspan="2"><input type='radio' name='sex' value='male'>Male
<input type='radio' name='sex' value='female'>Female</td>
</tr>
<tr class="spaceUnder">
<td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
</tr>
<tr class="spaceUnder">
<td colspan="2">Your BMR is <input type='text' style="width: 50px;" value='<?php echo $answer?>' />k/cal per day </td>
</tr>
</table>
</form>
<table border='0' width='80%' style="margin: 0 auto;">
<td colspan="4">
Formula for BMR
If you want to manually calculate your BMR, use the (Harris-Benedict formula) <br> below. <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>
W = Weight in kilograms (lbs/2.2)<br>
H = Height in centimeters (inches x 2.54)<br>
A = Age in years <br><br><br>
</td>
</table>
</div>
</body>
</html>
put a margn on the right side.
input {
margin-right:5px;
}
So many ways, one is as:
input[type="text"] {margin-right:1px;}
input[type="radio"] {margin-right:5px;}
.spaceUnder td:first-child {width:50px;}
Use :
input{
margin-right:1px;
}
For bringing textboxes near to the label put them in the same td.
See this Fiddle
just follow the image and create a new css rule and update css rule.Hope it will be helpful!
Step: 1
Step:2
Related
How to connect to the database it keeps saying
Fatal error: Uncaught Error: Class "msqli" not found in C:\xampp\htdocs\5Dec2021\Order.php:90 Stack trace: #0 {main} thrown in C:\xampp\htdocs\5Dec2021\Order.php on line 90
It works fine when I go to the http://localhost/5Dec2021/Menu.html I can click on the buttons and answer the textboxes Herebut after i submit it become like This
THIS IS MY HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<form method="post" action="Order.php">
<table border="1" style="width: 100%">
<tr>
<th colspan="2" style="height: 25px">Pizza Shop 2.0</th>
</tr>
<tr>
<td style="width: 310px">Name:</td>
<td>
<input name="Text1" id="Name" type="text" style="width: 299px" /></td>
</tr>
<tr>
<td style="width: 310px">Pizza Topping:</td>
<td><input name="Checkbox1[]" type="checkbox" id="supreme"value="Supreme" />Supreme<br>
<input name="Checkbox1[]" type="checkbox" id="vegetarian" value="Vegetarian" />Vegetarian<br>
<input name="Checkbox1[]" type="checkbox" id="haiwaian" value="Haiwaian" />Haiwaian
</td>
</tr>
<tr>
<td style="width: 310px">Pizza Sauce:</td>
<td><select name="Select1" id="dropdown" style="width: 296px">
<option selected="selected" value="0">-</option>
<option value="Ketchup">Ketchup</option>
<option value="Bolognese">Bolognese</option>
<option value="CheeseSpread">Cheese Spread</option>
</select></td>
</tr>
<tr>
<td style="height: 23px; width: 310px;">Optional Extra:</td>
<td style="height: 23px">
<input name="Checkbox2[]" type="checkbox" id="extra" value="Extra cheese" />Extra Cheese <br>
<input name="Checkbox2[]" type="checkbox" id="gluten" value="Gluten free base" />Gluten Free Base
</td>
</tr>
<tr>
<td style="width: 310px" colspan="2">Delivery Instruction:<br>
<textarea name="TextArea1" style="width: 608px; height: 127px"></textarea></td>
</tr>
<tr>
<td style="width: 310px" colspan="2"><input name="submit" type="submit" value="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
THIS IS MY PHP
<?php
//variable declaration
$name=$_POST['Text1'];
$p=0;
$p2=0;
if (isset($_POST['Checkbox1']))
{
$top=$_POST['Checkbox1'];
$c=count($top);
for ($i=0; $i<$c;$i++)
{
If($top[$i]=="Supreme")
{
$p=$p+15;
}
If($top[$i]=="Vegetarian")
{
$p=$p+11;
}
If($top[$i]=="Haiwaian")
{
$p=$p+12;
}
}
}
if (isset($_POST['Select1']))
{
$sauce=$_POST['Select1'];
If($sauce=="0")
{
$p2=$p2+0;
}
If($sauce=="Ketchup")
{
$p2=$p2+4;
}
If($sauce=="Bolognese")
{
$p2=$p2+3;
}
If($sauce=="CheeseSpread")
{
$p2=$p2+5;
}
}
$p3=0;
if (isset($_POST['Checkbox2']))
{
$extra=$_POST['Checkbox2'];
$c=count($extra);
for ($i=0; $i<$c; $i++)
{
If($extra[$i]=="Extra cheese")
{
$p3=$p3+10;
}
If($extra[$i]=="Gluten free base")
{
$p3=$p3+5;
}
}
}
$delivery =$_POST['TextArea1'];
$total=0;
$total=$p+$p2+$p3;
$top=implode(" ",$_POST['Checkbox1']); // HAVE TO IMPLODE IF CAN BE MULTIPLE VALUES.
$extra=implode(" ",$_POST['Checkbox2']);
date_default_timezone_set("Asia/Kuala_Lumpur");
$date=date("d-m-Y H:i:sa");
echo "<h1>Billing statement</h1>";
echo "<br>";
echo "Hi ".$name;
echo "<br>";
echo "Total bill RM: ".$total;
//database configuration (pizzatime is the folder of the table name)
$con= new msqli("localhost","root","","pizzatime");
//is the connection working? connection error
if($con->connect_error)
{
die("Warning!Connection Failed!".$con->connect_error);
}
//if connection is ok (orderpizza is the table name, and INSERT INTO IS THE COLUMN NAMES WHILE THE VALUES ARE THE CONTAINERS OF THE BUTTONS/CHECKBOX/...
$database="INSERT INTO orderpizza(Time,Name,Top,Sauce,Extra,Delivery,Total) VALUES
('$date','$name','$top','$sauce','$extra','$delivery','$total')";
if($con->query($database)===TRUE)
{
echo "<br>";
echo "<alert>'Successfully save into the database'</alert>;";
}
else
{
echo "Error".$con->connect_error;
}
$con->close();
?>
This is database I created in localhost phpmyadmin
I had to change my Xampp port to 4306 because it wasn't working so I have to add :4306 next to the localhost
//database configuration (pizzatime is the folder of the table name)
$con = new msqli("localhost**:4306**","root","","pizzatime");
I have the following simple code
<tr>
<td>20 Apr 1987, 06:00-07:00</td>
<td> <input type=text id=rainfall1 value="28.95">mm</input> </td>
</tr>
<tr>
<td>20 Apr 1987, 07:00-08:00</td>
<td> <input type=text id=rainfall2 value="38.87">mm</input> </td>
</tr>
<tr>
<td>20 Apr 1987, 08:00-09:00</td>
<td> <input type=text id=rainfall3 value="14.89">mm</input> </td>
</tr>
which produces
this table.
I want to add a third
<td> ... here draw a bar ... </td>
cell which draws a bar that corresponds to the values of rainfall and which updates automatically when the values in the input change. What would be the easiest way to do this? Code snippets are highly appreciated. The input elements are part of a bigger form.
you can use jqueryUI for this matter. try to download these required jqueryUI files and follow the code below:
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>progress bar in table example</title>
<link href="jquery-ui.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
</style>
</head>
<body>
<h1>progress bar in table example</h1>
<table>
<tr>
<td>20 Apr 1987, 06:00-07:00</td>
<td> <input type=text id=rainfall1 value="28.95">mm</input> </td>
<td></td>
</tr>
<tr>
<td>20 Apr 1987, 07:00-08:00</td>
<td> <input type=text id=rainfall2 value="38.87">mm</input> </td>
<td></td>
</tr>
<tr>
<td>20 Apr 1987, 08:00-09:00</td>
<td> <input type=text id=rainfall3 value="14.89">mm</input> </td>
<!--here is the progress bar div element-->
<td><div id="progressbar" style="width:200px"></div></td>
</tr>
</table>
<button id="plusBtn">+10</button>
<button id="minusBtn">-10</button>
<label id="progressLabel">label</label>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
var progressVal = 20;
//these minus and plus functions are just for an interactive progress bar example.
//you don't have to use them
$("#plusBtn").click(function(){
progressVal += 10;
$("#progressLabel").html(progressVal.toString());
console.log(progressVal);
$( "#progressbar" ).progressbar({
value: progressVal
});
});
$("#minusBtn").click(function(){
progressVal -= 10;
$("#progressLabel").html(progressVal.toString());
console.log(progressVal);
$( "#progressbar" ).progressbar({
value: progressVal
});
//the progressbar() function updates the bar's value
});
$( "#progressbar" ).progressbar({
value: progressVal
});
</script>
</body>
</html>
You can simply make a div inside of your td with some CSS styling. For example, use this:
.bar{
height: 20px;
position: relative;
background-color: lightblue;
}
Then make the HTML like this:
<table id=table>
<tr>
<td>20 Apr 1987, 08:00-09:00</td>
<td> <input type=text id=rainfall0 value="14.89">mm</input> </td>
<td><div class="bar" id="bar0"></div></td>
</tr>
</table>
Now use this JavaScript to make the height of the bar relative tot the value of the input:
var amnt = document.getElementById("table").rows.length;
for(i = 0; i < amnt; i++){
var element = document.getElementById("rainfall" + i);
rainfall = element.value;
var el = document.getElementById("bar" + i);
el.style.width = rainfall;
}
This should work, have not tested it yet, will do so now.
How do I make a radio button automatically check when i press a radio button?
I have 2 tables, when i click a radio button in table1, the radio button in table2 should also be checked.
here is the radio button code for table1
<tr>
<td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="COD") echo "checked";?> value="COD"></td>
<td><img src="img/Cash on Delivery.jpg" alt="COE" class="picture" height="90" width="125"/></td>
<td><p>This service is only available for Meto Manila and Metro Cebu.<p>
<div id='price'> Additional ₱180 </div></td>
</tr>
and here the radio button in table2 that needs to be automatically checked when i check the radio button in table1
<tr>
<td><input type="radio" name="carrier" <?php if (isset($payment) && $payment=="COD") echo "checked";?> value="COD"></td>
<td><img src="img/Cash on Delivery.jpg" height="90" width="125"/></td>
<td><p>Pay with your Cash on Delivery (COD)<br>Choose this option if you have selected COD under shipping. Otherwise, choose other options for payment.<p></td>
</tr>
Here are the full codes.
if(isset($_GET['command']) && $_GET['command']=='update'){
$first_name=$_SESSION['first_name'];
$email=$_SESSION['email'];
$home_address=$_SESSION['home_address'];
$mobile_phone=$_SESSION['mobile_phone'];
$carrier=$_REQUEST['carrier'];
$payment=$_REQUEST['payment'];
$result=mysql_query("insert into customers values('','$first_name','$email','$home_address','$mobile_phone','$carrier','$payment')");
$customerid=mysql_insert_id();
date_default_timezone_set("Asia/Hong_Kong");
$date=date('Y-m-d h:i:s');
$result=mysql_query("insert into orders values('','$date','$customerid')");
$orderid=mysql_insert_id();
$max=count($_SESSION['cart']);
for($i=0;$i<$max;$i++){
$pid=$_SESSION['cart'][$i]['productid'];
$q=$_SESSION['cart'][$i]['qty'];
$price=get_prod_price($pid);
mysql_query("insert into order_detail values ($orderid,$pid,$q,$price)");
}
header('refresh: 0; url=homeframe.html'); // to be redirected
exit(); // para mawala ang puta, tumigil ang script.
}
// else if(isset($_REQUEST['success']) && $_REQUEST['success']=='1'){
// header('refresh: 0; url=samplebrand.php');
// $message = "Thank you for buying, You will now be redirected";
// echo("<script type='text/javascript'>alert('$message');</script>");
// }
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Billing Info</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript">
function validate(){
var f=document.form1;
f.command.value='update';
f.submit();
alert("Order submitted");
}
$('#super').change(function(){
var radio1 = $('input:radio[name=carrier]:checked').val();
if(radio1 == 'on'){
$( "input:radio[name=carrier2]" ).prop( "checked", true ).checkboxradio( "refresh" );
}
});
</script>
<style>
#price{
color:red;
font-size:20px;
padding-right: 10px;
font-family: "Times New Roman", Times, serif;
float:right;
}
td{
display:block;
}
</style>
</head>
<body>
<form name="form1" onsubmit="return validate()">
<input type="hidden" name="command" />
<div align="center">
<h1 align="center">Shipping and Payment</h1>
<table border="0" cellpadding="2px">
<tr><td>Order Total:</td><td>₱ <?php echo get_order_total()?></td><td> </td>
</tr>
</table>
<center><h1>Shipping Method</h1></center>
<form method="post">
<table width="900" border="0" align="center" cellpadding="2" cellspacing="0" id='center'>
<tr>
<td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="LBC") echo "checked";?> value="LBC"></td>
<td><img src="img/LBC.jpg" alt="LBC" class="picture"/></td>
<td><p>The Shipping takes 1-2 days for NCR and 2-3 days for any provincial.<p>
<div id='price'> Additional ₱250 </div></td>
</tr>
<tr>
<td><input type="radio" id="super" name="carrier" <?php if (isset($carrier) && $carrier=="COD") echo "checked";?> value="COD"></td>
<td><img src="img/Cash on Delivery.jpg" alt="COE" class="picture" height="90" width="125"/></td>
<td><p>This service is only available for Meto Manila and Metro Cebu.<p>
<div id='price'> Additional ₱180 </div></td>
</tr>
<tr>
<td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="Personal") echo "checked";?> value="Personal"></td>
<td><img src="img/buybranded2.jpg" alt="buybranded" class="picture"/></td>
<td><p>The Shipping takes 2-3 days after processing for NCR and 3-5 days for any provincial.<p>
<div id='price'> Additional ₱100 </div></td>
</tr>
<tr>
<td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="NextDayDelivery") echo "checked";?> value="NextDayDelivery"></td>
<td><img src="img/NextdayDelivery.jpg" alt="NextDayDelivery" class="picture"/></td>
<td><p>The Shipping takes 1-2 days for NCR and 2-3 days for any provincial.<p>
<div id='price'> Additional ₱150 </div></td>
</tr>
<tr>
<td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="SameDayDelivery") echo "checked";?> value="SameDayDelivery"></td>
<td><img src="img/Same day Delivery.jpg" alt="SameDayDelivery" class="picture"/></td>
<td><p>Available only for NCR. Get your sporting good/s the same day you purchase the item. Cutoff is 12noon.<p>
<div id='price'> Additional ₱250 </div></td>
</tr>
<tr>
<td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="PickUp") echo "checked";?> value="PickUp"></td>
<td><img src="img/Pick-up.jpg" alt="Pick-Up" class="picture"/></td>
<td><p>Office hours: 10:00 am to 6:00 pm<p>
<div id='price'> Free!! </div></td>
</tr>
</table>
<br>
<br>
<center><h1>Payment Method</h1></center>
<table width="900" border="0" align="center" cellpadding="2" cellspacing="0" id='centerdown'>
<tr>
<td><input type="radio" name="payment" <?php if (isset($payment) && $payment=="BPI") echo "checked";?> value="BPI"></td>
<td><img src="img/BPI.jpg"></td>
<td><p>Pay by BPI bank deposit (we need confirmation of payment through email.)<p></td>
</tr>
<!--
<tr>
<td><input type="radio" name="payment" <?php if (isset($payment) && $payment=="PayPal") echo "checked";?> value="PayPal"></td>
<td><img src="img/paypal.gif"></td>
<td><p>Pay with your PayPal account, credit card (CB, Visa, Mastercard...), or private credit card.<p></td>
</tr>
-->
<tr>
<td><input type="radio" name="payment" <?php if (isset($payment) && $payment=="PickUp") echo "checked";?> value="PickUp"></td>
<td><img src="img/cashondelivery.gif"></td>
<td><p>Pick up. You have 5 days reservation period. You pay for the merchandise upon pick-up<p></td>
</tr>
<tr>
<td><input type="radio" name="carrier2" <?php if (isset($payment) && $payment=="COD") echo "checked";?> value="COD"></td>
<td><img src="img/Cash on Delivery.jpg" height="90" width="125"/></td>
<td><p>Pay with your Cash on Delivery (COD)<br>Choose this option if you have selected COD under shipping. Otherwise, choose other options for payment.<p></td>
</tr>
</table>
<table>
<tr><td><!--<input type="submit" value="Place Order"/> --> <input type="button" value="Confirm Order" onclick="window.location='quotation.php?'"></td></tr>
</table>
</form>
</div>
</form>
</body>
</html>
You could achieve this using JQuery. Assuming your forms have ids of form1 and form2:
<script>
$(document).ready(function () {
$("#form1 input[name='carrier']").click(function () {
if (this.checked) {
$("#form2 input[name='carrier']").prop("checked", true);
} // end if checked
});
}); // end doc ready
</script>
You will also need to include a reference to the JQuery library, before adding the aforementioned code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Please note that this will only update the form2 carrier radio button when the form1 button is clicked, and not the other way around.
See this JSFiddle as an example.
i slightly change your second radio name, and you can automatically set it with jquery like below :
$('input:radio[name=carrier]').change(function(){
var radio1 = $('input:radio[name=carrier]:checked').val();
if(radio1 == 'on'){
$( "input:radio[name=carrier2]" ).prop( "checked", true ).checkboxradio( "refresh" );
}
});
DEMO
I'm trying to align a calculator I coded to fit onto a web page but am looking for better html practices to achieve my task. For example, there are 155px margins on the left and right and I want to fit my table between those margains.
Here is the page I am trying to fix: http://macrorevolution.com/bmr/
Here is an example of my table settings I am using:
<?php
/*
Template Name: bmrcalc
*/
?>
<?php get_header(); ?>
<?php $al_options = get_option('al_general_settings');?>
<!-- Title -->
<div class="box pt20">
<!-- Title -->
<div class="headertext">
<?php the_title() ?>
<?php $headline = get_post_meta($post->ID, "_headline", $single = false);?>
<?php if(!empty($headline[0]) ):?>
<span><?php echo $headline[0] ?></span>
<?php endif?>
</div>
<div class="clearsmall"></div>
<!-- Promo text -->
<?php $promo = get_post_meta($post->ID, "_promo", $single = false);?>
<?php if(!empty($promo[0]) ):?>
<div class="calloutcontainer">
<div class="container_12">
<div class="grid_12">
<?php echo do_shortcode($promo[0]);?>
</div>
</div>
</div>
<?php endif?>
<div class="container_12">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
</div>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////-->
<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
$agev = $_POST['agev'];
$feetv = $_POST['feetv'];
$inchesv = $_POST['inchesv'];
$weightv = $_POST['weightv'];
$sex = $_POST['sex'];
$totalheightv = $inchesv + ($feetv*12);
$heightcm = $totalheightv*2.54;
$weightkg = $weightv/2.2;
if($sex=='male') $answer = 66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev);
if($sex=='female') $answer = 665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basal Metabolic Rate Calculator</title>
</head>
<body>
<form method='post' action=''>
<table border='5' width='100%' class="table" style="margin: 0 auto;" bgcolor="FFFFFF">
<tr class="calcheading">
<td colspan="2">MacroRevolution BMR Calculator</td>
</tr>
<tr class="calcrow">
<td>Age:</td>
<td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
</tr>
<tr class="calcrow2">
<td>Height:</td>
<td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
</tr>
<tr class="calcrow">
<td>Weight:</td>
<td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
</tr>
<tr class="gender">
<td colspan="2"><input type='radio' name='sex' value='male'>Male
<input type='radio' name='sex' value='female'>Female</td>
</tr>
<tr class="submit">
<td colspan="2"><input type='submit' value='Calculate'/></td>
</tr>
<tr class="calcrow">
<td colspan="2">Your BMR is <span style="background-color: #00CC33"><?php echo $answer?></span></td>
</tr>
</table>
</form>
<table border='0' width='100%' class="table" style="margin: 0 auto;">
<td colspan="4">
<h4 style="background: #99FF99;">
<strong>BMR = Basal Metabolic Rate</strong> (similar to RMR = Resting Metabolic Rate). Your BMR represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
</h4>
</td>
</table>
<table border='0' width='50%' class="table" align="center" style="margin: 0 auto;">
<td colspan="4">
<h2 style="background: #99FF66;">Formula for BMR</h2>
<h4 style="background: #99FF66;">
If you want to manually calculate your BMR, use the (Harris-Benedict formula) <br> below. <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>
W = Weight in kilograms (lbs/2.2)<br>
H = Height in centimeters (inches x 2.54)<br>
A = Age in years
</h4>
</td>
</table>
</body>
</html>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////-->
<?php get_footer(); ?>
Instead of
width = '50%'
and
margin-left: 155px;
margin-right: 155px;
use the following style for the table with class='table':
width = '100%'
and
margin: 0 auto;
I'm trying to tamper with my html table settings to set borders but I think my syntax is wrong. I've looked around online and tried multiple things with no success. Any suggestions?
For example, this code is applied to the first table but does not appear correctly on page.
<table BORDER="30" CELLPADDING="10" CELLSPACING="3" BORDERCOLOR="00FF00" width='80%' style="margin: 0 auto;">
</table>
HTML code is applied here: http://macrorevolution.com/calculators/bmr/
The only table settings that seem to work are "width='80%' style="margin: 0 auto;""
<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
$agev = $_POST['agev'];
$feetv = $_POST['feetv'];
$inchesv = $_POST['inchesv'];
$weightv = $_POST['weightv'];
$sex = $_POST['sex'];
$totalheightv = $inchesv + ($feetv*12);
$heightcm = $totalheightv*2.54;
$weightkg = $weightv/2.2;
if($sex=='male') $answer = 66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev);
if($sex=='female') $answer = 665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basal Metabolic Rate Calculator</title>
</head>
<body>
<div class="box pt20">
<table BORDER="30" CELLPADDING="10" CELLSPACING="3" BORDERCOLOR="00FF00" width='80%' style="margin: 0 auto;">
<td colspan="4">
<h4 style="background: #99FF99;">
<strong>BMR = Basal Metabolic Rate</strong> (similar to RMR = Resting Metabolic Rate). Your BMR represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
</h4>
</td>
</table>
<form method='post' action=''>
<table border='5' width='80%' font-family:Georgia; font-size:1; class="table" style="margin: 0 auto;" bgcolor="FFFFFF">
<tr class="calcheading">
<td colspan="2"><font size="10">MacroRevolution BMR Calculator</font></td>
</tr>
<tr class="calcrow">
<td>Age:</td>
<td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
</tr>
<tr class="calcrow2">
<td>Height:</td>
<td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
</tr>
<tr class="calcrow">
<td>Weight:</td>
<td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
</tr>
<tr class="gender">
<td colspan="2"><input type='radio' name='sex' value='male'>Male
<input type='radio' name='sex' value='female'>Female</td>
</tr>
<tr class="submit">
<td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
</tr>
<tr class="calcrow">
<td colspan="2">Your BMR is <span style="background-color: #00CC33"><?php echo $answer?></span></td>
</tr>
</table>
</form>
<table border='0' width='80%' class="table" align="center" style="margin: 0 auto;">
<td colspan="4">
<h2 style="background: #99FF66;">Formula for BMR</h2>
<h4 style="background: #99FF66;">
If you want to manually calculate your BMR, use the (Harris-Benedict formula) <br> below. <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>
W = Weight in kilograms (lbs/2.2)<br>
H = Height in centimeters (inches x 2.54)<br>
A = Age in years
</h4>
</td>
</table>
</div>
</body>
</html>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////-->
Avoid HTML attributes like border="30" cellpadding="10" cellspacing="3" bordercolor="#00ff00" and use CSS instead:
<style>
table {
border: 30px solid #00ff00;
}
</style>
Even better, move the styles to another file
<link rel="stylesheet" type="text/css" href="stylesheet.css">