Неправильное использование тега th - PullRequest
Новая
       35

Неправильное использование тега th

0 голосов
/ 10 мая 2018

Мы только что написали базовый код 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 для основного стола. Если вы просматриваете, используя UC Browser, вы можете просто нажать кнопку Ctrl и щелкнуть по выводу браузера, который даст вам фактическую раскладку таблицы. Таким образом, в первом выводе будет только два td с, а для второго вывода будет три td.

1 Ответ

0 голосов
/ 10 мая 2018

Это потому, что <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>
...