在 <table> a 中放置 会对<dd> <dl> 我页面的其他元素产生不利影响

Question

我使用的是右侧的两列布局，带有标头和粘性页脚。我右列的内容区域有一个部分，并且显示了一个内联。

我正在尝试创建一个常见问题解答页面。我正在使用描述列表来解决问题和答案，并在列表底部有一个链接以返回顶部。

对于其中一个答案（描述数据），我想添加一个信息表。我尝试将桌子放在" DD"上，然后尝试将其放在" DD"中。无论哪种方式，表都出现在"转到顶部"链接下方，并使我的页脚在页面上升起并覆盖其他信息。

是否有一种方法可以使表成为" DD"的一部分而没有这些不利影响？如果不是，还有哪些其他可行解决方案可以格式化此页面？

这是页面受影响区域的代码：

FAQ

    <dl>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question. Table below is                further explanation of answer.</dd>
    <dd>
    <table style="width: 600px; border:none;">
    <tr><th><a style="font-weight:bold;"><em>Header 1:</em></a></th></tr>
    <tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 2 </em></a></th><td>- information$300 for up to 3 hours of play</td>        </tr>
     <tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 3 </em></a></th><td>- information</td></tr>         
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- nformation</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th><a style="font-variant:small-caps; letter-spacing: 1px:"><em> Header 4 </em></a></th><td>- information</td></tr>
     </dd>
     <br>
    </dl>
    <a href="#top">Go to top</a>
    </section>
    <aside><h2>Comments</h2>
    <div class="blockquote"><blockquote><q> love You Two!</q></blockquote>        </div>
    <p class="name">person</p>
    <div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
    <p class="name">person</p>
    <div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
    <p class="name">person</p></aside>
    <div id="footer">
    <div>&copy;Copyright 2015. All Rights Reserved.</div>
    </div>  

Answer 1

您没有关闭打开的<table>标签。在</dd>之前使用</table>关闭它。代码将为

<dl>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question. Table below is                further explanation of answer.</dd>
<dd>
<table style="width: 600px; border:none;">
<tr><th><a style="font-weight:bold;"><em>Header 1:</em></a></th></tr>
<tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 2 </em></a></th><td>- information$300 for up to 3 hours of play</td>        </tr>
 <tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 3 </em></a></th><td>- information</td></tr>         
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- nformation</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th><a style="font-variant:small-caps; letter-spacing: 1px:"><em> Header 4 </em></a></th><td>- information</td></tr>
 </table> <!-- You missed  out this tag -->
 </dd>
 <br>
</dl>
<a href="#top">Go to top</a>
</section>
<aside><h2>Comments</h2>
<div class="blockquote"><blockquote><q> love You Two!</q></blockquote>        </div>
<p class="name">person</p>
<div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
<p class="name">person</p>
<div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
<p class="name">person</p></aside>
<div id="footer">
<div>&copy;Copyright 2015. All Rights Reserved.</div>
</div>