标签使用错误

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 作为主要 table 时会有额外的 td。如果您使用 UC Browser 查看，只需按 Ctrl 按钮并单击浏览器输出，这将为您提供实际的 table 布局。所以在第一个输出中只有两个 tds 而对于第二个输出将有三个 td's.

Answer 1

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

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

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

标签使用错误

Wrong usage of th tag

html

tablerow

tableheader