Tables
Bootstrap Tables (តារាង)
Bootstrap ធ្វើឲ្យ tables ស្រស់ស្អាតនិង responsive។ Tables គឺជាមធ្យោបាយល្អបំផុតសម្រាប់បង្ហាញទិន្នន័យជាជួរឈរ និង ជួរដេក។
🏗️ Table Structure & Components
| Component | HTML Tag | Bootstrap Class | Purpose |
|---|---|---|---|
| Table Container | <table> |
.table |
តារាងមូលដ្ឋាន - ទម្រង់ទាំងអស់ត្រូវការ class នេះ |
| Table Head | <thead> |
.table-dark / .table-light |
ផ្នែកក្បាលតារាង - មានចំណងជើងជួរឈរ |
| Table Body | <tbody> |
- | ផ្នែកមាតិកាតារាង - ទិន្នន័យទាំងអស់ |
| Table Row | <tr> |
.table-{color} |
ជួរដេកនៃតារាង |
| Table Header Cell | <th> |
- | ក្រឡាចំណងជើង (bold, centered) |
| Table Data Cell | <td> |
- | ក្រឡាទិន្នន័យធម្មតា |
| Table Footer | <tfoot> |
- | ផ្នែកបាតតារាង (optional) - សរុបឬសង្ខេប |
🎨 Table Variants & Modifiers
| Variant Class | Visual Effect | Use Case |
|---|---|---|
.table-striped |
ជួរឆ្លាស់ពណ៌ (zebra stripes) | តារាងវែងដែលត្រូវការអានងាយ - កាត់បន្ថយ eye strain |
.table-bordered |
ស៊ុមជុំវិញក្រឡាទាំងអស់ | តារាងដែលត្រូវការភាពច្បាស់លាស់ - ទិន្នន័យសំខាន់ |
.table-borderless |
គ្មានស៊ុមសោះ | តារាងសាមញ្ញ - layout ស្អាត clean |
.table-hover |
ពណ៌ផ្សេងពេល hover ជួរ | តារាងអាច click បាន - បង្ហាញ interactivity |
.table-dark |
ពណ៌ងងឹត (dark theme) | គេហទំព័រពណ៌ងងឹត - contrast ខ្ពស់ |
.table-sm |
padding តូច (compact) | តារាងច្រើនជួរ - សន្សំកន្លែង |
🌈 Table Row & Cell Colors
| Color Class | Background Color | Semantic Meaning | Example Use |
|---|---|---|---|
.table-primary |
ពណ៌ primary (blue) | ទិន្នន័យសំខាន់ / highlighted | Featured items, selected rows |
.table-success |
ពណ៌បៃតង (green) | ជោគជ័យ / positive status | Active users, completed tasks |
.table-danger |
ពណ៌ក្រហម (red) | គ្រោះថ្នាក់ / error | Inactive users, failed actions |
.table-warning |
ពណ៌លឿង (yellow) | ព្រមាន / pending | Pending approvals, warnings |
.table-info |
ពណ៌ផ្ទៃមេឃ (cyan) | ព័ត៌មាន / informational | Notes, additional information |
.table-light |
ពណ៌ស្រាល (light gray) | Subtle highlight | Header rows, separators |
.table-dark |
ពណ៌ងងឹត (dark gray) | Strong contrast | Header rows, footers |
📱 Responsive Table Options
| Wrapper Class | Breakpoint | Behavior | When to Use |
|---|---|---|---|
.table-responsive |
All sizes | Horizontal scroll ពេលតារាងទទឹងធំពេក | តារាងច្រើនជួរឈរ - default choice |
.table-responsive-sm |
< 576px | Scroll លើ mobile តូចតែប៉ុណ្ណោះ | តារាងមធ្យម - OK on tablets+ |
.table-responsive-md |
< 768px | Scroll លើ mobile និង tablet តូច | តារាងធំ - OK on laptop+ |
.table-responsive-lg |
< 992px | Scroll លើ tablet | តារាងធំពិសេស - desktop only |
.table-responsive-xl |
< 1200px | Scroll លើ laptop តូច | តារាងធំខ្លាំង - large screens |
.table-responsive-xxl |
< 1400px | Scroll លើអេក្រង់ធម្មតា | តារាងធំណាស់ - ultra-wide screens |
📏 Table Sizing
| Aspect | Class/Attribute | Effect |
|---|---|---|
| Compact Table | .table-sm |
Padding តូច (0.3rem instead of 0.5rem) |
| Column Width | style="width: 200px" on <th> |
កំណត់ទទឹងជួរឈរជាក់លាក់ |
| Vertical Alignment | .align-top, .align-middle, .align-bottom |
តម្រឹមមាតិកាបញ្ឈរក្នុងក្រឡា |
🎯 Common Table Patterns
| Pattern | Classes Combination | Purpose |
|---|---|---|
| Data Table | .table .table-striped .table-hover |
តារាងទិន្នន័យអាចអាន និង click បាន |
| Clean Table | .table .table-borderless |
តារាងសាមញ្ញគ្មានស៊ុម |
| Compact Data | .table .table-sm .table-bordered |
តារាងច្រើនទិន្នន័យក្នុងកន្លែងតូច |
| Dashboard Table | .table .table-hover + colored rows |
តារាង status dashboard |
| Report Table | .table .table-bordered .table-striped + dark header |
របាយការណ៍ផ្លូវការ - professional look |
✅ Table Best Practices
| ❌ Avoid | ✅ Best Practice |
|---|---|
Forgetting .table-responsive wrapper for wide tables |
Always wrap tables >5 columns with <div class="table-responsive"> |
| Using too many colors randomly | Use semantic colors purposefully (success=active, danger=error) |
| Very long tables without pagination | Limit to 10-20 rows per page with pagination component |
| Combining too many variants (.striped + .bordered + .hover + .dark) | Keep it simple - 2-3 variants maximum |
Not using <thead> and <tbody> |
Always use semantic HTML structure for accessibility |
| Fixed column widths that break responsive | Let columns auto-size or use percentage widths |
| No header labels for data columns | Clear, concise <th> labels for every column |