如何正确地将html表适配到页面上？_Html

如何正确地将html表适配到页面上？

html

如何正确地将html表适配到页面上？,html,Html,我正在尝试将我编写的计算器与网页对齐，但我正在寻找更好的html实践来完成我的任务。例如，左边和右边有155px的边距，我想在这些边距之间调整我的表格以下是我正在尝试修复的页面：以下是我正在使用的表格设置示例： <?php /* Template Name: bmrcalc */ ?> <?php get_header(); ?> <?php $al_options = get_option('al_general_settings');?&

我正在尝试将我编写的计算器与网页对齐，但我正在寻找更好的html实践来完成我的任务。例如，左边和右边有155px的边距，我想在这些边距之间调整我的表格

以下是我正在尝试修复的页面：

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

    <?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(); ?>


基础代谢率计算器
宏旋转BMR计算器
年龄：
BMR=基础代谢率（类似于RMR=静息代谢率）。你的BMR代表你身体在休息时燃烧的卡路里数。有规律的心血管锻炼可以提高你的BMR，当你的身体消耗能量的能力逐渐降低时，可以改善你的健康状况。
BMR公式
如果要手动计算BMR，请使用下面的（）



男性：BMR=66.47+（13.75 x宽）+（5.0 x高）-（6.75 x高）

女性：BMR=665.09+（9.56 x宽）+（1.84 x高）-（4.67 x高）


W=重量，单位为千克（lbs/2.2）

H=高度，单位为厘米（英寸x 2.54）

A=以年为单位的年龄

而不是

width = '50%'

及

对于带有

class='table'

的表格，请使用以下

样式

：

width = '100%'

及

这不是一个数据表。不要使用表格进行此操作。@legostrmtroopr我应该使用什么来代替？谢谢IamDesai，所以我将“边距：0自动；”应用于我的所有表格。查看如何填充/拉伸表格以适合适当的边距？查看页面，了解我的意思使用更新的更改将表格延伸到整个屏幕，如任何建议所示？@RyanGoo您确定您已经更新了代码吗？我看不到我这边有任何变化。此外，如果您认为我的答案解决了您的问题，请将其标记为已接受的答案。我将代码应用于前两个表格，它们一直延伸到屏幕上，我希望表格在左右两侧的155px边距之间（请参阅）以查看所需的边距。我会给你的答案打上最好的标记，因为不同的人使用不同的屏幕分辨率和浏览器窗口大小，所以硬编码页边距不是一个好主意。在我看来，你应该使用

margin:0auto

并设置

width='70%

，使内容看起来合适。

width = '100%'

margin: 0 auto;