Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML — Two Tables Horizontally Side by Side

Tags:

I'm trying to display tables next to each other horizontally, but this is what I'm getting.
enter image description here

<tr>
<th>
      <span onclick="toggleDiv('favData', 'favDataImg')" style="cursor: hand;">Favorites <img   name="favDataImg" src="../images/minus.gif" /></span>
</th>
</tr>
<tr>
    <td style="width: 300px; text-align: left; padding-right: 30px;">
<div id="favData" style="display: block;">
<fieldset style="width: 240px;">
<legend>Favorites</legend>
<table border="0" align="left">

<input type="radio" name="publicRadio" value="Public" >Public: </input>

<select  name="publicDropDown">
<option value="Public Dropdown" selected="selected">Public Dropdown</option>
</select>

<br><br>
<input type="radio" name="userRadio" value="User" >User: </input>

<select  name="userDropDown">
<option value="User Dropdown" selected="selected">User Dropdown</option>
</select>

<br><br>
<input type="radio" name="customRadio" value="Custom" >Custom: </input>

</table>
</fieldset>


<fieldset style="width: 240px;">
<legend>Favorites</legend>
<table border="0" align="left">

<input type="radio" name="publicRadio" value="Public" >Public: </input>

<select  name="publicDropDown">
<option value="Public Dropdown" selected="selected">Public Dropdown</option>
</select>

<br><br>
<input type="radio" name="userRadio" value="User" >User: </input>

<select  name="userDropDown">
<option value="User Dropdown" selected="selected">User Dropdown</option>
</select>

<br><br>
<input type="radio" name="customRadio" value="Custom" >Custom: </input>

</table>
</fieldset>



</div>
</td>
</tr>
like image 320
Doc Holiday Avatar asked Jan 18 '12 20:01

Doc Holiday


People also ask

How do I align two tables in HTML?

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; .

How do you write side by side in HTML?

Using float and margin The left div is styled with width:50% and float:left – this creates the green colored div that horizontally covers half of the screen. The right div is then set to margin-left:50% – this immediately places it to the right of the left div.


2 Answers

This answer is taken from Chris Baker's answer of a duplicate question. Please up vote his answer.

One can use float: left or display: inline-block depending on content and space:

<table style="display: inline-block">

<table style="float: left">

This page is already setup with the HTML to try out and see how it looks in the browser: http://jsfiddle.net/SM769/

Documentation

  • CSS display on MDN - https://developer.mozilla.org/en/CSS:display
  • CSS float on MDN - https://developer.mozilla.org/en/CSS/float

Example

<table style="float: left">
   <tr>
      <td>..</td>
   </tr>
</table>

<table style="float: left">
   <tr>
      <td>..</td>
   </tr>
</table>
like image 177
Nathan Avatar answered Oct 03 '22 09:10

Nathan


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.

like image 40
SpoonNZ Avatar answered Oct 03 '22 07:10

SpoonNZ