無法更改表格的寬度<TD>

Question

藍色表格數據條目不會存在其寬度。有沒有一種新的html5方法能夠實現這一壯舉？該行應該與上面的照片具有相同的寬度。

<div class="template" style="text-align:center"> 
 
    <table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center"> 
 
\t \t <tr> 
 
\t \t \t <td width='100%' height='100%' bgcolor='#f2f3f4'> 
 
\t \t \t \t <div style="text-align: center;"> 
 
\t \t \t \t \t \t <img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo"> 
 
\t \t \t \t </div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t 
 
<!-- Background photo --> 
 

 
\t <TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"> 
 
\t <TR> 
 

 
\t  <TD WIDTH="997" HEIGHT="326" 
 
     background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background- 
 
     image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat: 
 
     no-repeat;"> 
 

 
\t <!-- <b>WELCOME TO ROVER! </b> --> 
 
\t <FONT class="titletext" color="white" align="center" style="width: 800px; 
 
\t font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br> 
 
\t <FONT class="subtitletext" color="white" align="center" style="width: 
 
     100px; 
 
\t font-size: 30px;">Ready to get started?</FONT><br><br><br> 
 
\t 
 
\t <a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png" 
 
     alt="Button" border="0"></a> 
 
\t 
 
\t </TD> 
 

 
\t </TR> 
 
\t <tr> 
 
\t  <td width="80%" bgcolor="#blue" style="width:80%"> 
 
\t  </td> 
 
\t </tr> 
 
\t </TABLE> 
 
    </table> 
 
    </div>

Answer 1

article { 
 
    width: 100%; 
 
} 
 

 
#banner { 
 
    background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat; 
 
    padding: 25px 0; 
 
} 
 

 
h1 { 
 
    font-size: 50px; 
 
    margin-bottom: 0; 
 
} 
 

 
h1, p { 
 
    color: white; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    font-size: 30px; 
 
} 
 

 
button { 
 
    width: 200px; 
 
    background: #00c55c; 
 
    border: none; 
 
    padding: 12px 24px; 
 
    color: white; 
 
    font-size: 24px; 
 
    border-radius: 6px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    clear: both; 
 
} 
 

 
#logo { 
 
    background: #f2f3f4; 
 
} 
 

 
#logo img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    clear: both; 
 
}

<article> 
 
    
 
    <section id="logo"> 
 
     <img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo"> 
 
    </section> \t  
 
    
 
    <section id="banner"> 
 
     
 
     <h1>Welcome to Rover!</h1> 
 
     <p>Ready to get started?</p> 
 
     <button>Search Sitters</button> 
 
    
 
    </section> 
 
    
 
</article>

我做事端像這樣。沒有佈局表格。如果必須內聯，只需在HTML塊上方放置一個<style></style>標籤即可。

Answer 2

您使用內聯CSS，試試這個：

<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>

Answer 3

對於我使用以下網站的按鈕的背景顏色。

https://flatuicolors.com/

我還做了一切分成CSS和HTML，所以你可以看到的。沒有內聯CSS。這是使用表格和標題的正確方法。

爲標頭使用<div>標籤，因爲它會自動將東西推到後面的新行。不需要中斷標籤。中斷標籤很少用於設計中。

另外我確定你的分隔線是藍色的。

我相信有沒有更好的方式來完成這個沒有表，但是你說你需要這個表格形式，所以在這裏你去！

table { 
 
    width: 80%; 
 
    border: none; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    color: white; 
 
} 
 

 
.background { 
 
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg'); 
 
} 
 
.titletext { 
 
    font-size: 50px; 
 
} 
 

 
.subtitletext { 
 
    font-size: 30px; 
 
} 
 

 
button { 
 
    margin: 10px 0; 
 
    width: 50%; 
 
    border-radius: 15px; 
 
    height: 100px; 
 
    background: #27ae60; 
 
    border: 1px solid rgba(255,255,255,0.8); 
 
    font-size: 20px; 
 
    color: white; 
 
} 
 

 
button:hover { 
 
    background-color: #2ecc71; 
 
} 
 

 

 
.seperator { 
 
    width: 80%; 
 
    background: blue; 
 
}

<TABLE> 
 
    <TR class="background"> 
 
    <TD> 
 
     <div class="titletext">WELCOME TO ROVER!</div> 
 
     <div class="subtitletext">Ready to get started?</div> 
 
     <a href="#"><button>Search Sitters</button></a> 
 
    </TD> 
 
    </TR> 
 
    <tr> 
 
    <td class="seperator""></td> 
 
    </tr> 
 
</TABLE>