Wednesday, June 5, 2013

HTML: Хичээл

HTML: Хичээл

Хүснэгт үүсгэх

Веб хуудас дээр зураг болон текстийг янз бүрийн байршилтайгаар гаргахдаа хүснэгт ашигладаг. Ингэж хүснэгт ашигласнаар веб хуудас эмх цэгцтэй, тодорхой загвар дизайнтай мэт харагддаг.
Хүснэгтийг <table> гэсэн битүү таагийн тусламжтай үүсгэдэг:
<table>
       …
</table>
Энэ тааг дотроо хүснэгтийнхээ хэдэн мөр, хэдэн баганатай байхыг зааж өгнө. Мөрийг <tr> гэсэн битүү таагээр, баганыг <td> гэсэн битүү таагээр үүсгэнэ. Ингэхдээ эхлээд мөрөө үүсгээд, мөр дотроо хэдэн баганатай байхыг зааж өгнө. Ж.нь:
<body>
<table>
       <tr>
                   <td>
                               Энэ бол 1-р мөрийн 1-р багана
</td>
<td>
                               Энэ бол 1-р мөрийн 2-р багана
</td>
<td>
                               Энэ бол 1-р мөрийн 3-р багана
</td>
       </tr>
<tr>
                   <td>
                               Энэ бол 2-р мөрийн 1-р багана
</td>
<td>
                               Энэ бол 2-р мөрийн 2-р багана
</td>
<td>
                               Энэ бол 2-р мөрийн 3-р багана
</td>
       </tr>
</table>
</body>
Дээрх жишээнд 2 мөртэй, 3 баганатай хүснэгт үүсгэж байна. Зураг нь энэ байна:
Дээрх зурагт, хүснэгтийн гадна хүрээ болон нүднүүдийн хүрээ харагдахгүй байна. Хүрээнүүдийг үзэгддэг болгохын тулд <table> таагийн border гэсэн аттрибутыг бичиж өгөх хэрэгтэй. Хэрэв энэ аттрибутын утгыг 0-ээс ялгаатай байхаар бичиж өгвөл хүснэгтийн хүрээнүүд харагдана. Тухайлбал өмнөх жишээнд:
<table border=”2”>
гэж бичвэл:
Одоо хүснэгтийн хүрээнүүд харагдаж байна. Хэрэв border=”0” гэж өгвөл дахиад хүрээгүй болчихно.
<table> таагийн бусад зарим аттрибутыг дурдвал:
·         <table width=”тоо> эсвэл <table width=”хувь%”> - хүснэгтийн өргөнийг хуудасны цонхтой харьцангуй тодорхойлно. Ж.нь <table width=”100%”> гэвэл хүснэгтийн өргөн цонхны өргөнтэй адил байна.
·         <table height=”тоо> эсвэл <table height=”хувь%”> - хүснэгтийн өндрийг хуудасны цонхтой харьцангуй тодорхойлно. Ж.нь <table height=”50%”> гэвэл хүснэгтийн өндөр цонхны өндрийн 50 % байна.
·         <table align=”утга”> - хүснэгтийг цонхны аль нэг тал руу шахаж, эсвэл голлуулж байрлуулна. Боломжит утгууд нь: left|right|center. Ж.нь <table align=”center”> гэвэл хүснэгт цонхны голд байрлана.
·         <table bgcolor=”#өнгө> - хүснэгтийн дэвсгэр өнгийг зааж өгнө. Ж.нь <table bgcolor=”#AABBCC> гэхэд:

·         <table background=”зургийн_файл”> - хүснэгтэнд дэвсгэр зураг тавьж өгнө. Тухайлбал <table background =”picture.jpg”> гэвэл picture.jpg файлыг хүснэгтийн арын фон болгож тавьна.

No comments: