CODEWITHSUNDEEP
javascripthtmlcss
Sami
Sami

Reputation: 80

How can I put the header right above the table in center?

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;" class="tg" align="right">
    <thead>
      <tr>
        <th class="tg-l183">PUMP</th>
        <th class="tg-l183">START-TIME</th>
        <th class="tg-l183">DURATION(mins)</th>
        <th class="tg-l183">PUMPED(gals)</th>
        <th class="tg-l183">CYCLE</th>
        <th class="tg-l183">STATUS</th>
      </tr>
    </thead>
</table>

Upvotes: 1

Views: 66

Answers (2)

Mustafa_hd
Mustafa_hd

Reputation: 149

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;" class="tg" align="right">

    <thead>
        <tr>
            <th colspan="6" ><h2 style="margin: 0; padding: 0;">Pump Monitor</h2></th>
        </tr>
      <tr>
        <th class="tg-l183">PUMP</th>
        <th class="tg-l183">START-TIME</th>
        <th class="tg-l183">DURATION(mins)</th>
        <th class="tg-l183">PUMPED(gals)</th>
        <th class="tg-l183">CYCLE</th>
        <th class="tg-l183">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 at least inside your style tag.

Upvotes: 1

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

Put the table and the h2 in a div and add the CSS rule text-align: center to it.

Also remove the margin rules from the table. The margin-top is responsible for the gap, while margin-left will misalign the table and the h2, because the h2 doesn't have it.

Upvotes: 0

Related Questions