ცხრილები 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-ში თქვენი საჭიროებების შესაბამისად. თქვენ შეგიძლიათ გამოიყენოთ ისინი თქვენს ვებსაიტზე მონაცემების მკაფიოდ და ორგანიზებულად საჩვენებლად.