🌐 HTML Lesson 04 — Tables

1. Basic Table Structure

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ko Min</td>
      <td>25</td>
      <td>Yangon</td>
    </tr>
    <tr>
      <td>Ma Aye</td>
      <td>22</td>
      <td>Mandalay</td>
    </tr>
  </tbody>
</table>

2. colspan & rowspan — Cell merge

<!-- colspan: အလျားတိုး -->
<table border="1">
  <tr>
    <th colspan="3">
      Full Name
    </th>
  </tr>
  <tr>
    <td>Title</td>
    <td>First</td>
    <td>Last</td>
  </tr>
</table>

<!-- rowspan: အမြင့်တိုး -->
<table border="1">
  <tr>
    <td rowspan="2">
      Merged
    </td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>

3. Full Table (thead + tbody + tfoot)

<table>
  <caption>💰 Monthly Sales Report</caption>
  <thead>
    <tr><th>Product</th><th>Qty</th><th>Price</th><th>Total</th></tr>
  </thead>
  <tbody>
    <tr><td>Apple</td><td>10</td><td>500</td><td>5,000</td></tr>
    <tr><td>Banana</td><td>5</td><td>300</td><td>1,500</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3"><strong>Grand Total</strong></td><td>6,500</td></tr>
  </tfoot>
</table>

4. Table Styling (CSS)

table {
  border-collapse: collapse;  /* border gaps ဖျက် */
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}
th {
  background-color: #2c3e50;
  color: white;
}
tr:nth-child(even) {
  background-color: #f8f9fa;  /* Zebra stripes */
}
tr:hover {
  background-color: #fff3ee;  /* Hover highlight */
}

5. Dynamic Table Builder