-1

我们刚刚编写了一个基本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>

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

4

1 回答 1

3

这是因为<th>是一个表格单元格。在表格单元格 ( ) 中包含表格单元<td>格 ( <th>) 会给您带来意想不到的结果。您正在寻找的是<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>
于 2018-05-10T06:28:28.517 回答