Merging Cells

Cell များကို ပေါင်းစပ်ခြင်း (Merging Cells)

တစ်ခါတလေမှာ Cell တစ်ခုတည်းကို Column တွေ ဒါမှမဟုတ် Row တွေ ၂ ခုစာ၊ ၃ ခုစာအထိ နေရာယူစေချင်တဲ့အခါ ရှိနိုင်ပါတယ်။

Column Span (colspan)

Cell တွေကို အလျားလိုက် (Horizontally) ပေါင်းစပ်ပေးပါတယ်။

<tr>
  <th colspan="2">Course Info</th>
  <th>Level</th>
</tr>

Row Span (rowspan)

Cell တွေကို ဒေါင်လိုက် (Vertically) ပေါင်းစပ်ပေးပါတယ်။

<tr>
  <td rowspan="2">HTML Basics</td>
  <td>Duration: 2 hours</td>
  <td>Level: Beginner</td>
</tr>
<tr>
  <td>Duration: 3 hours</td>
  <td>Level: Intermediate</td>
</tr>

Table Styling အခြေခံများ

Table တွေကို CSS သုံးပြီး ပိုလှအောင်၊ ဖတ်ရလွယ်အောင် လုပ်နိုင်ပါတယ်-

border: Table နဲ့ Cell တွေရဲ့ ဘေးမှာ ဘောင်တွေ ထည့်ပေးတယ်။
padding: Cell တွေရဲ့ အတွင်းထဲမှာ နေရာလပ် (Spacing) ထည့်ပေးတယ်။
text-align: Cell ထဲက စာသားကို လိုချင်တဲ့ နေရာချပေးတယ်။ (ဘယ်၊ ညာ၊ အလယ်)
background-color: Row တွေ ဒါမှမဟုတ် Header တွေအတွက် နောက်ခံအရောင် (Background Color) ထည့်ပေးတယ်။

ဥပမာ -

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: lightgray;
  }
</style>

အကောင်းဆုံး လက်တွေ့အသုံးချနည်းများ (Best Practices)

Accessibility ပိုကောင်းအောင် ခေါင်းစဉ်တွေအတွက် <th> ကို အမြဲ သုံးပေးပါ။
Table တွေကို တတ်နိုင်သမျှ ရိုးရှင်းအောင်ထားပြီး၊ Table ထဲမှာ Table တွေ အများကြီး ထပ်ထည့်တာမျိုးကို ရှောင်ပါ။
Table က ဘာအကြောင်းလဲဆိုတာ ဖော်ပြဖို့ <caption> ကို သုံးပေးပါ။

Table တွေက Data တွေကို Rows တွေ၊ Columns တွေနဲ့ သေသပ်စွာ ဖော်ပြပေးပါတယ်။
<table> က အဓိက Container ဖြစ်ပြီး၊ <tr> က Rows တွေ ဖန်တီးတယ်၊ <th> နဲ့ <td> က ခေါင်းစဉ်နဲ့ Data Cell တွေကို သတ်မှတ်ပေးပါတယ်။
<caption> က ခင်ဗျားရဲ့ Table ကို ခေါင်းစဉ် တပ်ပေးပါတယ်။
colspan နဲ့ rowspan က Cell တွေကို Column တွေ၊ Row တွေအလိုက် ပေါင်းစပ်ပေးနိုင်ပါတယ်။
CSS က Table တွေကို ပိုဖတ်လို့ကောင်းပြီး ကြည့်လို့လှအောင် ကူညီပေးပါတယ်။
Table တွေ ထည့်တဲ့အခါ Accessibility နဲ့ Mobile Responsiveness ကို အမြဲတမ်း ထည့်သွင်းစဉ်းစားပါ ခင်ဗျာ။