HTML <tfoot> ਟੈਗ

  • ਪਿਛਲਾ ਪੰਨਾ <textarea>
  • ਅਗਲਾ ਪੰਨਾ <th>

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

<tfoot> ਟੈਗ ਨੂੰ ਯੂਜ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਕਿ ਐੱਚਟੀਐੱਮਐੱਲ ਟੇਬਲ ਵਿੱਚ ਫੁੱਟਰ ਦੇ ਕੰਟੈਂਟ ਨੂੰ ਗਰੁੱਪ ਕੀਤਾ ਜਾ ਸਕੇ।

<tfoot> ਈਲੈਮੈਂਟ ਨਾਲ <thead> ਅਤੇ <tbody> ਈਲੈਮੈਂਟਾਂ ਦੇ ਸਮੂਹ ਨਾਲ ਟੇਬਲ ਦੇ ਹਰੇਕ ਹਿੱਸੇ (ਫੁੱਟਰ, ਹੈੱਡਰ, ਮੁੱਖ ਭਾਗ) ਨੂੰ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ。

ਬਰਾਉਜ਼ਰ ਇਨ੍ਹਾਂ ਈਲੈਮੈਂਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਨ ਤਾਕਿ ਟੇਬਲ ਦੇ ਮੁੱਖ ਭਾਗ ਨੂੰ ਸਰਕਲ ਕਰਦੇ ਸਮੇਂ ਹੈੱਡਰ ਅਤੇ ਫੁੱਟਰ ਅਲੱਗ-ਅਲੱਗ ਵਿਖਾਏ ਜਾ ਸਕਣ। ਇਸ ਤੋਂ ਇਲਾਵਾ ਬਹੁ-ਪੰਨੇ ਵਿੱਚ ਪ੍ਰਿੰਟ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਵੱਡੇ ਟੇਬਲਾਂ ਵਿੱਚ ਇਨ੍ਹਾਂ ਈਲੈਮੈਂਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੈੱਡਰ ਅਤੇ ਫੁੱਟਰ ਹਰ ਪੰਨੇ ਦੇ ਉੱਪਰ ਅਤੇ ਹੇਠਾਂ ਪ੍ਰਿੰਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ。

ਨੋਟਸ: <tfoot> ਈਲੈਮੈਂਟ ਵਿੱਚ ਇੱਕ ਜਾਂ ਕਈ <td>￥3400</td> ਟੈਗ。

<tfoot> ਟੈਗ ਦੇ ਅੰਦਰ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ: ਸਮਾਨ ਵਜੋਂ <table> ਈਲੈਮੈਂਟ ਦੇ ਚੱਚੇ ਈਲੈਮੈਂਟ ਪਿੱਛੇ ਕਿਸੇ ਵੀ <caption>、<colgroup>、<thead> ਅਤੇ <tbody> ਈਲੈਮੈਂਟ ਦੇ ਬਾਅਦ。

ਸੁਝਾਅ:ਮੂਲਤਬੀ ਤੌਰ 'ਤੇ، <thead>、<tbody> ਅਤੇ <tfoot> ਈਲੈਮੈਂਟ ਟੇਬਲ ਦੇ ਲੇਆਉਟ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦੇ। ਪਰ, ਤੁਸੀਂ ਈਲੈਮੈਂਟ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ (ਦੇਖੋ ਹੇਠ ਦੇ ਉਦਾਹਰਣ)!

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

<thead>、<tbody> ਅਤੇ <tfoot> ਈਲੈਮੈਂਟ ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੀ ਐੱਚਟੀਐੱਮਐੱਲ ਟੇਬਲ:

<table>
  <thead>
    <td>￥3400</td>
      <th>ਮਹੀਨੇ</th>
      <th>ਬੰਦਰਾ</th>
    <td>￥7900</td>
  </thead>
  <tbody>
    <td>￥3400</td>
      <td>ਜਨਵਰੀ</td>
      ￥3400
    <td>￥7900</td>
    <td>￥3400</td>
      <tr>
      <td>ਫਰਵਰੀ</td>
    <td>￥7900</td>
  </tbody>
  <tfoot>
    <td>￥3400</td>
      <tr style="height:100px">
      <td>ਕੁੱਲ</td>
    <td>￥7900</td>
  </tr>
