View Categories

HTML Tables

4 min read

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

Powered by BetterDocs

Leave a Reply