html - 如何让TR和TD元素横跨整个页面？-6ren

html - 如何让TR和TD元素横跨整个页面？

转载作者：太空宇宙更新时间：2023-11-04 04:22:33

我似乎无法弄清楚如何制作我的导航栏，我的页面底部的表格与页面边缘齐平，以便内容之间的上方、下方和右侧没有间隙和边缘是否有意义？

页面处于起步阶段，所以代码有些地方有点乱，请提前道歉。

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; }