Khmer Angkor Academy | សិក្សាបង្កើតគេហទំព័រជាភាសាខ្មែរ

តារាង (Table) គឺជាធាតុសំខាន់មួយក្នុង HTML ដែលត្រូវបានប្រើដើម្បីបង្ហាញទិន្នន័យក្នុងទម្រង់ជួរដេក និងជួរឈរ ។ តារាងជួយឱ្យយើងអាចចាត់ចង និងបង្ហាញព័ត៌មានបានច្បាស់លាស់ និងងាយយល់ ។

រចនាសម្ព័ន្ធមូលដ្ឋាននៃតារាង

ដើម្បីបង្កើតតារាង ត្រូវប្រើ <table> ជាធាតុចម្បង ។ តារាងមានធាតុរងសំខាន់ៗដូចខាងក្រោម៖

<table> - ធាតុចម្បងសម្រាប់បង្កើតតារាង
<thead> - ផ្នែកក្បាលនៃតារាង (Table Header)
<tbody> - ផ្នែកកណ្ដាលនៃតារាង (Table Body)
<tfoot> - ផ្នែកក្រោមនៃតារាង (Table Footer)
<tr> - ជួរដេកនៃតារាង (Table Row)
<th> - ប្រអប់ក្បាលនៃតារាង (Table Head Cell)
<td> - ប្រអប់ទិន្នន័យនៃតារាង (Table Data Cell)

១. ផ្នែកក្បាលនៃតារាង (Table Header)

ដើម្បីបង្កើតផ្នែកក្បាលនៃតារាង ត្រូវប្រើ <thead> ។ ពាក្យពេញនៃ thead គឺ Table Header ។ ផ្នែកនេះប្រើសម្រាប់បង្ហាញចំណងជើងនៃជួរឈរនីមួយៗ ។

ប្រើ <th> សម្រាប់ចំណងជើង

ប្រអប់ក្បាល (Table Head Cell) ត្រូវសរសេរនៅក្នុង <th> ។ ធាតុនេះនឹងបង្ហាញជាអក្សរដិត និងកណ្ដាលតាមលំនាំដើម ។

២. ផ្នែកកណ្ដាលនៃតារាង (Table Body)

ដើម្បីបង្កើតផ្នែកកណ្ដាលនៃតារាង ត្រូវប្រើ <tbody> ។ ពាក្យពេញនៃ tbody គឺ Table Body ។ ផ្នែកនេះប្រើសម្រាប់បង្ហាញទិន្នន័យចម្បងនៃតារាង ។

ប្រើ <td> សម្រាប់ទិន្នន័យ

ប្រអប់ទិន្នន័យ (Table Data Cell) ត្រូវសរសេរនៅក្នុង <td> ។ ពាក្យពេញនៃ td គឺ Table Data ។

៣. ផ្នែកក្រោមនៃតារាង (Table Footer)

ដើម្បីបង្កើតផ្នែកក្រោមនៃតារាង ត្រូវប្រើ <tfoot> ។ ពាក្យពេញនៃ tfoot គឺ Table Footer ។ ផ្នែកនេះជាធម្មតាត្រូវបានប្រើសម្រាប់បង្ហាញសរុប ឬសន្និដ្ឋាននៃតារាង ។

៤. ជួរនៃតារាង (Table Rows)

ក្នុងការបង្កើតតារាង គឺត្រូវបង្កើតម្ដងមួយជួរដេកៗ ។ ជួរនីមួយៗត្រូវសរសេរនៅក្នុង <tr> ។ ពាក្យពេញនៃ tr គឺ Table Row ។

នៅក្នុងជួរដេកមួយ អាចមានប្រអប់ជាច្រើន (<th> ឬ <td>) ។ ចំនួនប្រអប់នៅក្នុងជួរនីមួយៗ គួរតែស្មើគ្នាដើម្បីឱ្យតារាងមានរូបរាងត្រឹមត្រូវ ។

៥. Attributes សំខាន់ៗសម្រាប់តារាង

5.1. border Attribute (ស៊ុម)

border attribute ប្រើសម្រាប់កំណត់ទំហំស៊ុមរបស់តារាង ។

5.2. colspan Attribute (រំលាយជួរឈរ)

