Question

我正在尝试将我编码的计算器对齐到网页上，但我正在寻找更好的HTML实践来完成我的任务。例如，左边和右边有155px的边距，我想让我的桌子适合这些边缘。

以下是我要修复的页面：http://macrorevolution.com/bmr/

以下是我正在使用的表格设置示例：

    <?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 (<a href="http://en.wikipedia.org/wiki/Harris%E2%80%93Benedict_equation">Harris-Benedict formula</a>) <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(); ?>

Answer 1

而不是

width = '50%'

和

margin-left: 155px;
margin-right: 155px;

对style的表格使用以下class='table'：

width = '100%'

和

margin: 0 auto;

如何正确地将html表放入页面？

1 个答案: