如何讓TR和TD元素跨越整個頁面？

Question

我似乎無法弄清楚如何制作我的導航欄，並且頁面底部的桌子與頁面的邊緣齊平，因此內容和邊緣之間的左上方和右下方沒有間隙如果那有意義的話？

頁面處於開始階段，因此代碼在某些地方有點亂，所以很抱歉。

HTML：

<html><html
<head>
 <title> Blog | GameHub</title>

 <link rel="icon" type="image/png" href="Pictures/favicon.ico">
 <link rel="stylesheet" type="text/css" href="new.css">

 <table class="table" cellspacing="0">
  <tr>
   <td class="blog_tops" valign="middle">
    <span>
     <div id="blog_tools">
      <ul>
       <li><a href="">New Post</a></li>
       <li><a href="">UserName</a></li>
      </ul>
   </div>
  </span>
 </td>
</tr>
<tr>
 <td colspan="2" div id="header"><a href="#"><image div id="logo" border="0" al="lt" height="30px" width="200 src=Pictures/trans_logo.png"></a>
</tr>
<tr>
 <td colspan="2" class="tops" valign="middle">
  <span>
   <div id="navbar">
    <ul>
     <li><a href="">Home</a></li>
     <li><a href="articles.html">Articles</a></li>
     <li><a href="forum/overview.php">Forums</a></li>
     <li><a href="contact_us.html">Contact</a></li>
    </ul> 
   </div>
  </span>
 </td>
</tr>
<tr>
 <td class="blog_post_title"><div style="float:left;font-size:12px;font-family:verdana;padding:0px 0px 0px 10px;">UserName</div><div style="float:right;font-size:12px;font-family:verdana;padding:0px 10px 0px 0px;">Date</div></td></tr>'    
 <td class="blog_post_content"><p>TextTextTextTextTextTextTextTextTextTextText</p>
 </td>
</tr>    
<tr>
 <td class="blog_post_title"><div style="float:left;font-size:12px;font-family:verdana;padding:0px 0px 0px 10px;">UserName</div><div style="float:right;font-size:12px;font-family:verdana;padding:0px 10px 0px 0px;">Date</div></td></tr>'    
 <td class="blog_post_content"><p>TextTextTextTextTextTextTextTextTextTextText</p>
 </td>
</tr>    
 <tr>
 <td class="blog_post_title"><div style="float:left;font-size:12px;font-family:verdana;padding:0px 0px 0px 10px;">UserName</div><div style="float:right;font-size:12px;font-family:verdana;padding:0px 10px 0px 0px;">Date</div></td></tr>'    
 <td class="blog_post_content"><p>TextTextTextTextTextTextTextTextTextTextText</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </td>

</tr>
<table class="footer">
 <tr> 
  <td class="copyright">
   <h4></h4>


 </td>
 </td>
</tr>
</table>
</table>
</body>
</html>

CSS：

   #page {
width: 2000px
height: auto;
margin: 0 auto;
background-color: #333;
padding: 0px; }


  #navbar ul {
background: #333;
float: none;
padding: 0px 0px 2px 0px;
text-align: left; 
list-style: none; 
width: 100%;
height: 0px; 
vertical-align: top;
min-width: 1046px; }


  #navbar ul li {
display: inline; 
list-style: none; 
vertical-align: top; }


 #navbar ul li a {
background: #333;
color: white;
padding: 5px 0px 5px 3px;
text-decoration: none;
display: inline;
border-width: 0px 0px 0px 0px;
border-color: #ff6000; 
border-style: solid; 
vertical-align: middle;
text-align: middle;
float: center;  }




 #navbar ul li a:hover {
background: #333;
webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;   
color: #ff6000;}

   #blog_tools ul {
background: #232323;
float: none;
padding: 0px 0px 0px 0px;
text-align: right;
list-style: none;
width 100%;
height: 25px;
vertical-align: top; }

  #blog_tools ul li {
display: inline;
list-style: none;
vertical-align: top; }

  #blog_tools ul li a {
background: #232323;
color: #fff;
text-align: right;
padding: 0px 5px 0px 3px;
text-decoration: none;
display; inlne;
border-width: 0px;
vertical-align: middle;
text-align: middle;
float: center; }

   #blog_tools ul li a:hover {
background: #232323;
webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #01c3f3; }

 .table {
border-width: 2px;
border-color: #fff;
width: 100%; 
margin: 0; 
padding: 0px 0px 0px 0px; 
text-align: center;
border-spacing: 0px;
cellspacing: 0px;
border-collapse: collapse;} 

    #header {
height: 40px;
width: 100%;
background: #333333;
border: 0px;
border-spacing: 0px; }


 #logo {
padding: 0px 0px 0px 50px; }

.tops {
height: 50px;
width: 100%; 
border-spacing: 0px;
padding: 0px 0px 0px 0px;
vertical-align: center;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ff6000; }


.blog_tops {
height: 0px;
width: 100%; 
border-spacing: 0px;
padding: 0px 0px 0px 0px;
vertical-align: center;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ff6000; }


h1 {
text-decoration: underline;
font-family: verdana;
font-size: 20px; 
padding: 0px;
text-align: top; }

h2 {
font-family: verdana; }

h3 {
font-family: verdana; }

p {
font-family: verdana;
font-size: 11pt;
text-align: left;
padding: 0px 0px 0px 10px; }

 a {
font-family: verdana; }


td {
border-width: 0px;
border-style: dotted; 
border-color: olive; 
padding: 0px; }

tr {
padding: 0px;}

.copyright {
height: 200px;
width: 500px;
background-color: #3a3a3a;
padding: 0px 100px 0px 100px; 
border-top: 1px solid rgba(0,0,0,2); }

.copyright h4 {
color: #fff; }

.footer {
width: 100%;
margin: 20px auto;
background: #232323;
padding: 10px 400px 10px 400px; }

提前謝謝，瑞恩

Answer 1

不要使用表格進行布局！

table元素用於表格數據，沒有別的。 當您真正開始編寫HTML時，請使用HTML5和語義正確的元素。

因此，使用<nav>而不是<div id="navbar"> <nav> 。

也不要使用內聯樣式。

有成千上萬的教程，如何編寫語義正確的HTML（5）以及關於表示和內容的分離。

假設視口寬度為2000px（ #page {width: 2000px;} ）也不是最新的，越來越多的用戶使用帶有小（呃）顯示器（視口）的移動設備。

最后但並非最不重要的是您的代碼中存在多個拼寫錯誤。 例如，你已經忘記了很多引用，例如width="200 src=Pictures/trans_logo.png"> 。 驗證代碼總是一個好主意。

如何讓TR和TD元素跨越整個頁面？

問題描述

1 個解決方案

解決方案1
2 2013-09-15 14:33:02

如何讓TR和TD元素跨越整個頁面？

問題描述

1 個解決方案

解決方案1 2 2013-09-15 14:33:02

解決方案1
2 2013-09-15 14:33:02