Design alignment prob in HTML

Question

I have this picture below that I want to convert into web from a windows. I manage to do the design but I have a problem in the grid (I am using data tables in bootstrap) I can't do the design in what in the picture like.

    <table>
    <tr>
        <td>
            <div>
                <input type="radio" />
                Radio Button
            </div>
        </td>
        <td>
            <input type="radio" />
            Radio Button
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="text" />
            </div>
        </td>
        <td>
            < div>
                < input type="button" />
            </div>
        </td>
    </tr>
</table >
<table >
    <tr>
        <td>
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-md-6">
                               < i class="fa fa-list fa-fw" >< / i >Table
                                < /div >
                            < /div>
                        < /div>
                        < !-- /.panel-heading -->
                        < div class="panel-body">
                            < div class="dataTable_wrapper">
           < table class="table table-striped table-bordered  table-hover table-responsive nowrap"
                   role="grid" style="width: 100%;" id="dataTables-xxxx">
                   </table>
            </div>
                        </div>
                    </div>
                </div>
            < /div>
        </td>
        <td>
         <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-md-6">
                                    < i class="fa fa-list fa-fw"></i>Table
                                < /div>
                            < /div>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover table-responsive nowrap"
                                    role="grid" style="width: 100%;" id="dataTables-xxasdxx">
                                </table>
                            < /div>
                        < /div>
                    < /div>
                < /div>
            < /div>
        </ td>
    < /tr>
< /table>

My 2 Images bellow:

Answer 1

You can also, do something like this instead of using tables for layout and mimic as close as to your conversion UI.

table tags are meant primarily for data formatting. Bootstrap has the concept of grid layout which is meant for laying out your UI without using tables.

When you open the snippet in full screen, you would see the exact replica. However, when the screen is too small to fit in your entire content, it just wraps into the next row, giving you the flexibility to build responsive layout, which is not possible with table tags.

.custom-margin {
  margin-top: 10px;
  margin-bottom: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-container">
  <div class="radio">
    <label class="radio-inline">
      <input type="radio" name="" id="optionsRadiosOne" value="optionOne">Radio Button One
    </label>
    <label class="radio-inline">
      <input type="radio" name="" id="optionsRadiosTwo" value="optionTwo">Radio Button Two
    </label>
  </div>
  <div class="custom-margin">
    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">Enter Email :</label>
        <input type="text" class="form-control" placeholder="Enter Email">
      </div>
      <button type="submit" class="btn btn-primary">Send invitation</button>
    </form>
  </div>
  <div class="row">
    <div class="col-lg-3">
      <table class="table table-hover">
        <tr>
          <td>Header One
          </td>
          <td>Header Two
          </td>
        </tr>
        <tr>
          <td>Row Content
          </td>

          <td>Row Content
          </td>
        </tr>

        <tr>
          <td>Row Content
          </td>

          <td>Row Content
          </td>
        </tr>
      </table>
    </div>

    <div class="col-lg-6">
      <table class="table table-hover">
        <tr>
          <td>Header One
          </td>
          <td>Header Two
          </td>
        </tr>
        <tr>
          <td>Row Content
          </td>

          <td>Row Content
          </td>
        </tr>

        <tr>
          <td>Row Content
          </td>

          <td>Row Content
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 2

Try the below design hope it helps.You can customize the column property as your desire I just added the basic skeleton.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div class="container">
<div class="row">


<div class=" col-sm-12 form-group">
 <div class=" col-sm-2">
  <input type="radio" />
                Radio Button
  </div >
   <div class=" col-sm-2">
    <input type="radio" />
                Radio Button
     </div >
	   </div >
	
<div class=" col-sm-12 form-group ">
 <div class=" col-sm-2">
 <input type="text" class="form-control" id="usr">
 </div>
<div class=" col-sm-2">
 <button type="button" class="btn btn-default">Submit</button>
 </div>
  </div>
 

  <div class="table-responsive col-md-6">
    <table class="table table-bordered">
	  <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
	  </table>
  </div>
  <div class="table-responsive col-md-6">
      <table class="table table-bordered">
	  <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
	  </table>
  </div>
</div>
</div>
  </body>

Or See the below fiddle for a better look

table design demo fiddle (updated)