How To Align Several Tables In Td In Center

I am trying to center all tables in td. Solution should work good in email clients such as outlook, Windows Live e.t.c. But they align vertically. How to align tables in center of

Solution 1:

that is because what LcSalazar you can not disagree with him, but I assume you are making layout for email and there is just the "table layout" way if you want the outlook to display what you expect so the table contains rows and columns if you want the table content to display in one line you should divide that line in how much columns you need and then put inside the content in separate tables

<table><tbody><tr><td><!-- table content 1 --></td><td><!-- table content 2 --></td><td><!-- table content 3 --></td><td><!-- table content 4 --></td><td><!-- table content 5 --></td></tr></tbody></table>

Solution 2:

I'm not going to enter in the matter of why you should reconsider your layout, so you wouldn't need nested tables... Neither should use table for layout... Also, why shouldn't you use so many inline styles... I'm simply going to answer your question as it is...

Here it goes:

A table by default acts like a block element, using full width and breaking the line.

To place them side-by-side, change their display property to inline-table

tabletable {
  display: inline-table;
}

<table><tr><tdalign="center"style="text-align:center;width:100%;"width="100%"><tablealign="center"class="cell-container"style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;"><tbody><tr><tdwidth="33"align="left"class="social-share-cell"style="padding:2px;"><ahref="http://www.facebook.com/sharer/sharer.php?u=vk.com"title=""><imgalt=""src="http:///client/Content/images//social-links/facebook.png"width="33"height="33"></a></td><tdclass="social-share-cell"style="padding:0 5px 0 3px;vertical-align: middle;"align="left"><ahref="http://www.facebook.com/sharer/sharer.php?u=vk.com">Share</a></td></tr></tbody></table><tablealign="center"class="cell-container"style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;"><tbody><tr><tdwidth="33"align="left"class="social-share-cell"style="padding:2px;"><ahref="http://www.linkedin.com/shareArticle?url=vk.com&amp;mini=true&amp;title="title=""><imgalt=""src="http:///client/Content/images//social-links/linkedin.png"width="33"height="33"></a></td><tdclass="social-share-cell"style="padding:0 5px 0 3px;vertical-align: middle;"align="left"><ahref="http://www.linkedin.com/shareArticle?url=vk.com&amp;mini=true&amp;title=">Share</a></td></tr></tbody></table><tablealign="center"class="cell-container"style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;"><tbody><tr><tdwidth="33"align="left"class="social-share-cell"style="padding:2px;"><ahref="http://twitter.com/intent/tweet?text=: vk.com"title=""><imgalt=""src="http:///client/Content/images//social-links/twitter.png"width="33"height="33"></a></td><tdclass="social-share-cell"style="padding:0 5px 0 3px;vertical-align: middle;"align="left"><ahref="http://twitter.com/intent/tweet?text=: vk.com">Tweet</a></td></tr></tbody></table><tablealign="center"class="cell-container"style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;"><tbody><tr><tdwidth="33"align="left"class="social-share-cell"style="padding:2px;"><ahref="https://plus.google.com/share?url=vk.com"title=""><imgalt=""src="http:///client/Content/images//social-links/google-plus.png"width="33"height="33"></a></td><tdclass="social-share-cell"style="padding:0 5px 0 3px;vertical-align: middle;"align="left"><ahref="https://plus.google.com/share?url=vk.com">+1</a></td></tr></tbody></table><tablealign="center"class="cell-container"style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;"><tbody><tr><tdwidth="33"align="left"class="social-share-cell"style="padding:2px;"><ahref="http://vk.com/share.php?url=vk.com"title=""><imgalt=""src="http:///client/Content/images//social-links/vkontakte.png"width="33"height="33"></a></td><tdclass="social-share-cell"style="padding:0 5px 0 3px;vertical-align: middle;"align="left"><ahref="http://vk.com/share.php?url=vk.com">Share</a></td></tr></tbody></table></td></tr></table>

Solution 3:

add this style "display: inline-table;" for table remove the text-align:left; from table style .