HTML Хүснэгтүүд

Өгөгдлийг мөр болон багананд эрэмбэлж харуулахад <table> элемент хэрэглэгдэнэ.

Хүснэгтийн бүтэц элементүүд

  • <table> — хүснэгтийг эхлүүлж төгсгөнө.
  • <tr> (Table Row) — хүснэгтийн нэг мөр.
  • <th> (Table Header) — хүснэгтийн толгой нүд (тод, төвдөө зэрэгцсэн байдаг).
  • <td> (Table Data) — хүснэгтийн энгийн өгөгдлийн нүд.

Нүд нэгтгэх (colspan & rowspan)

  • colspan="2" — хэвтээ чиглэлд хоёр баганыг нэгтгэнэ.
  • rowspan="2" — босоо чиглэлд хоёр мөрийг нэгтгэнэ.

Жишээ

<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: #1d4ed8; }
</style>
</head>
<body>
<table border="1">
  <tr>
    <th>Дугаар</th>
    <th>Барааны нэр</th>
    <th>Үнэ</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Компьютер</td>
    <td>2,500,000₮</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Хулгана</td>
    <td>50,000₮</td>
  </tr>
</table>
</body>
</html>
Туршиж үзэх »