colspan attribute ប្រើសំរាប់រំលាយជួរឈរចូលគ្នា ។ តម្លៃរបស់វា គឺជាចំនួនជួរឈរដែលត្រូវរលាយចូលគ្នា ។

5.3. rowspan Attribute (រំលាយជួរដេក)

rowspan attribute ប្រើសំរាប់រំលាយជួរដេកចូលគ្នា ។ តម្លៃរបស់វា គឺជាចំនួនជួរដេកដែលត្រូវរលាយចូលគ្នា ។

5.4. width និង height Attributes (ទទឹង និង កម្ពស់)

ប្រើសម្រាប់កំណត់ទំហំរបស់តារាង ឬប្រអប់នីមួយៗ ។

5.5. cellpadding និង cellspacing (គម្លាត)

cellpadding - គម្លាតពីខ្លឹមសារទៅស៊ុមនៃប្រអប់
cellspacing - គម្លាតរវាងប្រអប់នីមួយៗ

5.6. align និង valign (តម្រឹម)

align - តម្រឹមផ្ដេក (left, center, right)
valign - តម្រឹមបញ្ឈរ (top, middle, bottom)

៦. ឧទាហរណ៍ជាក់ស្ដែង

ឧទាហរណ៍ទី១៖ តារាងមុខម្ហូប

ឧទាហរណ៍ទី២៖ តារាងកាលវិភាគ

ឧទាហរណ៍ទី៣៖ តារាងប្រើ colspan និង rowspan

ឧទាហរណ៍ទី៤៖ តារាងប្រៀបធៀបផលិតផល

៧. Best Practices (ការអនុវត្តល្អបំផុត)

ប្រើ <thead>, <tbody>, និង <tfoot> ដើម្បីចាត់ចងរចនាសម្ព័ន្ធតារាងឱ្យបានច្បាស់លាស់
ប្រើ <th> សម្រាប់ចំណងជើងតារាង ដើម្បីជួយពង្រឹង Accessibility
បន្ថែម border attribute ដើម្បីឱ្យងាយមើលឃើញស៊ុមតារាង
ប្រើ colspan និង rowspan ដើម្បីបង្កើតតារាងស្មុគស្មាញ
កំណត់ width របស់តារាង ដើម្បីគ្រប់គ្រងទំហំ
ប្រើ CSS សម្រាប់រចនាសម្ព័ន្ធតារាងទំនើប ជំនួសឱ្យការប្រើ attributes (border, cellpadding, cellspacing)
ប្រាកដថាចំនួនប្រអប់នៅក្នុងជួរនីមួយៗស្មើគ្នា (ឬប្រើ colspan/rowspan ឱ្យបានត្រឹមត្រូវ)
កុំប្រើតារាងសម្រាប់ការរចនាទំព័រ (page layout) - ប្រើតែសម្រាប់បង្ហាញទិន្នន័យតែប៉ុណ្ណោះ

៨. ឧទាហរណ៍ពេញលេញ

ខាងក្រោមនេះគឺជាឧទាហរណ៍តារាងពេញលេញមួយដែលបង្ហាញអំពីការប្រើធាតុផ្សេងៗរបស់តារាង៖

សំគាល់៖ សំរាប់ <thead>, <tbody> និង <tfoot> យើងអាចមិនកំណត់បាន ។ មានន័យថា នៅក្នុង <table> គឺប្រើ <tr> ផ្ទាល់តែម្ដង ។ ប៉ុន្តែការប្រើធាតុទាំងនេះជួយឱ្យកូដមានរចនាសម្ព័ន្ធច្បាស់លាស់ និងងាយស្រួលក្នុងការអនុវត្តរចនាសម្ព័ន្ធជាមួយ CSS ។

តារាង (HTML Tables)

រចនា​សម្ព័ន្ធ​មូលដ្ឋាន​នៃ​តារាង

១. ផ្នែក​ក្បាល​នៃ​តារាង (Table Header)

ប្រើ <th> សម្រាប់​ចំណងជើង

២. ផ្នែក​កណ្ដាល​នៃ​តារាង (Table Body)

ប្រើ <td> សម្រាប់​ទិន្នន័យ

៣. ផ្នែក​ក្រោម​នៃ​តារាង (Table Footer)

៤. ជួរ​នៃ​តារាង (Table Rows)

៥. Attributes សំខាន់ៗ​សម្រាប់​តារាង