- 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нэг хүснэгтийг тодорхойлох
