2017-11-07 25 views
0

これは私の初めてのHTML体験です。私は、テーブル内で作成していることを行うにはHTML - テーブルの中央で左揃えにするにはどうすればいいですか?

enter image description here

:私はこのような結果を再現することを目指しています。私は、コード開発の開始時だが、これはだった私がこれまでに得た:

<body> 
<table id="container" style="width: 98%;"> 
    <table id="header" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;"> 
    <td valign="top" align="center"> 
     TODO 
    </td> 
    </table> 
    <table id="content" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;"> 
    <td valign="top" style="text-align: center"> 
     <h2 align="center" style="line-height: 40%; font-family: 'Roboto';">Beginner's Guide to Web Development</h2> 
     <p align="center" style="line-height: 35%; font-family: 'Roboto';">Curious about web development but not sure where to start?</p> 
     <p align="center" style="line-height: 35%; font-family: 'Roboto';">Or maybe you just need to brush up on some of the basics.</p> 
     <p align="center" style="line-height: 35%; font-family: 'Roboto';">Our new Beginner's Guide to Web Development has you</p> 
     <p align="center" style="line-height: 35%; font-family: 'Roboto';">covered! Read through it now to explore (or rediscover) the</p> 
     <p align="center" style="line-height: 35%; font-family: 'Roboto';">foundations of web dev.</p> 
    </td> 
    </table> 
    <table id="footer" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;"> 
    <td valign="top" align="center"> 
     TODO 
    </td> 
    </table> 
</table> 

、結果は次のとおりです。

enter image description here[2ので

、どのように整合させることができその赤い線をたどっているが、降水がないテキスト?

enter image description here

OBS:私はstyleタグを使用するには、悪い習慣ですけど、目的は任意の電子メールアプリケーションで読み取ることができるコードを開発することです。

答えて

1

<table id="container" style="width: 98%;"> 
 
    <table id="header" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;"> 
 
     <td valign="top" align="center"> 
 
     TODO 
 
     </td> 
 
    </table> 
 
    <table id="content" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;"> 
 
     <td valign="top" style="text-align: center"> 
 
     <div style=" 
 
      width: 76%; 
 
      margin: 0 auto; 
 
      text-align: left; 
 
      "> 
 
      <h2 style="line-height: 40%; font-family: 'Roboto';">Beginner's Guide to Web Development</h2> 
 
      <p style="line-height: 35%; font-family: 'Roboto';">Curious about web development but not sure where to start?</p> 
 
      <p style="line-height: 35%; font-family: 'Roboto';">Or maybe you just need to brush up on some of the basics.</p> 
 
      <p style="line-height: 35%; font-family: 'Roboto';">Our new Beginner's Guide to Web Development has you</p> 
 
      <p style="line-height: 35%; font-family: 'Roboto';">covered! Read through it now to explore (or rediscover) the</p> 
 
      <p style="line-height: 35%; font-family: 'Roboto';">foundations of web dev.</p> 
 
     </div> 
 
     </td> 
 
    </table> 
 
    <table id="footer" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;"> 
 
     <td valign="top" align="center"> 
 
     TODO 
 
     </td> 
 
    </table> 
 
</table>

関連する問題