HTML <th> تگ

ਵਰਣਨ ਅਤੇ ਵਰਤੋਂ

<th> ਟੈਗ ਹੈਂਡਲ ਵਿੱਚ ਹੈਂਡਲ ਵਾਲੇ ਟੇਬਲ ਵਿੱਚ ਸਿਰਲੇਖ ਸੈਲ ਨੂੰ ਦੱਸਦਾ ਹੈ。

HTML ਟੇਬਲ ਦੋ ਪ੍ਰਕਾਰ ਦੇ ਸੈਲ ਹਨ:

  • ਸਿਰਲੇਖ ਸੈਲ - ਸਿਰਲੇਖ ਸੂਚਨਾ ਵਾਲੇ (ਕੇਸ ਸੀਐੱਸਐੱਸ): <th> ਆਬਜੈਕਟ ਕਰਨ ਲਈ
  • ਡਾਟਾ ਸੈਲ - ਡਾਟਾ ਵਾਲੇ (ਕੇਸ ਸੀਐੱਸਐੱਸ): <td> ਆਬਜੈਕਟ ਕਰਨ ਲਈ

ਮੂਲ ਰੂਪ ਵਿੱਚ<th> ਆਬਜੈਕਟ ਵਿੱਚ ਟੈਕਸਟ ਬੋਲਡ ਅਤੇ ਸੈਂਟਰ ਹੋਣ ਹਨ。

ਮੂਲ ਰੂਪ ਵਿੱਚ، <td> ਅਣੂਰਜਕ ਵਾਲੇ ਟੈਕਸਟ ਹਨ ਅਤੇ ਸੈਂਟਰ ਹੋਣ ਹਨ。

ਇਸ ਦੇ ਲਈ ਵੀ ਦੇਖੋ:

HTML ਟਰੇਨਿੰਗ:HTML جدول

HTML DOM ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ:TableHeader ਆਬਜੈਕਟ

CSS ਟਰੇਨਿੰਗ:ਫਾਰਮ ਦੀ ਸਟਾਈਲ ਸੈਟ ਕਰੋ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਨ 1

ਤਿੰਨ ਪਰਵਾਲ, ਦੋ ਸਿਰਲੇਖ ਸੈਲ ਅਤੇ ਚਾਰ ਡਾਟਾ ਸੈਲ ਵਾਲੀ ਸਰਲ ਹੈਂਡਲ ਟੇਬਲ:

<table>
  <tr>
    <th>month</th>
    <th>savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

try it yourself

ਉਦਾਹਰਨ 2

ਕਿਵੇਂ ਮਿਲਾਇਆ ਜਾਵੇ? <th> content (using CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">ਮਹੀਨੇ</th>
    <th style="text-align:left">ਬੰਦਰਾਕਾਰ</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

try it yourself

ਉਦਾਹਰਨ 3

ਕਿਵੇਂ ਟੇਬਲ ਸਿਰਲੇਖ ਸੈਲ ਵਿੱਚ ਪਿੱਛੋਕੜੀ ਰੰਗ ਜੋੜੋ (ਕੇਸ ਸੀਐੱਸਐੱਸ):

<table>
  <tr>
    <th style="background-color:#FF0000">ਮਹੀਨੇ</th>
    <th style="background-color:#00FF00">ਬੰਦਰਾਕਾਰ</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
 </table>

try it yourself

ਉਦਾਹਰਨ 4

ਕਿਵੇਂ ਟੇਬਲ ਸਿਰਲੇਖ ਸੈਲ ਕੰਮਾਂ ਦੀ ਉਚਾਈ ਸੈਟ ਕਰੋ (ਕੇਸ ਸੀਐੱਸਐੱਸ):

<table>
  <tr>
    <th style="height:100px">month</th>
    <th style="height:100px">savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

try it yourself

Example 5

How to specify non-breaking in table header cells (using CSS):

<table>
  <tr>
    <th>month</th>
    <th style="white-space:nowrap">money saved for a new car</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

try it yourself

Example 6

How to vertically align <th> content (using CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">month</th>
    <th style="vertical-align:bottom">savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

try it yourself

Example 7

How to set the width of table header cells (using CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">month</th>
    <th style="width:30%">savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

try it yourself

Example 8

How to create table headers:

<table>
  <tr>
    <th>name</th>
    <th>email</th>
    <th>phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

try it yourself

Example 9

How to create a table with a header:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>month</th>
    <th>savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

try it yourself

Example 10

How to define table cells spanning multiple rows or columns:

<table>
  <tr>
    <th>name</th>
    <th>email</th>
    <th colspan="2">phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

try it yourself

attribute

attribute value description
abbr text decrees the abbreviated version of the content in the title cell.
colspan number decrees the number of columns the title cell should span.
headers header_id decrees one or more title cells related to the cell.
rowspan number decrees that the title cell should span the number of rows.
scope
  • col
  • colgroup
  • row
  • rowgroup
 تیار کی جاتی ہوئی جدول کی سکلی، سیریل کی سر یا کسی سیریل کی سر ہوتی ہے یا نہیں۔

عالمی صفت

<th> تگ بھی HTML میں عالمی صفت。

واقعی صفت

<th> تگ بھی HTML میں واقعی صفت。

اصل کی سی ایس ایس تنظیمات

بہترین بورسرز درج ذیل اصل قیمتیوں کا استعمال کریں گے <th> عنصر:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
{}

بورسر سمت

کروم ایج فائرفاکس سافری آپریا
کروم ایج فائرفاکس سافری آپریا
پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی