How to Center a Table and Undo Indentation? - html

Question

I built a table in HTML:
But the problem is that I could not center the table to the center of the screen, and I could not arrange it in such a way that the columns would be without indentations, and one below the other (i.e. 'aaaaa' would be below 'Name', 'bbbbb' would be below 'address' and 'ccccc' would be below 'phone').
Do you have any idea how to center the table and how to align the columns so that they will be without indentations? Thanks in advance!
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</div>
</tbody>
</table>

Answer 1

This is a simple exercise in CSS- use margin: 0 auto to center it horizontally.
You could also do this with flex or other stylnig to suit as well. I added some borders and spacing for the ths and tds to demonstrate the alignment.
You can also style the content of the th's and the td's to give specific styling for each - eg- have the th a different font-size and color than the td's - but still have them left-aligned.
EDIT - I have just noticed that you have divs inside the table - this is invalid - the only valid child of a tbody - is a tr element. I have removed them from the code in my solution - sorry I didn't see that vbefore - dangers of copy / paste.
table {
border: solid 1px #e1e1e1;
border-collapse: collapse;
margin: 0 auto;
}
th, td{
border: solid 1px #e1e1e1;
padding: 4px 8px
}
th {
font-size: 12px;
color: #b9b9b9;
text-align: left
}
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td >aaaaa aaaaa </td>
<td >bbbbb bbbbb</td>
<td >ccccc ccccc</td>
</tr>
</tbody>
</table>

Answer 2

https://www.w3schools.com/howto/howto_css_table_center.asp
Add class="center" to the table html tag
<table class="center" id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</div>
</tbody>
</table>
and add some CSS, such as
.center {
margin-left: auto;
margin-right: auto;
}
or (even simpler):
.center {
margin: 0 auto;
}

Answer 3

table{
margin:0 auto;
}
th,td{
text-align:left;
}
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >a</td>
<td >b</td>
<td >c</td>
</tr>
</div>
</tbody>
</table>

Answer 4

Please amend you codes to something similar to :
.div1{
width:100%;
}
table, th, td {
border: 1px solid black;
}
.table1{
margin: 0 auto;
}
<div class=div1>
<table class=table1>
<tr>
<td>Name</td>
<td>Adress</td>
<td>Phone</td>
</tr>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</table>
</div>