Possible Duplicate:
Trying to get tables next to each other horizontal
I have two html tables already created. How can I place them side by side instead of 1 above the other?
You only need to float the first table. Then you simply add margin-right: 50px; (for example) to it and the second one will be next to it, 50px away. If you want to center them both, put them in a div with some width and add margin: 0 auto; .
Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table. <thead> − to create a separate table header.
To create a nested table, we need to create a table using the <table> tag. This table is known as the outer table. The second table that will be nested table is called the inner table. This table is also created using the <table> tag but there is a special thing that must be kept in mind.
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
display
on MDN - https://developer.mozilla.org/en/CSS:display float
on MDN - https://developer.mozilla.org/en/CSS/float If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With