HTMLలో పట్టికలు: HTMLలో పట్టికలను సృష్టించడం మరియు ఫార్మాటింగ్ చేయడం కోసం ఒక గైడ్

అడ్డు వరుసలు మరియు నిలువు వరుసలతో నిర్మాణాత్మక ఆకృతిలో డేటాను ప్రదర్శించడానికి HTMLలో పట్టిక ఒక ముఖ్యమైన భాగం. HTMLలో, <table>, <tr> మరియు <td> ట్యాగ్‌లను ఉపయోగించి పట్టికలు సృష్టించబడతాయి.

<table> ట్యాగ్ అన్ని అడ్డు వరుసలు మరియు నిలువు వరుసలను కలిగి ఉన్న ప్రధాన పట్టిక కంటైనర్‌ను సూచిస్తుంది. అడ్డు వరుసలు <tr>(టేబుల్ రో) ట్యాగ్‌ని ఉపయోగించి నిర్వచించబడతాయి, అయితే అడ్డు వరుసలలోని సెల్‌లు <td>(టేబుల్ డేటా) ట్యాగ్‌ని ఉపయోగించి నిర్వచించబడతాయి. అదనంగా, మీరు పట్టిక కోసం హెడర్ సెల్‌లను నిర్వచించడానికి <th>(టేబుల్ హెడర్) ట్యాగ్‌ని ఉపయోగించవచ్చు.

మీరు టేబుల్‌లోని సెల్‌లను విలీనం చేయడానికి లేదా బహుళ అడ్డు వరుసలు మరియు నిలువు వరుసలలోని సెల్‌లను విస్తరించడానికి colspan మరియు rowspan వంటి లక్షణాలను ఉపయోగించవచ్చు. ఇంకా, మీరు పట్టిక రూపాన్ని మరియు లేఅవుట్‌ను అనుకూలీకరించడానికి CSS లక్షణాలను వర్తింపజేయవచ్చు.

పట్టిక( <table>)

- <table> HTMLలో పట్టికను రూపొందించడానికి మూలకం ఉపయోగించబడుతుంది.

<tr>- డేటా వరుసలు() మరియు నిలువు వరుసలలో( <td> లేదా <th>) ఉంచబడుతుంది .

<td>- ప్రతి డేటా సెల్(డేటా సెల్) లేదా <th>(హెడర్ సెల్) మూలకాలలో ఉంచబడుతుంది .

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

కాలమ్ హెడర్( <th>)

- <th> పట్టికలో నిలువు వరుస శీర్షికలను సృష్టించడానికి మూలకం ఉపయోగించబడుతుంది.

- సాధారణంగా టేబుల్ యొక్క మొదటి వరుసలో ఉంచబడుతుంది.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

డేటా వరుసలు( <tr>):

- <tr> పట్టికలో డేటా వరుసలను సృష్టించడానికి మూలకం ఉపయోగించబడుతుంది.

- డేటా కణాలు( <td>) లేదా హెడర్ సెల్స్( <th>) ఈ మూలకాలలో ఉంచబడతాయి <tr>.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

కాలమ్ విస్తరిస్తోంది( colspan)

colspan పట్టికలో డేటా సెల్ లేదా హెడర్ సెల్ విస్తరించే నిలువు వరుసల సంఖ్యను నిర్ణయించడానికి లక్షణం ఉపయోగించబడుతుంది .

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

వరుస విస్తీర్ణం( rowspan)

rowspan పట్టికలో డేటా సెల్ లేదా హెడర్ సెల్ విస్తరించే వరుసల సంఖ్యను నిర్ణయించడానికి లక్షణం ఉపయోగించబడుతుంది .

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

సెల్‌లను విలీనం చేయడం( colspan మరియు rowspan)

మీరు పట్టికలో సెల్‌లను విలీనం చేయడానికి రెండింటినీ colspan మరియు లక్షణాలను మిళితం చేయవచ్చు. rowspan

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

border ఆస్తి

- border ఆస్తి పట్టిక సరిహద్దు యొక్క మందాన్ని నిర్దేశిస్తుంది.

- యొక్క విలువ border నాన్-నెగటివ్ పూర్ణాంకం.

<table border="1">  
<!-- Table rows and columns -->  
</table>  

cellpadding ఆస్తి

-, cellpadding ఆస్తి పట్టికలోని సెల్ కంటెంట్ మరియు సెల్ సరిహద్దు మధ్య దూరాన్ని నిర్దేశిస్తుంది.

- యొక్క విలువ cellpadding నాన్-నెగటివ్ పూర్ణాంకం

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

cellspacing ఆస్తి

- cellspacing ఆస్తి పట్టికలోని కణాల మధ్య అంతరాన్ని నిర్దేశిస్తుంది.

- యొక్క విలువ cellspacing నాన్-నెగటివ్ పూర్ణాంకం.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

ఈ గుణాలు మరియు మూలకాలు మీ అవసరాలకు అనుగుణంగా HTMLలో పట్టికలను సృష్టించడానికి మరియు అనుకూలీకరించడానికి మిమ్మల్ని అనుమతిస్తాయి. మీ వెబ్‌సైట్‌లో డేటాను స్పష్టంగా మరియు వ్యవస్థీకృత పద్ధతిలో ప్రదర్శించడానికి మీరు వాటిని ఉపయోగించవచ్చు.