テーブルの幅を変更できません<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>

をそうですね。レイアウト用のテーブルはありません。インラインにする必要がある場合は、<style></style>タグをHTMLブロックの上に置くだけです。

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>