CSS Хүснэгт /Table/

Үр дүнг харах

CSS Хүрээ /Border/

Хүснэгтийн хүрээний хэлийг border шинж чанарт зааж өгнө.

<style>
table, th, td {
  border: 1px solid black;
}
</style>

Collapse Хүснэгтийн хүрээ

border-collapse шинж чанар нь хүснэгтийн хүрээний хэлийг нэг болгон тодорхойлдог.

<style>
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}
</style>

Зөвхөн хүснэгтийн гадна хүрээ хийхийг хүсвэл border шинж чанарыг зөвхөн хүснэгтэд зааж өгнө.

<style>
table {
  border: 1px solid black;
}
</style>

Өргөн ба Өндөр

Хүснэгтийн өргөн ба өндөрийг width болон height шинж чанарт тодорхойлж өгнө.

<style>
table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  height: 60px;
}
</style>

Хэвтээ тэнхлэгт зэрэгцүүлэх /Horizontal Alignment/

text-align шинж чанарт <th> болон <td> элементийн агуулж буй контентийг хэвтээ тэнхлэгт баруун, зүүн болон голд байрлах утгыг зааж өгнө.

<style>
table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  text-align: left;
}
</style>

Босоо тэнхлэгт зэрэгцүүлэх /Vertical Alignment/

vertical-align шинж чанарт <th> болон <td> элементийн агуулж буй контентийг босоо тэнхлэгт дээр, доор болон дунд байрлах утгыг зааж өгнө.

<style>
table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  height: 50px;
  vertical-align: bottom;
  text-align: right;
}
</style>

Table Padding

padding шинж чанарт <th> болон <td>-н агуулж буй контент болон хүрээ хоорондын зайг зааж өгнө.

<style>
table, td, th {  
  border: 1px solid #ccc;
  text-align: left;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 18px;
}
</style>

Хүснэгтийг хэвтээ тэнхлэгт хуваах /Horizontal Dividers/

border-bottom шинж чанарт утга зааж өгснөөр <th> болон <td> нүднүүдийг хэвтээ тэнхлэгт хувааж харуулах болно.

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}
</style>

Hoverable Table

<td> хулгана очих үед мөр идэвхжих үйлдлийг хийхэд hover selector буюу сонгогчийг ашиглана.

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

tr:hover {background-color:#fff3f3;}
</style>

Судалтай хүснэгт /Striped Tables/

zebra-striped tables буюу зебра судалтай хүснэгт байгуулахад nth-child() сонгогчийг ашиглах бөгөөд дэвсгэр өнгийг зааж өгнө.

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {background-color: #fff5f5;}
</style>

Responsive Table

Responsive Table буюу хүснэгт нь жижиг дэлгэц дээр харах үед хэвтээ тэнхлэгт scroll bar дэлгэцэд гарч ирнэ.

Хүснэгтийг responsive болгохын тул хүснэгтийн гадна мэдрэгчтэй <div style="overflow-x:auto"> элемент нэмж өгнө.

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {background-color: #fff5f5;}
</style>

Сэтгэгдэлүүд