HTML - How to left align keeping at the center of table?

Question

This is my first real experience with HTML. I'm aiming to reproduce a result like this:

在此处输入图片说明

To do that I creating inside a table. I'm at the start of the code development, but this was I got so far:

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

And the result is:

在此处输入图片描述[2

So, How could align the text to following that red line but without descentralizing?

OBS: I know that is a bad practice to use the style tag, but the purpose is to develop a code that can be read in any email application.

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

HTML - How to left align keeping at the center of table?

Question

1 answers

solution1
1 ACCPTED 2017-11-07 23:13:45

HTML - How to left align keeping at the center of table?

Question

1 answers

solution1 1 ACCPTED 2017-11-07 23:13:45

solution1
1 ACCPTED 2017-11-07 23:13:45