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 can I float two tables next to each other left to right and center them both?
You may want to use inline-block instead of float:
table.table_on_the_left, table.table_on_the_right {
display:inline-block;
}
And to make the horizontal align text-align:center on the parent:
body {
text-align:center;
}
Check this Demo
Here you can know more about inline-block
Aside a recommendation plus if you are trying to set the layout for your page avoid to use <table> save it only for tabular data and instead use <div> and positioning.
How to create two tables, side by side with headings?
Would you consider doing it all in one table like this: https://jsfiddle.net/u97rggyy/3/
<table style="width:100%">
<tr>
<th colspan="2"><h2>First header links</h2></th>
<th colspan="2"><h2>Other Links</h2></th>
</tr>
<tr>
<td style="text-align: left;"><a href="">Link 1</a></td>
<td style="text-align: right; padding-right: 20px"><a href="">Link 2</a></td>
<td style="text-align: left;"><a href="">Other Link 1</a></td>
<td style="text-align: right; padding-right: 20px"><a href="">Other Link 2</a></td>
</tr>
<tr>
<td style="text-align: left; "><a href="">Link 3</a></td>
<td style="text-align: right; padding-right: 20px"><a href="">Link 4</a></td>
<td style="text-align: left;"><a href="">Other Link 3</a></td>
<td style="text-align: right; padding-right: 20px"><a href="">Other Link 4</a></td>
</tr>
<tr>
<td style="text-align: left;"><a href="">Link 5</a></td>
<td style="text-align: right; padding-right: 20px"><a href="">Link 6</a></td>
</tr>
</table>
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>Creating 3 small tables side by side centered
The problem is caused by a typo, as pointed out. My idea would be to remove the parent table and use display: inline-table to line them up and then text-align: center on a container to center them.
Moving away from nested tables results in much more readable markup. Also, the border attribute should be removed and created in CSS instead.
.wrap { text-align: center;}
table { display: inline-table; border-collapse: collapse;}
td { border: solid 1px #CCC; padding: 10px;}<div class="wrap"> <table> <tr> <td>Test 1</td> </tr> </table>
<table> <tr> <td>Test 2</td> </tr> </table>
<table> <tr> <td>Test 3</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 -- 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
Related Topics
Google Chrome Showing Black Border on Focus State for Button User Agent Styles
Can You Overlay a Transparent CSS3 Gradient Over a Background Image
How to Perform Arithmetic Operations in CSS
Sticky Top Div with Absolute Positioning
How to Limit a Table Cell to One Line of Text Using CSS
Using Less, CSS3 Calc() Doesn't Work Correctly
Display the Image in the Center of the Page
Margin-Bottom for <A> Link Elements
Bootstrap Horizontal Scrollable Tab Bar
Angular2 Material Dialog CSS, Dialog Size
What's the Difference Between @Import and @Use SCSS Rules
CSS Width and Max-Width Combined
Align Lines of Text to Center in Svg