HTML Хүснэгт /Tables/
Цалингийн хүснэг
| # | Овог | Нэр | Цалин |
|---|---|---|---|
| 1 | Дашдорж | Цэцэгмаа | 550000₮ |
| 2 | Дэмбэрэл | Бол | 558000₮ |
| 3 | Нурлан | Блот | 778000₮ |
| 4 | Батжаргал | Түвшинбаяр | 950000₮ |
| 5 | Ганзориг | Золжаргал | 815000₮ |
| 6 | Ононбат | Онон | 750000₮ |
HTML Хүснэгт тодорхойлох
HTML-д хүснэгийг <table> tag-д тодорхойлдог.
Хүснэгийн мөрийг <tr> tag-д тодорхойлдог. Харин хүснэгтийн толгой хэсгийг <th> tag-д тодорхойлдог бөгөөд анхдагч утга нь bold буюу тод тексттэй харин утга нь center хоёр талаас ижил зай авсан байна. Хүснэгтийн нүдийг <td> tag-д тодорхойлдог.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<table style="width:100%">
<tr>
<th>Овог</th>
<th>Нэр</th>
<th>Цалин</th>
</tr>
<tr>
<td>Дашдорж</td>
<td>Болд</td>
<td>557400₮</td>
</tr>
<tr>
<td>Дондог</td>
<td>Цэцэгмаа</td>
<td>567400₮</td>
</tr>
</table>
</body>
</html>
Тэмдэглэл: <td> элемент нь хүснэгтийн датаг ангуулж байна.
Мөн HTML-н бүх элементийг агуулж чадна. Зураг, Текст, Жагсаалт, Хүснэгт ... гэх мэт.
HTML Хүснэгт /Adding Border/
Хүснэгтийн хүрээ буюу хэлийг дэлгэцэд харуулж болно. CSS-н border шинж чанарыг ашиглана.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Овог</th>
<th>Нэр</th>
<th>Цалин</th>
</tr>
<tr>
<td>Дашдорж</td>
<td>Болд</td>
<td>557400₮</td>
</tr>
<tr>
<td>Дондог</td>
<td>Цэцэгмаа</td>
<td>567400₮</td>
</tr>
</table>
</body>
</html>
Тэмдэглэл: Хүснэгт ба хүснэгтийн нүдэнд аль алинд нь хүрээ буюу хүснэгтийн хэлийг өгч болно.
HTML Хүснэгт /Collapsed Border/
Хэрэв та хүснэгтийн хүрээ буюу хэл хязгаарыг нэг зураасаар харахыг хүсвэл CSS-ийн border-collapse шинж чанарыг нэмэж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Овог</th>
<th>Нэр</th>
<th>Цалин</th>
</tr>
<tr>
<td>Дашдорж</td>
<td>Болд</td>
<td>557400₮</td>
</tr>
<tr>
<td>Дондог</td>
<td>Цэцэгмаа</td>
<td>567400₮</td>
</tr>
</table>
</body>
</html>
HTML Хүснэгт /Padding/
Padding нь хүснэгтийн хэл ба нүдний агуулга хоорондын зайг тодорхойлно.
Padding-ийг CSS-н padding шинж чанарт зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Овог</th>
<th>Нэр</th>
<th>Цалин</th>
</tr>
<tr>
<td>Дашдорж</td>
<td>Болд</td>
<td>557400₮</td>
</tr>
<tr>
<td>Дондог</td>
<td>Цэцэгмаа</td>
<td>567400₮</td>
</tr>
</table>
</body>
</html>
HTML Хүснэгт /Left-align Headings/
хүснэгтийн гарчгууд нь тод, төвд байрласан байдаг. Тэгвэл хүснэгтийн гарчгийг зүүн эсвэл баруун тийш зэрэгцүүлж болно.
CSS-н text-align шинж чанарыг ашиглана.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Овог</th>
<th>Нэр</th>
<th>Цалин</th>
</tr>
<tr>
<td>Дашдорж</td>
<td>Болд</td>
<td>557400₮</td>
</tr>
<tr>
<td>Дондог</td>
<td>Цэцэгмаа</td>
<td>567400₮</td>
</tr>
</table>
</body>
</html>
HTML Хүснэгт /Border Spacing/
Border Spacing нь нүднүүдийн хоорондын зайг заана.
Хүснэгтийн хэлийн зайг тохируулахад CSS-н border-spacing шинж чанарыг ашиглана.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
table {
border-spacing: 10px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Овог</th>
<th>Нэр</th>
<th>Цалин</th>
</tr>
<tr>
<td>Дашдорж</td>
<td>Болд</td>
<td>557400₮</td>
</tr>
<tr>
<td>Дондог</td>
<td>Цэцэгмаа</td>
<td>567400₮</td>
</tr>
</table>
</body>
</html>
Олон багана агуулсан нүд
Олон багана агуулсан нүдийг colspan атрибутад зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
table {
border-spacing: 10px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th colspan="2">Овог, Нэр</th>
<th>Нэр</th>
</tr>
<tr>
<td>Дашдорж</td>
<td>Болд</td>
<td>557400₮</td>
</tr>
<tr>
<td>Дондог</td>
<td>Цэцэгмаа</td>
<td>567400₮</td>
</tr>
</table>
</body>
</html>
Олон мөр агуулсан нүд
Олон мөр агуулсан нүдийг rowspan атрибутад зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
table {
border-spacing: 10px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th rowspan="2">Овог, Нэр</th>
<td>Дашдорж</td>
</tr>
<tr>
<td>Болд</td>
</tr>
<tr>
<th>Цалин</th>
<td>567400₮</td>
</tr>
</table>
</body>
</html>
HTML Хүснэгтэд тайлбар оруулах /Caption/
Хүснэгтэд тайлбар оруулахад caption tag-г ашиглана.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
table, th, td {
border: 1px solid black;
table {
border-spacing: 10px;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Байгууллагын цалингийн хүснэгт</caption>
<tr>
<th rowspan="2">Овог, Нэр</th>
<td>Дашдорж</td>
</tr>
<tr>
<td>Болд</td>
</tr>
<tr>
<th>Цалин</th>
<td>567400₮</td>
</tr>
</table>
</body>
</html>
Тэмдэглэл: caption tag-г table tag-н дараа шууд оруулна.
Сэтгэгдэлүүд