</tfoot>

</table>

ਉਦਾਹਰਣ 2

ਯੂਜ਼ ਸੀਐੱਸਐੱਸ ਨਾਲ <thead>、<tbody> ਅਤੇ <tfoot> ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <td>￥3400</td>
      <th>ਮਹੀਨੇ</th>
      <th>ਬੰਦਰਾ</th>
    <td>￥7900</td>
  </thead>
  <tbody>
    <td>￥3400</td>
      <td>ਜਨਵਰੀ</td>
      ￥3400
    <td>￥7900</td>
    <td>￥3400</td>
      <tr>
      <td>ਫਰਵਰੀ</td>
    <td>￥7900</td>
  </tbody>
  <tfoot>
    <td>￥3400</td>
      <tr style="height:100px">
      <td>ਕੁੱਲ</td>
    <td>￥7900</td>
  </tr>
</tfoot>

</table>

ਉਦਾਹਰਣ 3

ਕਿਵੇਂ ਸਾਂਝਾ ਕਰੋ <tfoot> ਵਿੱਚ ਦਾ ਕੰਟੈਂਟ (ਯੂਜ਼ ਸੀਐੱਸਐੱਸ):

<table style="width:100%">
  <td>￥3400</td>
    <th>ਮਹੀਨੇ</th>
    <th>ਬੰਦਰਾ</th>
  <td>￥7900</td>
  <td>￥3400</td>
    <td>ਜਨਵਰੀ</td>
    ￥3400
  <td>￥7900</td>
  <td>￥3400</td>
    <tr>
    <td>ਫਰਵਰੀ</td>
  <td>￥7900</td>
  <tfoot style="text-align:center">
    <td>￥3400</td>
      <tr style="height:100px">
      <td>ਕੁੱਲ</td>
    <td>￥7900</td>
  </tr>
</tfoot>

</table>

ਉਦਾਹਰਣ 4

ਕਿਵੇਂ ਊਰਧਵਾਗਾਂ ਵਿੱਚ ਸਾਂਝਾ ਕਰੋ <tfoot> ਵਿੱਚ ਦਾ ਕੰਟੈਂਟ (ਯੂਜ਼ ਸੀਐੱਸਐੱਸ):

<table style="width:100%">
  <td>￥3400</td>
    <th>ਮਹੀਨੇ</th>
    <th>ਬੰਦਰਾ</th>
  <td>￥7900</td>
  <td>￥3400</td>
    <td>ਜਨਵਰੀ</td>
    ￥3400
  <td>￥7900</td>
  <td>￥3400</td>
    <tr>
    <td>ਫਰਵਰੀ</td>
  <td>￥7900</td>
  <td>￥4500</td>
    <tfoot style="vertical-align:bottom">
      <tr style="height:100px">
      <td>ਕੁੱਲ</td>
    <td>￥7900</td>
  </tr>
</tfoot>

</table>

ਆਪਣੇ ਆਪ ਦੇਖੋ

<tfoot> ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ ਸਰਵਸਾਮਾਨ ਪ੍ਰਤੀਯੋਗਿਤਾ.

HTML ਵਿੱਚ ਸਰਵਸਾਮਾਨ ਪ੍ਰਤੀਯੋਗਿਤਾ

<tfoot> ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ HTML ਵਿੱਚ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ.

ਮੂਲਤਬੀ CSS ਸੈਟਿੰਗ

ਮੋਸਤ ਬਰਾਉਜ਼ਰ ਹੇਠ ਲਿਖੇ ਮੂਲਤਬੀ ਮੁੱਲਾਂ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ <tfoot> ਅਣੂਮਾਨਿਤ:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

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

ਚਰਮੋਨੀ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਚਰਮੋਨੀ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ
  • ਪਿਛਲਾ ਪੰਨਾ <textarea>
  • ਅਗਲਾ ਪੰਨਾ <th>