HTML <tr> ਟੈਗ

  • ਪਿਛਲਾ ਪੰਨਾ <title>
  • ਅਗਲਾ ਪੰਨਾ <track>

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

<tr> ਟੈਗ ਨੂੰ HTML ਟੇਬਲ ਵਿੱਚ ਰੋਜ਼ਗਾਰ ਵਿੱਚ ਦਰਸਾਉਂਦਾ ਹੈ。

<tr> ਐਲੀਮੈਂਟ ਇੱਕ ਜਾਂ ਕਈ <th> ਜਾਂ <td> ਐਲੀਮੈਂਟ

ਹੋਰ ਦੇਖੋ:

HTML ਟ੍ਰੇਨਿੰਗHTML ਟੇਬਲ

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

CSS ਟ੍ਰੇਨਿੰਗਟੇਬਲ ਸਟਾਈਲ ਸੈਟ ਕਰੋ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਇੱਕ ਸਧਾਰਨ ਤਿੰਨ ਲਾਈਨਾਂ ਵਾਲਾ HTML ਟੇਬਲ; ਇੱਕ ਸਿਖਰ ਲਾਈਨ ਅਤੇ ਦੋ ਡਾਟਾ ਲਾਈਨਾਂ:

<table>
  <tr>
    <th>ਮਹੀਨੇ</th>
    <th>ਬੰਦਰੀ</th>
  <td>186-2345-6789</td>
  <tr>
    <td>ਜਨਵਰੀ</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
  <tr>
    <td>ਫਰਵਰੀ</td>
    <td>￥4500</td>
  <td>186-2345-6789</td>
</tr>

</table>

ਉਦਾਹਰਣ 2

ਕਿਵੇਂ ਮੁਕਤ ਕਰੋ: <tr> ਵਿੱਚ ਦਾਇਰਾ (ਵਰਤੋਂ CSS):

<table style="width:100%">
  <tr>
    <th>ਮਹੀਨੇ</th>
    <th>ਬੰਦਰੀ</th>
  <td>186-2345-6789</td>
  <tr style="text-align:right">
    <td>ਜਨਵਰੀ</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
</tr>

</table>

ਉਦਾਹਰਣ 3

ਕਿਵੇਂ ਟੇਬਲ ਕਰਨ ਵਿੱਚ ਪਿੱਛੇ ਰੰਗ ਜੋੜੋ (ਵਰਤੋਂ CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>ਮਹੀਨੇ</th>
    <th>ਬੰਦਰੀ</th>
  <td>186-2345-6789</td>
  <tr>
    <td>ਜਨਵਰੀ</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
 </tr>

</table>

ਉਦਾਹਰਣ 4

ਕਿਵੇਂ ਊਂਚਾਈ ਮੁਕਤ ਕਰੋ: <tr> ਵਿੱਚ ਦਾਇਰਾ (ਵਰਤੋਂ CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>ਮਹੀਨੇ</th>
    <th>ਬੰਦਰੀ</th>
  <td>186-2345-6789</td>
  <tr style="vertical-align:bottom">
    <td>ਜਨਵਰੀ</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
</tr>

</table>

ਉਦਾਹਰਣ 5

ਕਿਵੇਂ ਟੇਬਲ ਸਿਖਰ ਬਣਾਓ:

<table>
  <tr>
    <th>ਨਾਮ</th>
    <th>ਈ-ਮੇਲ</th>
    <th>ਟੈਲੀਫੋਨ</th>
  <td>186-2345-6789</td>
  <tr>
    <th colspan="2">ਫੋਨ</th>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
  <td>186-2345-6789</td>
</tr>

</table>

ਉਦਾਹਰਣ 6

ਕਿਵੇਂ ਸਿਖਰ ਵਾਲੇ ਟੇਬਲ ਬਣਾਓ:

<table>
  <caption>ਮਹੀਨੇ ly savings</caption>
  <tr>
    <th>ਮਹੀਨੇ</th>
    <th>ਬੰਦਰੀ</th>
  <td>186-2345-6789</td>
  <tr>
    <td>ਜਨਵਰੀ</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
  <tr>
    <td>ਫਰਵਰੀ</td>
    <td>￥4500</td>
  <td>186-2345-6789</td>
</tr>

</table>

ਉਦਾਹਰਣ 7

ਬਹੁਤ ਸਾਰੀਆਂ ਲਾਈਨਾਂ ਜਾਂ ਸ਼ਾਮਲ ਕਰੋ ਕਿਵੇਂ ਟੇਬਲ ਸੈਲਸ਼ਨਾਂ ਨੂੰ ਵਰਤੋਂ ਕਰੋ:

<table>
  <tr>
    <th>ਨਾਮ</th>
    <th>ਈ-ਮੇਲ</th>
    电话
  <td>186-2345-6789</td>
  <tr>
    <th colspan="2">ਫੋਨ</th>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  <td>186-2345-6789</td>
</tr>

</table>

ਸਵੈ ਕੋਸ਼ਿਸ਼ ਕਰੋ

<tr> ਟੈਗ ਇਵੈਂਟ ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਵੀ ਸਮਰਥਨ ਕਰਦੇ ਹਨ ਗਲੋਬਲ ਪ੍ਰਾਪਰਟੀ.

HTML ਵਿੱਚ ਗਲੋਬਲ ਪ੍ਰਾਪਰਟੀ

<tr> ਟੈਗ ਇਵੈਂਟ ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਵੀ ਸਮਰਥਨ ਕਰਦੇ ਹਨ HTML ਵਿੱਚ ਈਵੈਂਟ ਪ੍ਰਾਪਰਟੀ.

ਮੂਲਤਵੀ ਕ੍ਰਿਪਸ ਸੈਟਿੰਗ

ਮੋਸਤ ਬਰਾਉਜ਼ਰ ਹੇਠ ਲਿਖੇ ਡਿਫਾਲਟ ਮੁੱਲਾਂ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ <tr> ਐਲੀਮੈਂਟ:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਚਰਮੀ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਚਰਮੀ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ
  • ਪਿਛਲਾ ਪੰਨਾ <title>
  • ਅਗਲਾ ਪੰਨਾ <track>