តារាង

តារាងប្រើសម្រាប់រៀបចំទិន្នន័យដាក់ជាជួរៗ។

មានជាទូទៅ

ឧទាហរណ៍

តារាងតាមបុរេជម្រើស

បុរេជម្រើស
# គោត្តនាម នាម បញ្ជាប់
1 ចន្ទ សុមន្ថា @smt
2 សុខ មាលតី @md
3 កូនបក្សីតូច @swift 

 
<div class="table-responsive-lg">
  <table class="table">
    <caption>បុរេជម្រើស</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ថា</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

តារាងតូច

តារាងតូច
# គោត្តនាម នាម បញ្ជាប់
1 សុមន្ថា ចន្ទ @smt
2 សុខ មាលតី @md
3 កូនបក្សីតូច @swift 

 
<div class="table-responsive-lg">
  <table class="table table-sm">
    <caption>តារាងតូច</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>សុមន្ថា</td>
      <td>ចន្ទ</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

តារាងមានក្រឡា

តារាងមានក្រឡា
# គោត្តនាម នាម បញ្ជាប់
1 ចន្ទ សុមន្ថា @smt
2 សុខ មាលតី @md
3 កូនបក្សីតូច @swift 

 
<div class="table-responsive-lg">
  <table class="table table-striped">
    <caption>តារាងមានក្រឡា</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ថា</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

តារាងមានបន្ទាត់ខណ្ឌចែក

តារាងមានបន្ទាត់ខណ្ឌចែក
# គោត្តនាម នាម បញ្ជាប់
1 ចន្ទ សុមន្ថា @smt
2 សុខ មាលតី @md
3 កូនបក្សីតូច @swift 

 
<div class="table-responsive-lg">
  <table class="table table-bordered">
    <caption>តារាងមានបន្ទាត់ខណ្ឌចែក</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ថា</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

តារាងគ្មានបន្ទាត់ខណ្ឌចែក

តារាងគ្មានបន្ទាត់ខណ្ឌចែក
# គោត្តនាម នាម បញ្ជាប់
1 ចន្ទ សុមន្ថា @smt
2 សុខ មាលតី @md
3 កូនបក្សីតូច @swift 

 
<div class="table-responsive-lg">
  <table class="table table-borderless">
    <caption>តារាងគ្មានបន្ទាត់ខណ្ឌចែក</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ថា</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

តារាងប្រែពណ៍ពេល hover ពីលើ

តារាងប្រែពណ៌ពេល hover ពីលើ
# គោត្តនាម នាម បញ្ជាប់
1 ចន្ទ សុមន្ថា @smt
2 សុខ មាលតី @md
3 កូនបក្សីតូច @swift 

 
<div class="table-responsive-lg">
  <table class="table table-hover">
    <caption>តារាងប្រែពណ៌ពេល hover ពីលើ </caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ថា</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

តារាងងងឹត

តារាងងងឹត
# គោត្តនាម នាម បញ្ជាប់
1 ចន្ទ សុមន្ថា @smt
2 សុខ មាលតី @md
3 កូនបក្សីតូច @swift 

 
<div class="table-responsive-lg">
  <table class="table table-dark">
    <caption>តារាងងងឹត</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ថា</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

តារាងអាចអូសទៅវិញទៅមកបាន

នៅគ្រប់ breakpoint ទាំងអស់, ប្រើ .table-responsive សម្រាប់ឱ្យ​​​តារាងអាចអូសបាននៅលើអ័ក្សដេក។ ប្រើ .table-responsive{-sm|-md|-lg|-xl|-xxl} ដើម្បីធ្វើឱ្យតារាងអាចឆ្លើយតបទៅនឹង breakpoint ណាមួយ។
តារាងអាចអូសទៅវិញទៅមកបាន
# គោត្តនាម នាម បញ្ជាប់ # គោត្តនាម នាម បញ្ជាប់ # គោត្តនាម នាម បញ្ជាប់ # គោត្តនាម នាម បញ្ជាប់ # គោត្តនាម នាម បញ្ជាប់
1 ចន្ទ សុមន្ដា @smt 1 ចន្ទ សុមន្ដា @smt 1 ចន្ទ សុមន្ដា @smt 1 ចន្ទ សុមន្ដា @smt 1 ចន្ទ សុមន្ដា @smt
2 សុខ មាលតី @md 2 សុខ មាលតី @md 2 សុខ មាលតី @md 2 សុខ មាលតី @md 2 សុខ មាលតី @md
3 កូនបក្សីតូច @swift 3 កូនបក្សីតូច @swift 3 កូនបក្សីតូច @swift 3 កូនបក្សីតូច @swift 3 កូនបក្សីតូច @swift 

 
<div class="table-responsive">
  <table class="table">
    <caption>តារាងអាចអូសទៅវិញទៅមកបាន</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
      <th scope="col">#</th>
      <th scope="col">គោត្តនាម</th>
      <th scope="col">នាម</th>
      <th scope="col">បញ្ជាប់</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ដា</td>
      <td>@smt</td>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ដា</td>
      <td>@smt</td>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ដា</td>
      <td>@smt</td>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ដា</td>
      <td>@smt</td>
      <th scope="row">1</th>
      <td>ចន្ទ</td>
      <td>សុមន្ដា</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
      <th scope="row">2</th>
      <td>សុខ</td>
      <td>មាលតី</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
      <th scope="row">3</th>
      <td colspan="2">កូនបក្សីតូច</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

