htmltablerowtableheader

Wrong usage of th tag

We just wrote a basic html code but it gives one outputs when th is used and gives and another output when tr is used

This is the actual output (with tr)

<table width="100%">
    <tr>
	<td align="center" width="50%"><b>FIRST DEGREE PROGRAMMES (AIDED PROGRAMMES)</b></td>
	<td align="center" width="50%"><b>FIRST DEGREE PROGRAMMES (UNAIDED PROGRAMMES)</b></td>
    </tr>
    <tr>
	<td valign="top">
	    <table border="1" style=" border-collapse: collapse;">
		<tr>
		    <th width="5%">No</th>
		    <th width="10%">DEGREE</th>
		    <th width="30%">PROGRAMME</th>
		    <th width="55%">COMPLEMENTARY COURSE</th>
		</tr>
		<tr>
		    <td>1</td>
		    <td>B.Sc</td>
		    <td>Botany &amp; Biotechnology</td>
		    <td>1. Biochemistry</td>
		</tr>
		<tr>
		    <td>2</td>
		    <td>B.Com</td>
	            <td>Commerce</td>
		    <td>1. Finance/Computer Applications/Co-operation (Electives)</td>
		</tr>
	    </table>
	</td>
	<td valign="top">
	    <table border="1" style=" border-collapse: collapse;">
		<tr>
		    <th width="5%">No</th>
		    <th width="10%">DEGREE</th>
		    <th width="30%">PROGRAMME</th>
		    <th width="55%">COMPLEMENTARY COURSE</th>
		</tr>
		<tr>
		    <td>1</td>
		    <td>B.Com</td>
		    <td>Commerce</td>
		    <td>1. Finance (Electives)</td>
		</tr>
		<tr>
		    <td>2</td>
		    <td>B.Com</td>
		    <td>B.Com Accounts &amp; Audit (Self Financing) </td>
		    <td>1. Accounts &amp; Audit (Electives)</td>
		</tr>
	    </table>
        </td>
    </tr>			
</table>

This is the confusing output (with th)

<table width="100%">
	<th>
		<td align="center" width="50%"><b>FIRST DEGREE PROGRAMMES (AIDED PROGRAMMES)</b></td>
		<td align="center" width="50%"><b>FIRST DEGREE PROGRAMMES (UNAIDED PROGRAMMES)</b></td>
	</th>
	<tr>
		<td valign="top">
			<table border="1" style=" border-collapse: collapse;">
				<tr>
					<th width="5%">No</th>
					<th width="10%">DEGREE</th>
					<th width="30%">PROGRAMME</th>
					<th width="55%">COMPLEMENTARY COURSE</th>
				</tr>
				<tr>
					<td>1</td>
					<td>B.Sc</td>
					<td>Botany &amp; Biotechnology</td>
					<td>1. Biochemistry</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B.Com</td>
					<td>Commerce</td>
					<td>1. Finance/Computer Applications/Co-operation (Electives)</td>
				</tr>
			</table>
		</td>
		<td valign="top">
			<table border="1" style=" border-collapse: collapse;">
				<tr>
					<th width="5%">No</th>
					<th width="10%">DEGREE</th>
					<th width="30%">PROGRAMME</th>
					<th width="55%">COMPLEMENTARY COURSE</th>
				</tr>
				<tr>
					<td>1</td>
					<td>B.Com</td>
					<td>Commerce</td>
					<td>1. Finance (Electives)</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B.Com</td>
					<td>B.Com Accounts &amp; Audit (Self Financing) </td>
					<td>1. Accounts &amp; Audit (Electives)</td>
				</tr>
			</table>
		</td>
	</tr>			
</table>

We are confused why there is an extra td coming when we use th for main table. If you are viewing using a UC Browser, you can simply press Ctrl button and click on the browser output which will give you the actual table layout. So in first output there will only two tds and for second output there will be three td's.

Solution

  • This is because <th> is a table cell. Including table cells (<td>) inside table cells (<th>) will give you unexpected results. What you are looking for is <thead>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

    As a boilerplate, you can define tables as below:

    <table>
  <!-- header -->
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <!-- body -->
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>