how can I put the header right above the table in center-CodePudding

I have aligned the table right and also the header right but I want to put the header in middle of the table not on the right side .Also there is too much gap between the header and table , how can I narrow this gap ?

<body>
    <style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      overflow:hidden;padding:13px 14px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      font-weight:normal;overflow:hidden;padding:13px 14px;word-break:normal;}
    .tg .tg-l183{background-color:#96fffb;border-color:inherit;font-family:"Courier New", Courier, monospace !important;font-size:16px;
      font-weight:bold;text-align:left;vertical-align:top}
    .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
    </style>

    <header>
        <h1>DRAINAGE PLAN</h1>
        <h2>Drainge plan for Cypresshead</h2>
    </header>
 <h2 style="text-align:right">Pump Monitor</h2>
    <table style="margin-top:130px; margin-left:10px;"  align="right">
    <thead>
      <tr>
        <th >PUMP</th>
        <th >START-TIME</th>
        <th >DURATION(mins)</th>
        <th >PUMPED(gals)</th>
        <th >CYCLE</th>
        <th >STATUS</th>
      </tr>
    </thead>
</table>

CodePudding user response：

Put the table and the h2 in a div and add the css rule text-align: center to it. Also rem9ve the margin rules fr9m the table, the margin-top is responsible for the gap, while margin-left will misalign the table and yhe h2, because the h2 doesn't have it

CodePudding user response：

Add your header inside another table row:

<body>
    <style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      overflow:hidden;padding:13px 14px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      font-weight:normal;overflow:hidden;padding:13px 14px;word-break:normal;}
    .tg .tg-l183{background-color:#96fffb;border-color:inherit;font-family:"Courier New", Courier, monospace !important;font-size:16px;
      font-weight:bold;text-align:left;vertical-align:top}
    .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
    </style>

    <header>
        <h1>DRAINAGE PLAN</h1>
        <h2>Drainge plan for Cypresshead</h2>
    </header>
    <table style="margin-top:130px; margin-left:10px;"  align="right">

    <thead>
        <tr>
            <th colspan="6" ><h2 style="margin: 0; padding: 0;">Pump Monitor</h2></th>
        </tr>
      <tr>
        <th >PUMP</th>
        <th >START-TIME</th>
        <th >DURATION(mins)</th>
        <th >PUMPED(gals)</th>
        <th >CYCLE</th>
        <th >STATUS</th>
      </tr>
    </thead>
</table>

You can remove the border by adding border: none to your style.

I would suggest refactoring your code and adding all inline styles to a separate file or atleast inside your style tag.