HTML - ცხრილი ( table ) გამოიყენება სხვადასხვა ტიპის ინფორმაციის გამოსატანად.  html ცხრილი წარმოადგენს სტრიქონებისა და სვეტების გადაკვეთით მიღებული უჯრების ერთიანობას.

 

ტეგები რომლებიც გამოიყენება ცხრილის შესაქმნელად :

<table> - მთავარი ტეგი ( ცხრილი ) რომელიც თავის თავში აერთიანებს ყველა სტრიქონს და სვეტს

<thead> - ცხრილიზ ზედა ნაწილი, რომელიც გამოიყენება სათაურებისთვის

<tbody> - ცხრილის ცენტრალური ნაწილი, ჩანაწერებისთვის

<tfoot> - ცხრილის ქვედა ნაწილი, ძირითადად გამოიყენება დამატებითი ინფორმაციის მისათიტებლად

<tr> - ქმნის სტრიქონს

<th> - სათაურისთვის განკუთვნილი უჯრა ( მასში მოთავსებული ტექსტი უფრო მეტად გამუქებულია )

<td> - ჩანაწერისთვის განკუთვნილი უჯრა

<caption> - ცხრილის სათაური

 

ვნახოთ ცხრილის მაგალითი :

<table>

<caption>მომხმარებლები</caption>

<thead>

<tr>

   <th>სახელი</th>

   <th>გვარი</th>

   <th>ელ.ფოსტა</th>

</tr>

</thead>

<tbody>

<tr>

   <td>მომხმარებლის სახელი 1</td>

   <td>მომხმარებლის გვარი 1</td>

   <td>user1@gmail.com</td>

</tr>

<tr>

   <td>მომხმარებლის სახელი 2</td>

   <td>მომხმარებლის გვარი 2</td>

   <td>user2@gmail.com</td>

</tr>

<tr>

   <td>მომხმარებლის სახელი 3</td>

   <td>მომხმარებლის გვარი 3</td>

   <td>user3@gmail.com</td>

</tr>

</tbody>

<tfoot>

  <tr>

    <td colspan="3"> <small> 10.10.2023 დარეგისტრირებული მომხმარებლები </small> </td>

 </tr>

</tfoot>

</table>

 

ასე გამოიყურება ცხრილი css სტილების გარეშე, მოდით დავამატოთ რამოდენმე თვისება :

 

 ჩვენი ცხრილიც გალამაზდა :) ამ მაგალითზე კარგად ჩანს css - ის როლი და მნიშვნელობა.

საჭიროების შემთხვევაში შეგვიძლია უჯრების გაერთიანება, როგორც ვერტიკალურად ასევე ჰორიზონტალურად. თუ კარგად დავაკვირდებით ბოლო უჯრა, რომელიც <tfoot> ტეგშია მოთავსებული იკავებს  3 უჯრის ადგილს ჰორიზონტალურად ანუ აერთიანებს 3 სვეტს. უჯრების გასაერთიანებლად გამოიყენება  colspan="" ( სვეტები ანუ ჰორიზონტალურად ) და rowspan="" ( სტრიქონები ანუ ვერტიკალურად ). ჩვენს მაგალითზე  <td colspan="3"><td> აერთიანებს 3 უჯრას ჰორიზონტალურად.