HTML表格设置不起作用

时间:2014-01-08 02:30:35

标签: html css html-table

我正在尝试篡改我的html表设置来设置边框,但我认为我的语法错误。我在网上环顾四周,尝试过多次没有成功的事情。有什么建议?

例如,此代码将应用于第一个表,但在页面上无法正确显示。

<table BORDER="30" CELLPADDING="10" CELLSPACING="3" BORDERCOLOR="00FF00" width='80%' style="margin: 0 auto;">
</table>

此处应用HTML代码:http://macrorevolution.com/calculators/bmr/

唯一可行的表设置是“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 (<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>
</div>

</body>
</html>

<!-- ///////////////////////////////////////////////////////////////////////////////////////////-->

1 个答案:

答案 0 :(得分:1)

避免使用border="30" cellpadding="10" cellspacing="3" bordercolor="#00ff00"之类的HTML属性,而是使用CSS:

<style>
  table {
    border: 30px solid #00ff00;
  }
</style>

更好的是,将样式移动到另一个文件

<link rel="stylesheet" type="text/css" href="stylesheet.css">