confusion in th and tr tags functionality

StackOverflow https://stackoverflow.com/questions/23680929

  •  23-07-2023
  •  | 
  •  

Question

I've the below code in my html table.

<table>
<tbody>
    <thead>
        <tr>
            <th align="right" colspan="4">
                <span class="font-style-bold">SCHEDULE OF RATES</span>
            </th>
        </tr>
    </thead>
    <thead>
        <tr>
            <th class="align-left">
                <div class="para">
                </div>
            </th>
            <th class="align-left">
                <div class="para">
                </div>
            </th>
            <th class="align-left">
                <div class="para">
                    <span class="font-style-bold">Unit</span>
                </div>
            </th>
            <th class="align-left">
                <div class="para">
                    <span class="font-style-bold">Rate $</span>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="align-left">
                <div class="para">
                </div>
            </td>
            <td rowspan="align-left">
                <div class="para">
                    <span class="font-style-boldunderline">ROOFER</span>
                </div>
            </td>
            <td rowspan="align-left">
                <div class="para">
                </div>
            </td>
            <td rowspan="align-left">
                <div class="para">
                </div>
            </td>
        </tr>
        <tr>
    </tbody>
</tbody>

here is the css

  .frame-all thead th {
margin-top: 0em;
padding-left: 0.2em;
padding-bottom: 0.2em;
}

when i run this i get the below screen.

enter image description here

when i change the th to td, i'm getting the below screen(which is what i want). just want to know why the difference and, can't this case be possible with th

enter image description here

Was it helpful?

Solution

There can be only one thead and tbody in a table. Both should be direct children of the <table> tag.

<table>
  <thead>
    <tr>
      <th align="right" colspan="4">
        <span class="font-style-bold">SCHEDULE OF RATES</span>
      </th>
    </tr>
    <tr>
      <th class="align-left">
        <div class="para">
        </div>
      </th>
      <th class="align-left">
        <div class="para">
        </div>
      </th>
      <th class="align-left">
        <div class="para">
          <span class="font-style-bold">Unit</span>
        </div>
      </th>
      <th class="align-left">
        <div class="para">
          <span class="font-style-bold">Rate $</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="align-left">
        <div class="para">
        </div>
      </td>
      <td rowspan="align-left">
        <div class="para">
          <span class="font-style-boldunderline">ROOFER</span>
        </div>
      </td>
      <td rowspan="align-left">
        <div class="para">
        </div>
      </td>
      <td rowspan="align-left">
        <div class="para">
        </div>
      </td>
    </tr>
  </tbody>
</table>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top