We Learn ICT | សិក្សាបង្កើតគេហទំព័រជាភាសាខ្មែរ

ការបង្កើតតារាង (HTML Tables)

តារាងអនុញ្ញាតអោយអ្នករៀបចំទិន្នន័យជាជួរដេក (Rows) និងជួរឈរ (Columns) ដែលងាយស្រួលមើល។ គេនិយមប្រើវាសម្រាប់ បង្កើតតារាងពិន្ទុ តារាងកាលវិភាគ ឬតារាងទិន្នន័យហិរញ្ញវត្ថុជាដើម (មិនគួរប្រើតារាង សម្រាប់រៀបចំ Layout របស់គេហទំព័រទាំងមូលដូចកាលពីសម័យ ១០ឆ្នាំមុននោះទេ)។

១. Tags សំខាន់ៗសម្រាប់បង្កើតតារាង (Table Structure)

ដើម្បីបង្កើតតារាងមួយបាន អ្នកត្រូវស្គាល់កូនចៅរបស់វាអោយបានច្បាស់៖

<table> : ធាតុដើមធំបំផុតដែលក្តោបតារាងទាំងមូល។ (កាលពីមុនគេប្រើ border="1" នៅទីនេះដើម្បីគូសស៊ុម តែឥឡូវគេលែងប្រើហើយ គេងាកទៅប្រើ CSS ជំនួសវិញ)។
<tr> (Table Row) : បង្កើតជួរដេកមួយ។ រាល់ទិន្នន័យទាំងអស់ត្រូវតែស្ថិតនៅក្នុងជួរដេក។
<th> (Table Heading) : បង្កើតប្រអប់ចំណងជើងនៅផ្នែកខាងលើ។ តាមលំនាំដើម អក្សរនៅក្នុងនេះនឹង ដិត និងនៅ ចំកណ្តាល (Center)។
<td> (Table Data) : បង្កើតប្រអប់ទិន្នន័យធម្មតា។ អក្សរក្នុងនេះស្តើង និងនៅខាងឆ្វេង (Left)។

២. ការសរសេរតារាងស្តង់ដារកម្រិតខ្ពស់ (Semantic Table)

ប្រសិនបើតារាងរបស់អ្នកធំ និងមានទិន្នន័យច្រើន អ្នកគួរតែបែងចែកវាជា ៣ ផ្នែកធំៗ ងាយស្រួលគ្រប់គ្រង៖

<thead> : ក្តោបជួរដេកដែលជាចំណងជើង (Heading) ទាំងអស់។
<tbody> : ក្តោបជួរដេកដែលជាទិន្នន័យ (Body) ទាំងអស់។
<tfoot> : ក្តោបជួរដេកផ្នែកខាងក្រោមបំផុត (Footer) (ឧ. ជួរសរុបទិន្នន័យ)។

៣. ការបញ្ចូលប្រអប់បញ្ជូលគ្នា (Colspan និង Rowspan)

ពេលខ្លះអ្នកចង់អោយប្រអប់មួយ វាយកទំហំស្មើនឹងប្រអប់ពីរ ឬបីបញ្ចូលគ្នា (ដូចការ Merge Cells នៅក្នុង Excel អញ្ចឹងដែរ)។

colspan="2" : បញ្ចូលប្រអប់ចំនួន ២ តាម ជួរដេក (ផ្តេក) ចូលគ្នា។
rowspan="2" : បញ្ចូលប្រអប់ចំនួន ២ តាម ជួរឈរ (បញ្ឈរ) ចូលគ្នា។