HTML/CSSテーブルは整列していませんが、テーブル内のテキストはまだパッドになっています

Question

すべてがちょうどうんざりしている問題があります。私はいくつかのソリューションを試しましたが、私のプロファイルページは、必要に応じて調整されません。私はすべてを中心にして清潔にしたい。以下はその外観の例です：https://imgur.com/t0OzF35また、右境界線を追加するにはどうすればいいですかの間に境界線を追加します。ユーザ名：およびEdmin。

<main> 
<div class="container body-container"> 
    <div class="row"> 
     <div id="main" class="col-md-9"> 
      <div style="text-align: center"> 
       <style> 
        table { 
         border-spacing: 0; 
         margin:0; 
         padding: 0; 
         border-collapse: collapse; 
         width: 50%; 
        } 
        table, th, td { 
         margin:0; 
         padding: 0; 
         border: 3px solid black; 
        } 
        th { 
         margin:0; 
         padding: 0; 
         background-color: #2c3e50; 
         color: white; 
         text-align: center; 
         height: 50px; 
        } 
       </style> 
       <div class="form-group"> 
        <img style="height: 250px; width: 250px; border:8px dashed #2c3e50" hspace="100" th:src="@{'data:image/jpeg;base64,' + ${image}}" /><br/> 
        <br/> 
        <label class="col-sm-4 control-label" for="image">Change profile picture</label> 
        <div class="col-sm-4"> 
         <input type="file" class="form-control" id="image" placeholder="Image" name="multipartFile" required="required"/> 
         <span class="help-block">Profile picture can be up to 32 MBs</span> 
        </div> 
       </div> 

       <table cellspacing="0" cellpadding="0"> 
        <tr> 
         <th>E-mail:</th> 
         <th><span th:text="${user.email}"><br/></span></th> 
        </tr> 
       </table> 

       <table cellspacing="0" cellpadding="0"> 
        <tr> 
         <th>Name:</th> 
         <th> <span th:text="${user.fullName}"></span></th> 
        </tr> 
        <tr> 
         <th>Username:</th> 
         <th> <span th:text="${user.username}"></span></th> 
        </tr> 
       </table> 
       <table cellspacing="0" cellpadding="0"> 
        <tr> 
         <th>Age:</th> 
         <th><span th:text="${user.age}"><br/></span></th> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </div> 
</div> 
</main> 

Answer 1

EDITED

table { 
    border-spacing: 0; 
    margin:0 auto; 
    padding: 0; 
    border-collapse: collapse; 
    width: 50%; 
    table-layout: fixed; 
} 
table, th, td { 
    padding: 0; 
    border: 3px solid black; 
    border-collapse: collapse; 
} 

Answer 2

複数の行を含むつのテーブルを使用します。

すべての行を独自のテーブルに配置しないでください。

（また、データセルにはth要素を使用しないでください。tdを使用してください。見出しセルにはthを使用してください）。