html - 表格 - 顶部一排，底部一排

Question

我有一张像这样的桌子：

<table>
    <tr>
        <td>This is at the top of the page</td>
    </tr>

    <tr>
        <td>This is at the bottom of the page</td>
    </tr>
</table>

如何使第一行位于页面顶部，第二行位于页面底部？

我尝试使用position:absoluteand top:0px，但它让我无法在表格中放置彩色背景和边框......

Answer 1

使用 div 解决这个问题：

<div id="top"></div>
<div id="bottom"></div>

CSS：

#top {
  position:absolute 
  top:0px;
  width:100%;
}
#bottom {
  position:absolute 
  bottom:0px;
  width:100%;
}

Answer 2

使用TABLE元素不是一个好主意。元素的使用DIV要好得多，因为您可以DIV根据需要调整元素。

Answer 3

<table height="100%"> 
  <tr> 
    <td>This is at the top of the page</td> 
  </tr> 
  <tr> 
    <td height="100%"></td> 
  </tr> 
  <tr> 
    <td>This is at the bottom of the page</td> 
  </tr> 
</table>

Answer 4

我会继续Sirwan的回答，因为这是正确的方法！此外，现在 HTML5 已经涉足图片领域，您可以使用<header>和<footer>标签来实现您想要实现的目标。

HEADER : http://www.w3schools.com/tags/tag_header.asp FOOTER : http://www.w3schools.com/tags/tag_footer.asp