0

HTML code below:

<style>
table,tr,td{
    min-width:80px;
    min-height:80px;
    border:1px #B0B0B0 solid;
}

table.v_headtable{
width:100%;
margin:0 auto;
max-width:640px;
text-align:center;
}

</style>


<table align="center" class="v_headtable">
.
.
.
.
.
.
<tr>
    <td class="row rsocial">
        <table class="socialIcons">
            <tr><td><img src="../../Twitter.png" width="30" /></td></tr>
        </table>
        <table class="socialIcons">
            <tr><td><img src="../../fb.png" width="30" /></td></tr>
        </table class="socialIcons">
        <table height="30" class="socialIcons">
            <tr><td height="30"><img src="../../LinkedIn.png" width="30" /></td></tr>
        </table>
    </td>
</tr>

In the code above I'm unable to center the tables in a row. I want the tables to stay centered on larger screens and on mobile devices it should move downwards

Current output:

Required output:

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
viditkothari
  • 90
  • 11
  • 1
    It is not a good practice to use tables for the layout, you should instead use divs. Tables are mainly for content. – dan_s Mar 29 '15 at 11:26
  • @dan_s thanks for the suggestion. I agree using divs for web page layouts but I started reading about email template designing 3 days ago and everyone is using tables, even the Zurb Email template - Ink has got table based approach – viditkothari Mar 29 '15 at 11:30

1 Answers1

0

Apply this CSS to your .socialIcons class:

.socialIcons {
    display: inline-block;
}
dan_s
  • 461
  • 5
  • 11
  • Thanks again @dan_s. This did help. Can you explain/brief me what happened, did you do and why? – viditkothari Mar 29 '15 at 11:52
  • See this answer, it explains the difference between `inline`, `block` and `inline-block`: http://stackoverflow.com/a/9189873/1871058 Your tables were acting as blocks and so they couldn't allow any html elements (in this case other tables) next to them. – dan_s Mar 29 '15 at 12:00
  • One more thing, in the image (url attached) how can I center the tag & its contents in a table? Image: http://i.imgur.com/P5vzWa4.png – viditkothari Mar 29 '15 at 13:12