- HTML Хүснэгтүүдийг тодорхойлох нь
- HTML хүснэгт - Хүрээ нэмэх
- HTML хүснэгт - Нурсан хүрээ
- HTML хүснэгтийн нүдэнд чигжээс нэмэх
- HTML хүснэгт - Хүрээний зайг нэмэх
- HTML хүснэгт - Олон баганыг хамарсан нүд
- HTML хүснэгт - Олон мөрийг хамарсан нүд
- HTML хүснэгт - Тайлбар нэмэх
- Нэг хүснэгтэнд зориулсан тусгай хэв маяг
- Chapter Summary
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
нэг хүснэгтийг тодорхойлох