HTML სახელმძღვანელო

HTML - საწყისები

შესავალი ტექსტური ედიტორი (IDE) სინტაქსი ატრიბუტები ტექსტური ტეგები ფორმატის ტეგები სიები კომენტარი ბმული ცხრილები ფოტო ფაილური სტრუქტურა HEAD & META - ტეგები ბლოკ & ინლაინ ელემენტები DIV - ტეგი სემენტიკური ტეგები

HTML - მედია

ვიდეო აუდიო YouTube - Iframe

HTML - ფორმები

ფორმების შესავალი ფორმის ელემენტები ფორმის ატრიბუტები INPUT - ატრიბუტები RADIO & CHECKBOX ინფუთები

HTML - ცხრილები 


ცხრილი შედგება სვეტებისგან და რიგებისგან 

მაგალითი:

<table>
    <tr>
        <td>დასახელება</td>
        <td>რაოდენობა</td>
        <td>ფასი</td>
        <td>შეკვეთის თარიღი</td>
    </tr>
      <tr>
        <td>ტელეფონი</td>
        <td>1</td>
        <td>250 ₾</td>
        <td>2025/06/11</td>
    </tr>
      <tr>
        <td>ლეპტოპი</td>
        <td>3</td>
        <td>3500 ₾ </td>
        <td>2025/03/24</td>
    </tr>
</table>


ცხრილში რიგს განსაზღვრავს <tr> ტეგი , ხოლო უჯრას  <td> 


 <td>  ტეგის კონტენტი შეიძლება იყოს: ფოტო, ბმული, სია, სხვა ცხრილი და ა.შ


HTML5 ვერსიაში გვაქვს სემენტიკურად დაყოფილი ცხრილი რაც გულისხმობს მის პირობით სეგმენტებად დაყოფას ,

"თავი" , "სხეული" , და  "ძირი"


თავი გამოისახება როგორც <thead>  ტეგში მოთავსებული <th> ტეგები 

მაგალითი:

<table>
    <thead>
        <th>დასახელება</th>
        <th>რაოდენობა</th>
        <th>ფასი</th>
        <th>შეკვეთის თარიღი</th>
    </thead>
</table>

მიუხედავად იმისა რომ ვიყენებთ განსხვავებულ ტეგებს ვიზუალური ეფექტი არაფრით განსხვავდება ძველი ვერსიისგან


სხეული გამოისახება როგორც <tbody>   

მაგალითი:

<table>
    <tbody>
    <tr>
        <td>ლეპტოპი</td>
        <td>3</td>
        <td>3500 ₾ </td>
        <td>2025/03/24</td>
    </tr>
    </tbody>
</table>


ძირი გამოისახება როგორც <tfoot>   

მაგალითი:

<table>
    <tfoot>
    <tr>
        <td>დასახელება</td>
        <td>რაოდენობა</td>
        <td>ფასი</td>
        <td>შეკვეთის თარიღი</td>
    </tr>
    </tfoot>
</table>


უჯრების გაერთიანება ცხრილში colspan & rowspan


colspan ატრიბუტი აერთიანებს უჯრებს ჰორიზონტალურად 

მაგალითი:

<table border="1">
    <thead>
        <!-- colspan მნიშვნელობა მიუთითებს თუ რამდენი უჯრის ადგილი უნდა დაიკავოს  -->
        <th colspan="2">დასახელება</th>
        <th>ფასი</th>
        <th>შეკვეთის თარიღი</th>
    </thead>
    <tbody>
      <tr>
        <td>ლეპტოპი</td>
        <td>3</td>
        <td>3500 ₾ </td>
        <td>2025/03/24</td>
      </tr>
       <tr>
        <td>ტელეფონი</td>
        <td>1</td>
        <td>3200 ₾ </td>
        <td>2025/08/24</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>დასახელება</td>
        <td>რაოდენობა</td>
        <td>ფასი</td>
        <td>შეკვეთის თარიღი</td>
      </tr>
    </tfoot>
</table>

შედეგი:


როგორ ვხედავთ "დასახელება" დაიკავა მის გვერდით მდგომი უჯრის ადგილი


ახლა ვცადოთ და  ორი უჯრა "3500₾" და "3200₾" გავაერთიანოთ 

მაგალითი:

<table border="1">
    <thead>
        <!-- colspan მნიშვნელობა მიუთითებს თუ რამდენი უჯრის ადგილი უნდა დაიკავოს  -->
        <th colspan="2">დასახელება</th>
        <th>ფასი</th>
        <th>შეკვეთის თარიღი</th>
    </thead>
    <tbody>
      <tr>
        <td>ლეპტოპი</td>
        <td>3</td>
        <!-- ვიკავებთ ორი უჯრის ადგილს  -->
        <td rowspan="2">3500 ₾ </td>
        <td>2025/03/24</td>
      </tr>
      <tr>
        <td>ტელეფონი</td>
        <td>1</td>
        <!-- ვშლით ან ვაკომენტარებთ იმ უჯრას რომლის  ადგილსაც დაიკავებს ზედა უჯრა -->
        <!-- <td>3200 ₾ </td> -->
        <td>2025/08/24</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>დასახელება</td>
        <td>რაოდენობა</td>
        <td>ფასი</td>
        <td>შეკვეთის თარიღი</td>
      </tr>
    </tfoot>
</table>

შედეგი: