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
Create two table side by side using HTML
You could wrapp both tables in a div and define for it display: flex.
Working example:
.table-wrapper {
display: flex;
}<div class="table-wrapper">
<table border=1>
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
<table border=1>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</div>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 put 4 tables with different sizes side by side
Tables only approach. Floats are considered bad practice in most cases these days. Also, they just are messy to work with.
.textCenter {
text-align: center;
}
.wrapper table {border: solid 2px red;}<table class="wrapper">
<tr>
<td style="width: 50%; vertical-align: top;">
<table>
<tr>
<td id="td1" class="textCenter">
Table 1
</td>
</tr>
</table>
<table>
<tr>
<td id="td3" class="textCenter">
Table 3
</td>
</tr>
</table>
</td>
<td style="width: 50%; vertical-align: top;">
<table>
<tr>
<td id="td2" class="textCenter">
Table 2 <br />
Table 2 <br />
Table 2 <br />Table 2 <br />
</td>
</tr>
</table>
<table>
<tr>
<td id="t4" width="44%" class="textCenter">
Table 4
</td>
</tr>
</table>
</td>
</tr>
</table>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>Make two tables side by side
I am not sure but this might be the solution that you are looking for
You must have to increase size of the body and change float values in css along with the margins
.wrapper{ margin: 10px 0 10px 0; }.header{ width:100%; height:100px;}.image{ float: left; width:15%; margin-left:5%; height:100px; width:100px;}.image img{ margin-top:10px; height:99px; width:99px;}.headline{ margin-top:15px; font-size:30px; font-weight:bold; float: left; width:100%; text-align: center;}.tagline{ font-size:15px !important; font-weight: regular; font-style:italic; margin-top: 5px;}.table_wrapper{ /*padding:0 5%;*/ border: 2px solid #000; float:left; margin:15px;}
.student_info table{ width: 100%; height: 100px; /*float: left;*/ padding: 15px; } .student_info table,.student_info th,.student_info td,.remark table,.remark th,.remark td{ border: 0px solid #000 !important;}
.subject{ width:150px; margin-left: 20px; text-align: left;}
.score{ width:40px;}
.remark{ margin-bottom:30px; line-height:2;}
.student_info table tr td img{ height:100px; width:80px; float: right;}
.tag_bold{ font-weight: bold;}.chartz{ padding: 5px; width: 100%;}.chartz table td{ height:14px; } .chartz table{ height:20px; border-collapse: collapse;}.chartz table, th, td { border: 1px solid black;}.txt_rotate{ /*-ms-transform: rotate(-90deg); *//* IE 9 */ /*-webkit-transform: rotate(-90deg);*/ /* Safari 3-8 */ /*transform: rotate(-90deg);*/ padding: 50px 0;}.mark_chart{ /*float:left;*/ float: left; width: 50%; text-align:center; font-weight:bold; background-color: blue; margin-right: -800px;}.txt_colr{ color: #5151FF;}.txt_colr_red{ color:red;}.txt_colr_green{ color: green;}.head_title{ font-size: 8px; padding: 40px 0 !important;}.social_chart{ width: 50%; margin-bottom: 5%; background-color: red; float: left; margin-left: 50%;}.social{ padding:43px 0; text-align:center; }.mark_chart table{ width:100%;}.social_chart table{ width:100%;}.habit_chart, .behaviour_chart, .class_chart{ padding: 0 0 20px 0;}.remark{ float: left; margin-left:2%; width:100%;}.remark table{ width:90%;}.footer{ width:100%; text-align:center; margin: 30px 0; font-weight: bold;}
@media all { .page-break { display: block; page-break-before: always; }}
@media print { .page-break { display: block; page-break-before: always; }}<html>
<head> <style>html,body{ font-family: Arial; font-size:12px; margin:0; height:100%; width:100%; } </style></head><body> <div class="chartz"> <div class="mark_chart"> <table> <tbody><tr style="font-weight: bold;"><td rowspan="2" class="head_title"><h1>SUBJECT TITLE</h1></td><td class="txt_rotate">1st Test</td><td class="txt_rotate">2nd Test</td><td class="txt_rotate">Exam Score</td><td class="txt_rotate">Total Score</td><td rowspan="2" class="txt_rotate">Letter Grade</td><td rowspan="2" class="txt_rotate">Subject Position</td><td class="head_title" rowspan="2"><h3>Remark</h3></td></tr> <tr style="font-weight: bold;"><td>10</td><td>20</td><td>70</td><td>100</td></tr> <tr><td colspan="8">COGNITIVE REPORT</td></tr> <tr> <td class="subject"> </td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr_green"><strong> </strong></td> <td class="txt_colr_red"><strong> </strong></td> </tr> <tr> <td class="subject"> </td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr_green"><strong> </strong></td> <td class="txt_colr_red"><strong> </strong></td> </tr> <tr> <td class="subject"> </td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr_green"><strong> </strong></td> <td class="txt_colr_red"><strong> </strong></td> </tr> <tr> <td class="subject"> </td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr_green"><strong> </strong></td> <td class="txt_colr_red"><strong> </strong></td> </tr> <tr> <td class="subject"> </td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr_green"><strong> </strong></td> <td class="txt_colr_red"><strong> </strong></td> </tr> <tr> <td class="subject"> </td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr_green"><strong> </strong></td> <td class="txt_colr_red"><strong> </strong></td> </tr> <tr> <td class="subject"> </td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr_green"><strong> </strong></td> <td class="txt_colr_red"><strong> </strong></td> </tr> <tr> <td class="subject"> </td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr_green"><strong> </strong></td> <td class="txt_colr_red"><strong> </strong></td> </tr> <tr> <td class="subject"> </td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr"><strong> </strong></td> <td class="txt_colr_green"><strong> </strong></td> <td class="txt_colr_red"><strong> </strong></td> </tr> </tbody></table> </div>
<div class="social_chart"> <div class="habit_chart"> <table> <tbody><tr class="tag_bold head_title"> <td colspan="2" class="social"> <strong>SOCIAL BEHAVIOUR AND<br> MANIPULATIVE SKILLS</strong> </td> </tr> <tr class="tag_bold"><td>Work Habit</td><td>Ratings</td></tr> <tr><td>1. Creativity</td><td></td> </tr> <tr><td>2. Industrious </td><td></td> </tr> <tr><td>3. Work Independently</td><td></td> </tr> <tr><td>4. Follow Instructions</td><td></td> </tr> <tr><td>5. Neatness/Neat Work</td><td></td> </tr> <tr><td>6. Handwriting</td><td></td> </tr> <tr><td>7. Verbal Fluency</td><td></td> </tr> <tr><td>8. Work with Supervision</td><td></td> </tr> <tr><td>9. Class Participation</td><td></td> </tr> <tr><td>10. Work on time</td><td></td> </tr> </tbody></table> </div>
<div class="behaviour_chart"> <table> <tbody><tr class="tag_bold"><td>Behaviour</td><td>Ratings</td></tr> <tr><td>1. Honesty</td><td></td> </tr> <tr><td>2. Humility </td><td></td> </tr> <tr><td>3. Self Control</td><td></td> </tr> <tr><td>4. Politeness</td><td></td> </tr> <tr><td>5. Teachers Respect</td><td></td> </tr> <tr><td>6. Friendliness</td><td></td> </tr> <tr><td>7. Punctuality</td><td></td> </tr> </tbody></table> </div> <div class="class_chart"> <table> <tbody><tr class="tag_bold"><td colspan="2">Class Average</td></tr> <tr><td>Highest Class Average</td><td class="txt_colr_green">{{@$highAverage->average}}%</td> </tr> <tr><td>Lowest Class Average</td><td class="txt_colr_red">{{@$lowAverage->average}}%</td> </tr> </tbody></table> </div> <div class="resume_chart"> <table> <tbody><tr class="tag_bold"><td colspan="2" style="text-align: center;">School Resumes</td></tr> <tr><td colspan="2" style="text-align:center;">Sunday, 22 April, 2018</td> </tr> </tbody></table> </div> </div> </div>
</body></html>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>Related Topics
How to Style the Arrow of <Details> <Summary> Elements
Why Do The CSS Width and Height Properties Not Adjust for Padding
How to Send HTML Email Using R
How to Use Custom Fonts on a Website
How to Remove The Previously Selected Option from a Drop-Down Menu in a Table
How to Get Index of Parent Element Using Watir Webdriver
What Happens If The Action Field in a <Form> Has Parameters
While Display Image Crop Top and Bottom of Image Using CSS
Tools for Obfuscating HTML and CSS
CSS Calc Not Working in Safari and Fallback
Flex Elements Ignore Percent Padding in Firefox
HTML5 Canvas - Fill Circle with Image
How to Serve Up Images in Angular2
Jenkins Content Security Policy
When to Use <Br> Line Breaks Vs CSS Positioning