无法更改表格的宽度

Question

蓝色表格数据条目不会存在其宽度。有没有一种新的html5方法能够实现这一壮举？该行应该与上面的照片具有相同的宽度。无法更改表格的宽度<TD>

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