th标签的错误使用

Question

我们刚刚编写了一个基本的html 代码，但它在使用th 时给出一个输出，并在使用tr 时给出另一个输出

这是实际输出（带有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>

这是令人困惑的输出（带有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>

当我们将th 用于主表时，我们很困惑为什么会有一个额外的td。如果您正在使用UC Browser 查看，您只需按Ctrl 按钮并单击浏览器输出，这将为您提供实际的表格布局。所以第一个输出只有两个tds，第二个输出有三个td。

Answer 1

这是因为<th> 是一个表格单元格。在表格单元格 (<th>) 中包含表格单元格 (<td>) 会给您带来意想不到的结果。你要找的是<thead>:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

作为样板，您可以定义如下表：

<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>