គោលការណ៍ណែនាំនៃការប្រើប្រាស់

តារាងគួរប្រើប្រាស់នៅពេល៖

  • ពេលអ្នកចង់បង្ហាញទិន្នន័យរបស់ស្ថិតិ។
  • ការបង្ហាញទិន្នន័យស្រដៀងគ្នា ឬនៅក្នុងក្រុមតែមួយ។

តារាងមិនគួរប្រើប្រាស់នៅពេល៖

  • សម្រាប់ទិន្នន័យដែលមានលក្ខណៈស្មុគស្មាញ គួរតែប្រើប្រាស់ ព័ត៌​មាន​ជា​រូប​ភាព​សង្ខេបឬក្រាបជំនួសវិញ។
  • សម្រាប់ការដាក់បង្ហាញផ្ទាំងព័ត៌មាន។

គោលការណ៍ណែនាំនៃការរចនា

តារាងគួរតែមើលទៅសាមញ្ញ
តារាងត្រូវបានប្រើប្រាស់ដើម្បីធ្វើឱ្យទិន្នន័យស្មុគស្មាញមើលទៅងាយយល់ដល់អ្នកប្រើប្រាស់។ ដូច្នេះតារាងមិនចាំបាច់ត្រូវរចនាទេ ធ្វើយ៉ាងណាឱ្យវាមើលទៅសាមញ្ញដើម្បីអ្នកប្រើប្រាស់ងាយស្រួលអានទិន្នន័យនៅក្នុងតារាង។

គិតគូរពីអ្នកប្រើប្រាស់ទូរស័ព្ទដៃ
តារាងជាទូទៅមានច្រើនជួរ មានបណ្តោយវែង ដែលនាំឱ្យវាមើលទៅមិនសូវស្អាតទេនៅលើទូរស័ព្ទដៃ ដូច្នេះក្នុងករណីដែលទិន្នន័យមិនចាំបាច់ដាក់ក្នុងតារាងទេ អ្នកគួរប្រើប្រាស់វិធីផ្សេង ដើម្បីដាក់បង្ហាញទិន្នន័យ។

ឱ្យអ្នកប្រើប្រាស់អាចតម្រៀបទិន្នន័យបាន
អ្នកប្រើប្រាស់គួរតែអាចតម្រៀបទិន្នន័យបានដោយស្វ័យប្រវត្តិនៅក្នុងតារាង។ ឧទាហរណ៍ ការតម្រៀបតាមលំដាប់អក្ខរក្រម ឬការតម្រៀបតាមលំដាប់លេខ។

ខ្នាតសម្រាប់រចនា

$table-cell-padding-y: 1rem !default;
$table-cell-padding-x: 1rem !default;
$table-cell-padding-y-sm: .5rem !default;
$table-cell-padding-x-sm: .5rem !default;
$table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-bg: transparent !default;
$table-accent-bg: transparent !default;
$table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
$table-active-bg: rgba($black, $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
$table-border-factor: .1 !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-400 !default;
$table-striped-order: odd !default;
$table-group-separator-color: currentColor !default;
$table-caption-color: $text-muted !default;
$table-bg-scale: 100% !default;
$table-variants: ("primary": shift-color($primary, $table-bg-scale),
"secondary": shift-color($secondary, $table-bg-scale),
"success": shift-color($success, $table-bg-scale),
"info": shift-color($info, $table-bg-scale),
"warning": shift-color($warning, $table-bg-scale),
"danger": shift-color($danger, $table-bg-scale),
"light": $light,
"dark": $dark,
) !default;
Home
Previous version 1.0.3