HTML -- two tables side by side
Depending on your content and space, you can use floats or inline display:
<table style="display: inline-block;">
<table style="float: left;">
Check it out here: http://jsfiddle.net/SM769/
Documentation
- CSS
displayon MDN - https://developer.mozilla.org/en/CSS:display - CSS
floaton MDN - https://developer.mozilla.org/en/CSS/float
Align two tables horizontally HTML/CSS
You can use valign = top.
<table width=100%>
<tr>
<td valign="top"><table1 code goes here>
</td>
<td valign="top"><table2 code goes here>
</td>
</tr>
</table>
HTML — Two Tables Horizontally Side by Side
I think you're missing a few lines of HTML from the start of your copy and paste, however what you'll want to do is add a float:left to the CSS of the first fieldset.
HTML,CSS — How to horizontally center two tables side by side
You can use flexbox on the container div, apply justify-content: center; to center them, remove the floats and use a margin on one of the tables to create a distance between them.
.wrap { display: flex; align-items: center; justify-content: center;}
table { border: 1px solid #555;}<div class="wrap"> <table style="margin-right:10%;"> <tr> <td>abc</td> </tr> </table> <table> <tr> <td>xyz</td> </tr> <tr> <td>xyz</td> </tr> <tr> <td>xyz</td> </tr> </table> </div>How to make two tables horizontal on the same like in html
You're on the right track, but you need to get rid of the width:100%, otherwise two of them won't fit side by side in the same line!
Also, I'd use display:inline-table rather than display:inline-block.
table { display: inline-table; border-spacing: 0; border: 0;}
th,td { padding: 0}<table> <tr> <td align="center" valign="top" style="background-color: #ffffff; padding-bottom: 0"> <img src="#" style=" height: auto; display: block; border: 0;"> </td> </tr></table>
<table> <tr> <td align="left" valign="top" style="background-color: #ffffff; padding-bottom: 0"> <p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif"> <span style="color: #9d0059; font-weight: bold">text1,</span> text 2” <br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span> </p> </td> </tr></table>Any idea how I could get two tables side by side, and third table at the bottom
- You need a wrapping table to set a defined width for the tables to take up. Otherwise your content is going to span the entire width of the email window.
- Don't bother with heights on tables. Your content will define the height on your tables. Same goes with the heights on the table cells. Your content will do this for you, unless you're using it for spacer cells etc.
- You have a mismatch of table cells between your table rows. You either need to have two cells in all rows to match the horizontal line, or add colspan="2" to all rows with only one cell.
- Your widths on all of your cells will not work. When there is only one cell in a row, that cell will fill the width set by the table. There is no way around this, this is the natural behaviour of table cells. Remove widths off of rows with only one cell.
Also remove the width off of one of the cells in the row with two cells. The second cell will fill the remaining width, left by the cell with a defined width. - With the current 650px width set on your table, your two inner tables will not sit side by side because of a silly quirk in Outlook which forces a 20px gap between tables. Your options to get around this are 1) Increase the width of your main table to 670px. 2) Reduce the width of one or both of your inner tables by 20px total. 3) Use ghost tables to mimic a table cell structure. 4) Wrap your inner tables in table cells, as @SJ_OWOW suggested.
Here is my version of your code. I went with the table cell option from point 5 as you haven't added any mobile responsive support in your signature, so for ease I went with that.
There are still a few things I'd fix but this should at least fix your major issues:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title>emailsignature</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
a{ color: white; text-decoration: none;}
table{ border-collapse: collapse; mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;}
td{ padding: 0px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;}
.footer{ font-size: 6.5pt;}
</style></head><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;width: 650px;margin:0;padding:0 !important; mso-line-height-rule: exactly;"> <table width="100%" border="0"> <tr> <td align="center"> <table width="650" border="0"> <tr> <td width="325"> <table bgcolor="#FFFFFF" id="Table_01" width="325" height="200" border="0" align="left"> <tr> <td colspan="2" height="25"></td> </tr> <tr> <td colspan="2"> <p style="font-size:16pt; font-weight:600; margin:0;">John Doe</p></td> </tr> <tr> <td colspan="2"> <p style="font-size:11pt; font-weight:300; margin:0;">Operationeel Manager</p></td>
</tr> <tr> <td width="245" height="12"> <hr style="margin:0; width: 200px;"></td> <td></td> </tr> <tr> <td colspan="2" style="padding-bottom: 40px;"> <p style="font-size:10pt; margin:0;"> Straatstraat 18<br> 3333 AA Rotterdam<br> Telefoon: +31 (0) 10 111 11 11<br> Mobiel: +31 (0) 6 111 111 111 <br> </p></td>
</tr> </table> </td> <td> <table bgcolor="#FFFFFF" id="Table_02" width="325" height="200" border="0" align="right"> <tr> <td width="15"> </td> </tr> <tr> <td style="text-align: right;"> <img src="image" width="210" height="130" border="0" alt="logo"> </td> </tr> <tr> <td width="15"> </td> </tr>
</table> </td> </tr> <tr> <td colspan="2"> <table bgcolor="#E53212" class="footer" id="Table_03" width="650" height="20" border="0"> <tr> <td width="15"> </td> <td width="50" style="text-align: center;" > <a href="https://www.google.com" title="disclaimer " target="_blank">
disclaimer </a> </td> <td width="12" height="32" style="text-align: center;">
<p style="margin:0; color:#CE2811;">|</p> </td> <td width="48" height="18" style="text-align: center;"> <a href="https://www.google.com" title="privacy pagina " target="_blank">
privacy </a> </td> <td width="16" height="32" style="text-align: center;">
<p style="margin:0; color:#CE2811;">|</p> </td> <td width="200" height="18" style="text-align: center;"> <a href="" title="algemene voorwaarden" target="_blank">
algemene voorwaarden </a> </td> <td width="13" height="32" style="text-align: center;">
<p style="color:#CE2811; margin:0;">|</p> </td> <td width="120" height="18" style="text-align: center;"> <a href="https://www.google.com" title="kvk uitreksel" target="_blank">
kvk uittreksel </a> </td> <td width="14" height="32" style="text-align: center;">
<p style="color:#CE2811; margin:0;">|</p> </td> <td width="150" height="18" style="text-align: center;"> <a href="https://www.google.com" title="wka verklaring" target="_blank">
wka verklaring </a> </td> <td width="300" height="32">
</td> <td width="21" height="18"> <a href="" title="Website van Stecon" target="_blank"> <img src="image" width="21" height="20" border="0" alt="Een wereldbol icoon"> </a> </td> <td width="6" height="32">
</td> <td width="20" height="18"> <a href="https://www.linkedin.com" title="Linkedin page" target="_blank"> <img src="image" width="20" height="20" border="0" alt="Linkedin logo"> </a> </td> <td width="18" height="32"> </td> <td width="15"> </td> </tr> </table>
</td> </tr> </table> </td> </tr></table>
</body></html>Tables side by side within div plus horizontal scrolling
You can use flexbox.
div { overflow-x: auto; max-width: 100%; display: flex;}
table { margin: 0 10px;}<div> <table border=1 cellpadding=10 cellspacing=0> <tr> <th>Lorem</th> <th>Ipsum</th> <th>Sit</th> <th>Dolor</th> <th>Amet</th> </tr> <tr> <th>Lorem</th> <th>Ipsum</th> <th>Sit</th> <th>Dolor</th> <th>Amet</th> </tr>
</table> <table border=1 cellpadding=10 cellspacing=0> <th>Lorem2</th> <th>Ipsum2</th> <th>Si2t</th> <th>Dolor2</th> <th>Amet2</th> </table></div>Related Topics
How to Center Cards in Bootstrap 4
How to Color Text in Github's Flavoured Markdown
Putting an Image Background Onto a CSS Triangle
Hide Text, But Have It Show Up If Copied and Pasted Without JavaScript
Multiple Distinct Pages in One HTML File
Link to an Element Within The Current Page
Negative Margin and Background
How to Get the Browser's Default Font Family in CSS
Ie Compatibility Mode: 'X-Ua-Compatible' Tag 'Edge'
<Table> with Fixed <Thead> and Scrollable <Tbody>
Background Video with 100% Width and Fixed Height