Home > front end >  I cannot align to center my table using HTML & CSS language
I cannot align to center my table using HTML & CSS language

Time:03-10

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>

  • Related