Question

我需要在三列html文件的主要部分插入一个表。由于某种原因，该表最终位于标题下方。我查看了我的CSS表格，但无法找到解决方法。任何帮助将不胜感激。

html文件源代码：

<html lang="en">
<head>
<!--[if lt IE9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"
</script>
<![endif]-->
<title>Enoch Bagwell's Lawn Service</title>
<meta charset="utf-8">
<link href="enoch.css" rel="stylesheet">
</head>
<body>
<div id="container">
    <header role="banner">
        <span><a href="#special">Skip to Current Specials</a></span>
        <h1>Enoch Bagwell's Lawn Service</h1>
    </header>
    <nav role="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
        <img src="ridingmower.jpg" width="125" height="94" alt="Enoch Hard At Work">
    </nav>
    <aside role="customerssay">
        <h3>What Our Customers Say</h3>
        <p class="customers">
        <i>After hiring Enoch Bagwell's Lawn Service to prune my trees, I came home to
        find one of their workers cutting down my magnolia trees with a chainsaw. This
        man is clearly not stable, nor even knows anything about basic lawn care.</i><br>
        - Jack Morris, Norcross

        <p class="customers">
        <i>Enoch, I know this is a customer praise column, I'm really happy for ya, and I'm a 
        let you finish, but Beyonce has the best lawn care service of all time. BEST. LAWN CARE 
        SERVICE. OF ALL TIME!</i><br>
        - Kanye West, Anywhere There's Opportunity For Attention
        </aside>

        <main role="main">
            <h2>Our Services</h2>
            <img class="centered" src= "pruning.jpg" height="314" align="middle" width="519" alt="Tree Pruning"/>
            <p>Our prices vary from season to season. Here's a table of our services and charges by season. For
            our lawn care services, we strictly use <a href=https://www.deere.com/en_US/products/equipment/riding_mowers/riding_mowers.page target=_blank>John Deere</a> 
            mowers and products.
            <table border="1">
                <tr>
                    <td><b>Service</b></td>
                    <td><b>Spring</b></td>
                    <td><b>Summer</b></td>
                    <td><b>Fall</b></td>
                    <td><b>Winter</b></td>
                </tr>
                <tr>
                    <td>Lawn Mowing</td>
                    <td>$40/sq ft.</td>
                    <td>$45/sq ft.</td>
                    <td>$30/sq ft.</td>
                    <td>$20/sq ft.</td>
                </tr>
            </p>

            <footer role="contentinfo">Copyright &copy;2015 Enoch Bagwell's Lawn Service International LLC.<br>
            Site Design by <a href="mailto:mthomps5071@student.gwinnetttech.edu">mthomps</a><br>
            </footer>
</main>
</div>
</body>
</html>

......还有样式表。

header, nav, main, footer, aside {display: block;}

body {margin:0;
      background-color: #336633;}

#container { background-color: #5c855c;
            color: #ffff99;
            min-width: 960px;
            font-family: Georgia, "Times New Roman", Serif;}

header {background-color: #d6d633;
       background-image: url(grass.png);
       background-position: bottom;
       background-repeat: repeat-x;
       height: 170px;
       color: #ffff99;
       text-align: right;
       padding: 0 20px;
       border-bottom: 2px solid #000000;}

nav {float: left;
    width: 150px;}

aside {float: right;
      width: 200px;}

main {margin: 0 210px 0 160px;
     padding: 1px 10px 20px 10px;
     background-color: #336633;
     color: #ffff99;}

footer {font-size: .70em;
      text-align: center;
      color: #ffff99;
      background-color: #336633;
      padding-top: 10px;
      clear: both;}

h1 {margin-top: 0;
    font-size: 4em;
    text-align: left;
    text-shadow: 2px 2px 2px #000000;}

header a {font-size: 0.80em;}
header a: link, header a,: visited {color:#ffff99;}
header a:focus, header a:hover{color:#00cc99;}

nav ul{margin-top: 20px;
     list-style-type: none;}

nav a {text-decoration: none;
      font-size: 1.3em;}
nav a:link {color: #00cc99;}
nav a:visited{color: #ff0000;}
nav a:focus, #nav a:hover {color: #99ff33;}
nav a:active {color: #d6d633;}

nav img { margin: 30px;}

main p{ margin: 20px;}

main h2, main h3 {background-color: #336633;}

table {margin: auto;
     border: 5px solid #00cc99;
     width: 600px;}

#floatright {margin: 10px;
            float: right;}

#imgleft{float: left;
          margin: 5px 10px 5px 10px;}

aside h3 {padding-bottom: 2px;
        border-bottom: 1px solid: #33cc33;
        margin: 10px;
        font-size: 0.90em;
        color: #ffff99;}

.customerssay { font-size: 0.70em;
                margin: 10px;}

img.centered {display: block;
             margin-left: auto;
             margin-right: auto; }

什么吸引桌子走到标题下面？

Answer 1

您忘了关闭表格标签。

<html lang="en">
<head>
<!--[if lt IE9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"
</script>
<![endif]-->

<title>Enoch Bagwell's Lawn Service</title>
<meta charset="utf-8">
<link href="enoch.css" rel="stylesheet">
</head>
<body>
<div id="container">
    <header role="banner">
        <span><a href="#special">Skip to Current Specials</a></span>
        <h1>Enoch Bagwell's Lawn Service</h1>
    </header>
    <nav role="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
        <img src="ridingmower.jpg" width="125" height="94" alt="Enoch Hard At Work">
    </nav>
    <aside role="customerssay">
        <h3>What Our Customers Say</h3>
        <p class="customers">
        <i>After hiring Enoch Bagwell's Lawn Service to prune my trees, I came home to
        find one of their workers cutting down my magnolia trees with a chainsaw. This
        man is clearly not stable, nor even knows anything about basic lawn care.</i><br>
        - Jack Morris, Norcross

        <p class="customers">
        <i>Enoch, I know this is a customer praise column, I'm really happy for ya, and I'm a 
        let you finish, but Beyonce has the best lawn care service of all time. BEST. LAWN CARE 
        SERVICE. OF ALL TIME!</i><br>
        - Kanye West, Anywhere There's Opportunity For Attention
        </aside>

        <main role="main">
            <h2>Our Services</h2>
            <img class="centered" src= "pruning.jpg" height="314" align="middle" width="519" alt="Tree Pruning"/>
            <p>Our prices vary from season to season. Here's a table of our services and charges by season. For
            our lawn care services, we strictly use <a href=https://www.deere.com/en_US/products/equipment/riding_mowers/riding_mowers.page target=_blank>John Deere</a> 
            mowers and products.
            <table border="1">
                <tr>
                    <td><b>Service</b></td>
                    <td><b>Spring</b></td>
                    <td><b>Summer</b></td>
                    <td><b>Fall</b></td>
                    <td><b>Winter</b></td>
                </tr>
                <tr>
                    <td>Lawn Mowing</td>
                    <td>$40/sq ft.</td>
                    <td>$45/sq ft.</td>
                    <td>$30/sq ft.</td>
                    <td>$20/sq ft.</td>
                </tr>
                </table>
            </p>

            <footer role="contentinfo">Copyright &copy;2015 Enoch Bagwell's Lawn Service International LLC.<br>
            Site Design by <a href="mailto:mthomps5071@student.gwinnetttech.edu">mthomps</a><br>
            </footer>
</main>
</div>
</body>
</html>

Answer 2

<table border="1">
    <tr>
        <td><b>Service</b></td>
        <td><b>Spring</b></td>
        <td><b>Summer</b></td>
        <td><b>Fall</b></td>
        <td><b>Winter</b></td>
    </tr>
    <tr>
        <td>Lawn Mowing</td>
        <td>$40/sq ft.</td>
        <td>$45/sq ft.</td>
        <td>$30/sq ft.</td>
        <td>$20/sq ft.</td>
    </tr>
</p>

将</p>更改为</table>，看看是否有帮助。

尝试在三列页面中插入表格

2 个答案: