How to position a table in right side of screen using HTML?-CodePudding

How to position a table on the right side of the screen? The desired output looks like this:

How do we pull it off? Thanks!

The code I used is:

<!DOCTYPE html>
<html>
<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td colspan="2">Sum: $180</td>
    </tr>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </table>
</body>
</html>

CodePudding user response：

sometimes reading documentation may be useful

table,
th,
td {
  border: 1px solid black;
}
table { 
  float: right;
}

<table>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

CodePudding user response：

You can make the table right side by using following code:

table{
    width: auto;
    float: right;
}

table {
    width: auto;
    float: right;
}

<html>
<body>
<table>
    <tr>
        <td>
        Item 1
        </td>
        <td>
          Item 2
        </td>
    </tr>
</table>
</body>
</html>

CodePudding user response：

The needed code to pull it off is:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table, th, td {
  border: 1px solid black;
}

table {float: right;}
</style>
</head>
<body>

<table>
  <tr>
    <th colspan="2">Ouch</th>
  </tr>
  <tr>
    <th colspan="2"><img src=AAAAAHjpg" alt="Posporo" width="300" height="300"></th>
  </tr>
  <tr>
    <th colspan="2">Professional</th>
  </tr>
  <tr>
    <th>Affiliation</th>
    <td>Mafia</td>
  </tr>
  <tr>
    <th>Profession</th>
    <td>Eater</td>
  </tr>
  <tr>
    <th>Partner</th>
    <td>You</td>
  </tr>
  <tr>
    <th>Base</th>
    <td>Somewhere</td>
  </tr>
  <tr>
    <th colspan="2">Personal</th>
  </tr>
  <tr>
    <th>Education</th>
    <td>Pamantasan ng Unibersidad ng Paaralan</td>
  </tr>
  <tr>
    <th colspan="2">Signature</th>
  </tr>
  <tr>
    <th colspan="2">gd jasdagjadgjd</th>
  </tr>


</table>

</body>
</html>