How to right align the button in html

Question

Actually I am trying to append the content from js to html table.And also with it I am trying to add a button below the table to the extreme right of the page.But I am not able to align it.Please guide where am I going wrong.

HTML Code is:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 20px;
}

#table {
  margin-left: -900px;
}

<!DOCTYPE html>
<html>

<head>

  <body>
    <div id="table" style="display:none">
      <div class="container text-center">
        <div class="row">
          <div class="col-sm-4"></div>
          <!--If I remove this line the table only will not be displayed-->

          <div class="col-sm-4">
            <div class="panel panel-primary">
              <div class="panel-heading">Reportees List</div>
              <table id="employee_table" class="table table-hover" cellspacing="0" width="100%">
                <tr>
                  <th>Number</th>
                  <th>Name</th>
                  <th>UserId</th>
                  <th>Count</th>
                </tr>

              </table>
            </div>
          </div>
          <div id="jiratable" style="display:none">
            <div class="container text-center">
              <div class="row">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                  <div class="panel panel-primary" style="width: 240%;">
                    <div class="panel-heading">JIRA - List</div>
                    <table class="table table-hover">
                      <table id="Jira_table" class="table table-hover" cellspacing="0" style="width:240%;table-layout:fixed">
                        <thead>
                          <tr>
                            <th width="80">Number</th>
                            <th>JiraNumber</th>
                            <th>JiraStatus</th>
                            <th>EmailId</th>

                          </tr>
                        </thead>
                      </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="container">
              <div style="text-align:right; width:100%; padding:0;">
                <button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>

              </div>
            </div>
  </body>

</html>

I don't know where I am going wrong.

Expected output is:

Number  id   name  count       Number    JiraNumber   Jirastatus    EmailId
1       AG   RAJ     0             1       TR-150     RS-Release    **@gmail
2       TG   Ram     3             1       TR-152     RS1-Release   **@gmail
                                   1       TR-153     RS2-Release   **@gmail

                                                         SendMail  Cancel

So I want the SendMail and cancel button to right.But the output is:

Number  id   name  count      Number   JiraNumber  Jirastatus     EmailId
1     AG   RAJ     0             1       TR-150    RS-Release     **@gmail
2     TG   Ram     3             1       TR-152    RS1-Release    **@gmail
                                 1       TR-153    RS2-Release    **@gmail

                                        SendMail  Cancel

hai. from the code, u missing a lots of closing tag. just want to ask if the data from database? — Fzstyle, Jan 31 '19 at 06:16
Possible duplicate of [How to align content of a div to the bottom?](https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom) — Fzstyle, Jan 31 '19 at 06:35
You can generally find missing closing tags by running your code through an HTML validator such as https://validator.w3.org/ — Robert Talada, Feb 01 '19 at 04:05
Here is what the validator spit out: Error: Element head is missing a required instance of child element title. Error: Start tag for table seen but the previous table is still open. Error: End tag for body seen, but there were unclosed elements. Error: Unclosed element div. From line 27, column 11; to line 27, column 51 Error: Unclosed element div. From line 9, column 9; to line 9, column 25 Error: Unclosed element div. From line 8, column 7; to line 8, column 41 Error: Unclosed element div. From line 7, column 5; to line 7, column 41 — Robert Talada, Feb 01 '19 at 04:08

score 1 · Answer 1 · edited Feb 01 '19 at 04:52

This is a list of your problems.

You're missing alot of closing tags
Your table won't display because you have style="display:none" which mean it won't display. info for display
In the code you have lots of missing aligns which makes the table weird.
class="btn btn-primary btn-lg pull-right" this class is already right align
To align the tables side by side, either make a parent table for the data table or **within the CSS, you can set the division positioning **(which mean more work/more code you need to have)

Im suggesting you use this code.

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50px;
  /*edit this as you want*/
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 20px;
}


/* to clear the border */

.noborder {
  border: none;
}

<!DOCTYPE html>
<html>

<body>
  <table>
    <td>
      <div id="table" style="display:block">
        <div class="container text-center">
          <div class="row">
            <div class="col-sm-4">
              <div class="panel panel-primary">
                <div class="panel-heading">Reportees List</div>
                <table id="employee_table" class="table table-hover" cellspacing="0" width="100%">
                  <tr>
                    <th>Number</th>
                    <th>Name</th>
                    <th>UserId</th>
                    <th>Count</th>
                  </tr>

                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </td>
    <td>
      <div id="jiratable" style="display:block">
        <div class="container text-center">
          <div class="row">
            <div class="col-sm-4">
              <div class="panel panel-primary">
                <div class="panel-heading">JIRA - List</div>
                <table id="Jira_table" class="table table-hover" cellspacing="0">

                  <tr>
                    <th>Number</th>
                    <th>JiraNumber</th>
                    <th>JiraStatus</th>
                    <th>EmailId</th>

                  </tr>

                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </td>
    <tr>
      <td class="noborder"></td>
      <td class="noborder">
        <div class="container">
          <div style="text-align:right; width:100%; padding:0;">
            <button id="sendMail" onclick="sendMail()">SendMail</button>
          </div>
        </div>
      </td>
  </table>
</body>

</html>

Summary

The important thing you need to change are the closing of tags. This might effect your output.

Refer: About closing tag

Actually I wanted the two tables to be beside each other but they appear one below the another.Please Suggest.Thanks a lot... — Ramya, Jan 31 '19 at 08:02
I have made the changes but the output is not as expected.Please advise — Ramya, Jan 31 '19 at 10:06

supriya suresh g · Answer 2 · 2019-02-01T03:53:04.833

    *You are not properly closed end div tags properly 
    *remove style hidden
    *merge two tables and remove a border






    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
      border: none !important;
    }

    td,
    th {
      text-align: left;
      padding: 20px;
    }
    <!DOCTYPE html>
    <html>

    <body>
      <div id="table" style="display:block">
        <div class="container text-center">
          <div class="row">
            <div class="col-sm-4">
              <div class="panel panel-primary">
                <div class="panel-heading">Reportees List</div>
                <table id="employee_table" class="table table-hover" cellspacing="0" width="100%" cellspacing="0">
                  <tr>
                    <th>Number</th>
                    <th>Name</th>
                    <th>UserId</th>
                    <th>Count</th>
                    <th>Number</th>
                    <th>JiraNumber</th>
                    <th>JiraStatus</th>
                    <th>EmailId</th>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td> Ag</td>
                    <td>1</td>
                    <td>Raj </td>
                    <td>0</td>
                    <td>1 </td>
                    <td>TR0-150</td>
                    <td>GMAIL </td>

                  </tr>

                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div style="text-align:right; width:100%; padding:0;">
          <button id="sendMail" class="btn btn-primary btn-lg pull-right" style="color: white;  background-color: blue;padding:5px" onclick="sendMail()">SendMail</button>

        </div>
      </div>
    </body>

    </html>

thanks for helping answering the post, please do use snippet tool to help other see your output. — Fzstyle, Jan 31 '19 at 08:29

How to right align the button in html

2 Answers2