HTML / Хүснэгт (table)

Хүснэгт (table)

HTML хүснэгт нь мөр ба баганаар зохион байгуулагдсан өгөгдлийг харуулахад зориулагдсан. Хуваарь, үнийн жагсаалт, статистик өгөгдөл — хүснэгтэд тохиромжтой.

Үндсэн бүтэц

html

<table>
  <thead>
    <!-- Гарчгийн мөр -->
    <tr>
      <th>Нэр</th>
      <th>Хэл</th>
      <th>Жил</th>
    </tr>
  </thead>
  <tbody>
    <!-- Өгөгдлийн мөрүүд -->
    <tr>
      <td>React</td>
      <td>JavaScript</td>
      <td>2013</td>
    </tr>
    <tr>
      <td>Vue</td>
      <td>JavaScript</td>
      <td>2014</td>
    </tr>
  </tbody>
</table>

Гол элементүүд:

<table> — хүснэгтийн үндсэн хаалт
<thead> — толгойн хэсэг (гарчгийн мөр)
<tbody> — биеийн хэсэг (өгөгдлийн мөрүүд)
<tfoot> — хөлийн хэсэг (нийлбэр, дүгнэлт)
<tr> — table row (хэвтээ мөр)
<th> — table header (гарчгийн нүд) — bold, center байдлаар харагдана
<td> — table data (өгөгдлийн нүд)

thead, tbody, tfoot

html

<table>
  <thead>
    <tr>
      <th>Бараа</th>
      <th>Тоо</th>
      <th>Үнэ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Дэвтэр</td>
      <td>3</td>
      <td>1,500₮</td>
    </tr>
    <tr>
      <td>Харандаа</td>
      <td>5</td>
      <td>500₮</td>
    </tr>
  </tbody>
  <tfoot>
    <!-- Нийт дүн -->
    <tr>
      <td colspan="2">Нийт</td>
      <td>7,000₮</td>
    </tr>
  </tfoot>
</table>

<tfoot> HTML-д <tbody>-ийн өмнө байж болох ч хөтөч хуудасны доод хэсэгт харуулна. Урт хүснэгтийг хэвлэхэд <tfoot> хуудас бүрийн доод хэсэгт гарч ирдэг.

colspan — баганыг нэгтгэх

Нэг нүд хэдэн баганыг хамрахыг заана:

html

<table>
  <thead>
    <tr>
      <!-- Энэ нүд 2 баганыг хамарна -->
      <th colspan="2">Хугацаа</th>
      <th>Сэдэв</th>
    </tr>
    <tr>
      <th>Эхлэх</th>
      <th>Дуусах</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>09:00</td>
      <td>10:30</td>
      <td>HTML үндэс</td>
    </tr>
  </tbody>
</table>

rowspan — мөрийг нэгтгэх

Нэг нүд хэдэн мөрийг хамрахыг заана:

html

<table>
  <tbody>
    <tr>
      <!-- Энэ нүд 3 мөрийг хамарна -->
      <td rowspan="3">Frontend</td>
      <td>HTML</td>
    </tr>
    <tr>
      <!-- "Frontend" нүд аль хэдийн байгаа учир энд td байхгүй -->
      <td>CSS</td>
    </tr>
    <tr>
      <td>JavaScript</td>
    </tr>
    <tr>
      <td rowspan="2">Backend</td>
      <td>Node.js</td>
    </tr>
    <tr>
      <td>Python</td>
    </tr>
  </tbody>
</table>

scope attribute — accessibility

Screen reader-д гарчгийн нүд аль чиглэлийнх болохыг мэдэгдэнэ:

html

<thead>
  <tr>
    <!-- Баганы гарчиг -->
    <th scope="col">Улс</th>
    <th scope="col">Нийслэл</th>
    <th scope="col">Хүн ам</th>
  </tr>
</thead>
<tbody>
  <tr>
    <!-- Мөрийн гарчиг -->
    <th scope="row">Монгол</th>
    <td>Улаанбаатар</td>
    <td>3.4 сая</td>
  </tr>
</tbody>

Хэзээ table ашиглах, хэзээ ашиглахгүй байх

Ашиглах тохиолдол:

Хоёр буюу түүнээс дээш хэмжээст өгөгдөл (мөр + багана)
Харьцуулах боломжтой өгөгдөл (үнийн жагсаалт, хуваарь, статистик)
Spreadsheet маягийн мэдээлэл

Ашиглахгүй байх тохиолдол:

Хуудасны layout хийх — тэр зорилгоор CSS Flexbox эсвэл Grid ашиглана
Энгийн жагсаалт — <ul> хэрэглэнэ
Хажуугийн цэс, header, footer гэх мэт UI бүтэц

Хуучин вэбд <table>-ийг layout хийхэд ашигладаг байсан. Энэ нь буруу дадал — HTML семантик, accessibility, responsive дизайн бүгдийг эвдэнэ.

Практик жишээ

html

<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>Хичээлийн хуваарь</title>
  </head>
  <body>
    <h1>Долоо хоногийн хуваарь</h1>

    <table>
      <thead>
        <tr>
          <th scope="col">Цаг</th>
          <th scope="col">Даваа</th>
          <th scope="col">Мягмар</th>
          <th scope="col">Лхагва</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">09:00</th>
          <td>Математик</td>
          <td>Физик</td>
          <td>Математик</td>
        </tr>
        <tr>
          <th scope="row">11:00</th>
          <td colspan="2">Монгол хэл</td>
          <td>Түүх</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Дараагийн хичээлд:

<form> tag ашиглан хэрэглэгчээс мэдээлэл цуглуулах форм үүсгэж сурна. action, method, label, input, button элементүүд болон for/id холболтын талаар үзнэ.

← Өмнөх хичээлЖагсаалт (ul, ol, li)Дараах хичээл →Form үндэс