HTML <th> టాగ్

  • ముందు పేజీ <tfoot>
  • తరువాత పేజీ <thead>

నిర్వచనం మరియు ఉపయోగం

<th> టాబల్ శీర్షిక క్రమములను నిర్వచిస్తుంది.

HTML పట్టికలు రెండు క్రమములు కలిగి ఉంటాయి:

  • శీర్షిక క్రమములు - శీర్షిక సమాచారం కలిగిన క్రమములు (ఉపయోగించి) <th> క్రమములు సృష్టించడం)
  • డేటా క్రమములు - డేటా కలిగిన క్రమములు (ఉపయోగించి) <td> క్రమములు సృష్టించడం)

అప్రమేయంగా,<th> క్రమములలో వచనము బోల్డ్ మరియు మధ్యక్రమమునప్పుడు ఉంటుంది.

అప్రమేయంగా, <td> క్రమములలో వచనము సాధారణము మరియు ఎడమక్రింది క్రమమునప్పుడు ఉంటుంది.

మరింత చూడండి:

HTML శిక్షణా సంపుటం:HTML టేబుల్

HTML DOM పరికల్పన సంపుటం:TableHeader ఆబ్జెక్ట్

CSS శిక్షణా సంపుటం:ఫారమ్ స్టైలింగ్ అమర్చడం

ఉదాహరణ

ఉదాహరణ 1

మూడు పంక్తులు, రెండు శీర్షిక క్రమములు మరియు నాలుగు డేటా క్రమములు కలిగిన సాధారణ HTML పట్టిక:

<table>
  <tr>
    <th>నెలం</th>
    <th>సేవ్</th>
  </tr>
  <tr>
    <td>జనవరి</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ఫిబ్రవరి</td>
    <td>￥4500</td>
  </tr>
</table>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

ఎలా క్రమమును నిర్ణయించాలి <th> ఉపయోగించిన విషయం (సిఎస్ఎస్ ఉపయోగించి):

<table style="width:100%">
  <tr>
    <th style="text-align:left">నెలలు</th>
    <th style="text-align:left">పొద్దుతో ఖాతా</th>
  </tr>
  <tr>
    <td>జనవరి</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ఫిబ్రవరి</td>
    <td>￥4500</td>
  </tr>
</table>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

పట్టిక శీర్షిక క్రమములలో బ్యాక్‌గ్రౌండ్ కలర్ జోడించడం ఎలా చేస్తారు (CSS ఉపయోగించి):

<table>
  <tr>
    <th style="background-color:#FF0000">నెలలు</th>
    <th style="background-color:#00FF00">పొద్దుతో ఖాతా</th>
  </tr>
  <tr>
    <td>జనవరి</td>
    <td>￥3400</td>
  </tr>
 </table>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

పట్టిక శీర్షిక క్రమమును ఎలా అమర్చాలి (CSS ఉపయోగించి):

<table>
  <tr>
    <th style="height:100px">నెలం</th>
    <th style="height:100px">సేవ్</th>
  </tr>
  <tr>
    <td>జనవరి</td>
    <td>￥3400</td>
  </tr>
</table>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 5

పట్టిక శీర్షిక కోశంలో అనివార్యంగా పరివర్తన చేయకుండా ఎలా నిర్వచించాలి (సిఎస్ఎస్ ఉపయోగించి):

<table>
  <tr>
    <th>నెలం</th>
    <th style="white-space:nowrap">కొత్త కారు కోసం సేవ్</th>
  </tr>
  <tr>
    <td>జనవరి</td>
    <td>￥3400</td>
  </tr>
</table>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 6

ఎలా అప్రాంతం గా నిర్వహించాలి <th> ఉపయోగించిన విషయం (సిఎస్ఎస్ ఉపయోగించి):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">నెలం</th>
    <th style="vertical-align:bottom">సేవ్</th>
  </tr>
  <tr>
    <td>జనవరి</td>
    <td>￥3400</td>
  </tr>
</table>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 7

పట్టిక శీర్షిక కోశానికి వెడల్పు ఎంచుకోవడం ఎలా సెట్ చేయాలి (సిఎస్ఎస్ ఉపయోగించి):

<table style="width:100%">
  <tr>
    <th style="width:70%">నెలం</th>
    <th style="width:30%">సేవ్</th>
  </tr>
  <tr>
    <td>జనవరి</td>
    <td>￥3400</td>
  </tr>
</table>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 8

పట్టిక శీర్షికను ఎలా సృష్టించాలి:

<table>
  <tr>
    <th>పేరు</th>
    <th>ఇమెయిల్</th>
    <th>టెలిఫోన్</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 9

శీర్షికతో కూడిన పట్టికను ఎలా సృష్టించాలి:

<table>
  <caption>నెలవారీ సేవ్</caption>
  <tr>
    <th>నెలం</th>
    <th>సేవ్</th>
  </tr>
  <tr>
    <td>జనవరి</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ఫిబ్రవరి</td>
    <td>￥4500</td>
  </tr>
</table>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 10

ఎలా బహుళ వరుసలు లేదా బహుళ నిలువులు కలిగిన పట్టిక కోశాన్ని నిర్వచించాలి:

<table>
  <tr>
    <th>పేరు</th>
    <th>ఇమెయిల్</th>
    <th colspan="2">టెలిఫోన్</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>

స్వయంగా ప్రయత్నించండి

అంశం

అంశం విలువ వివరణ
abbr పాఠం తిట్టు కోశంలో ఉన్న విషయాన్ని చికిత్సించిన సంస్కరణ.
colspan సంఖ్య తిట్టు కోశాన్ని దాటివేయాలి కలిగిన పద్ధతి నిర్వచించండి.
headers header_id కోశానికి సంబంధించిన తిట్టు కోశాన్ని నిర్వచించండి.
rowspan సంఖ్య తిట్టు కోసం శీర్షిక కోశాన్ని దాటివేయాలి.
scope
  • col
  • colgroup
  • row
  • rowgroup
 హెడర్ సెల్ అనేది కలను లేదా పంక్తిని లేదా ఒక గుంపు కలను లేదా పంక్తులను ఎలా ఉంది?

గ్లౌబల్ అట్రిబ్యూట్

<th> టాగ్ ఇవెంట్ అట్రిబ్యూట్ ను కూడా మద్దతు ఇస్తుంది HTML లో గ్లౌబల్ అట్రిబ్యూట్。

ఇవెంట్ అట్రిబ్యూట్

<th> టాగ్ ఇవెంట్ అట్రిబ్యూట్ ను కూడా మద్దతు ఇస్తుంది HTML లో ఇవెంట్ అట్రిబ్యూట్。

డిఫాల్ట్ CSS సెట్టింగ్స్

అత్యంత బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను ఉపయోగిస్తాయి <th> ఎలమెంట్:

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

బ్రౌజర్ మద్దతు

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు
  • ముందు పేజీ <tfoot>
  • తరువాత పేజీ <thead>