I don't know what to put in the code of aligning the center of the table. I tried to insert the style="text-align: center;" in between the table tag but it did not work. Here is the code:
<h1 style="text-align: center;">Personal Finances</h1>
<table border="2px";>
<tr bgcolor="aqua">
<th>Month:</th>
<th>January</th>
<th>February</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
</tr>
<tr>
<th>Income:</th>
<td>P20 000</td>
<td>P25 000</td>
<td>P30 000</td>
<td>P35 000</td>
<td>P45 000</td>
<td>P50 000</td>
</tr>
<tr>
<th>Expenses:</th>
<td>P5000</td>
<td>P6000</td>
<td>P7000</td>
<td>P8000</td>
<td>P9000</td>
<td>P10 000</td>
</tr>
<tr>
<th>Savings:</th>
<td>P50 000</td>
<td>P55 000</td>
<td>P60 000</td>
<td>P65 000</td>
<td>P70 000</td>
<td>P75 000</td>
</tr>
</table>
This is just a practice of making tables. I am currently new to programming, particularly HTML and CSS. Thank you for the help!
CodePudding user response:
Add class for table as <table >
,
and then add styles on separate style sheet
.center {
margin-left: auto;
margin-right: auto;
}
CodePudding user response:
You can use margin-left: auto;
and margin-right: auto;
to do it. The code is as following-
<h1 style="text-align: center;">Personal Finances</h1>
<table border="2px" ; style="margin-left: auto; margin-right: auto;">
<tr bgcolor="aqua">
<th>Month:</th>
<th>January</th>
<th>February</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
</tr>
<tr>
<th>Income:</th>
<td>P20 000</td>
<td>P25 000</td>
<td>P30 000</td>
<td>P35 000</td>
<td>P45 000</td>
<td>P50 000</td>
</tr>
<tr>
<th>Expenses:</th>
<td>P5000</td>
<td>P6000</td>
<td>P7000</td>
<td>P8000</td>
<td>P9000</td>
<td>P10 000</td>
</tr>
<tr>
<th>Savings:</th>
<td>P50 000</td>
<td>P55 000</td>
<td>P60 000</td>
<td>P65 000</td>
<td>P70 000</td>
<td>P75 000</td>
</tr>
</table>