---
title: HTML Tables
description: "> HTML хүснэгтүүд нь өгөгдлийг мөр, баганадуудад байрлуулах боломжийг олгодог. **Жишээ:** | Company | Contact | Country | | --- | --- | --- | | Alfreds Futterkiste | Maria Anders | Germany | | Centro comercial Moctezuma | Francisco…"
url: "https://apprentice.mn/docs/html-tables/"
updated: "2021-07-07"
category: HTML
---

# HTML Tables

> HTML хүснэгтүүд нь өгөгдлийг мөр, баганадуудад байрлуулах боломжийг олгодог.

**Жишээ:**

| Company | Contact | Country |
| --- | --- | --- |
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |

## HTML Хүснэгтүүдийг тодорхойлох нь

 `<table>`тэмдэглэгээ нь HTML-ийн хүснэгтийг илэрхийлдэг.

Each table row is defined with a `<tr>` tag. Each table header is defined with a `<th>` tag. Each table data/cell is defined with a `<td>` tag.

Хүснэгтийн мөр бүрийг `<tr>` тэмдэглэгээгээр тодорхойлно. Хүснэгтийн толгой бүрийг  `<th>` хаягаар тодорхойлно. Хүснэгтийн өгөгдөл болон нүд бүрийг  `<td>`хаягаар тодорхойлно.

 `<th>`элементийн дотор байгаа текстүүд тод бөгөөд гололсон байна.

 `<td>` элементийн дотор байгаа текстүүд энгийн бөгөөд зүүн тийш шахсан байрлалтай байна

### Жишээ

Энгийн HTML хүнэгт:

      `<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>`

## HTML хүснэгт – Хүрээ нэмэх

Хүснэгтэд хүрээ нэмэхийн тулд CSS-ийн `border` шинж чанарыг  ашиглана:

     `table, th, td {
  border: 1px solid black;
}`

## HTML хүснэгт – Нурсан хүрээ

To let the borders collapse into one border, add the CSS `border-collapse` property:

Хүрээг нэгтгэж нэг хүрээ болгон нураахыг зөвшөөрөхийн тулд CSS  `border-collapse` шинж чанарыг ашиглана.

     `table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}`

## HTML хүснэгтийн нүдэнд чигжээс нэмэх

Нүдний чигжээс нь нүдний агуулга болон хүрээний зайг тодорхойлно

To set the padding, use the CSS `padding` property:

Чигжээс хийхийн тулд `padding` шинж чанарыг ашиглана

     `th, td {
  padding: 15px;
}`

## HTML хүснэгт – Хүрээний зайг нэмэх

Хүрээний зай нь нүднүүдийн хоорондын зайг тодорхойлно.

Хүснэгтийн хүрээний зайг тохируулахын тулд CSS `border-spacing`  шинж чанарыг ашиглана:

     `table {
  border-spacing: 5px;
}`

**Тэмдэглэл:** Хэрвээ  хүснэгт нурсан хүрээтэй байвал `border-spacing` ямар ч нөлөө байхгүй.

## HTML хүснэгт – Олон баганыг хамарсан нүд

Нүдийг нэгээс илүү баганатай болгохын тулд`colspan`шинж чанар ашиглана:

     `<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>`

## HTML хүснэгт – Олон мөрийг хамарсан нүд

Нүдийг нэгээс илүү эгнээтэй болгохын тулд `rowspan` шинж чанар ашиглана:

     `<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>`

## HTML хүснэгт – Тайлбар нэмэх

Хүснэгтэд тайлбар нэмэхийн тулд  `<caption>` тэмдэглэгээг ашиглан:

     `<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>`

**Тэмдэглэл:** `<caption>`  тэмдэглэгээг`<table>` тэмдэглэгээгийн дараа оруулах шаардлагатай.

## Нэг хүснэгтэнд зориулсан тусгай хэв маяг

Ганцхан хүснэгтйин хэв маягийг тодорхойлохын тулд `id` шинж чанарыг  `<table>` дотор оруулна

     `<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>`

### Одоо та энэ хүснэгтэд зориулсан тусгай хэв маягийг тодорхойлж болно:

     `#t01 {
  width: 100%;
  background-color: #f1f1c1;
}`

### Илүү олон хэв маягийг нэмж оруулах:

     `#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}`

## Chapter Summary

- ```` `table>` хүснэгтийг тодорхойлох элемент 
- ```<tr>` хүснэгтийн мөрийг тодорхойлох элемент
- `<td>`  хүснэгтийн өгөгдлийг тодорхойлох элемент
- `<th>` хүснэгтийн гарчгийг тодорхойлох элемент
- HTML `<caption>` Хүснэгтийн тайлбарыг тодорхойлох  элемент
- `border` хүрээг тодорхойлох элемент
- Нүдний хүрээг нэгтгэхийн тулд CSS `border-collapse`шинж чанарыг ашиглана
- `padding` нүдэнд зай өгөхөд ашиглана шинж чанар
-   `text-align` текстийг зэрэгцүүлэх шинж чанар 
- `border-spacing` нүд хоорондын зайг тохируулах шинж чанар
- `colspan`шинж чанах нь нүдийг олон баганатай болгох
- `rowspan` шинж чанар, нүдийг олон мөрөнд багтаах
- `id`нэг хүснэгтийг  тодорхойлох

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-tables%2F&linkname=HTML%20Tables](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-tables%2F&linkname=HTML%20Tables)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-tables%2F&linkname=HTML%20Tables](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-tables%2F&linkname=HTML%20Tables)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-tables%2F&linkname=HTML%20Tables](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-tables%2F&linkname=HTML%20Tables)[https://www.addtoany.com/share](https://www.addtoany.com/share)