คุณสมบัติ CSS สำคัญสำหรับการจัดสไตล์ตาราง (Tables)

เราสามารถกำหนดสไตล์สำหรับตารางได้ด้วย CSS คุณสมบัติต่อไปนี้มักใช้จัดสไตล์ <table> และองค์ประกอบภายใน:

• border - กำหนด border-width, border-style, border-color
• border-collapse - ระบุว่าเซลล์ตารางควรมีขอบร่วม (collapse) หรือแยก (separate)
• caption-side - จัดตำแหน่งแนวตั้งของกล่อง caption
• empty-cells - ระบุการแสดงเซลล์ว่าง
• table-layout - กำหนดอัลกอริทึมการวางแถว คอลัมน์ เซลล์ (auto/fixed)

ตัวอย่างที่ 1: Border, Caption, Box-shadow

<!DOCTYPE html>
<html>
<head>
  <style>
    table, table * { border: thin solid; padding: 5px; font-style: italic; }
    caption { caption-side: bottom; }
    td { box-shadow: inset 0 0 6px green; }
  </style>
</head>
<body>
  <table>
    <caption>Demo caption</caption>
    <tr><td>demo</td></tr>
    <tr><td>demo</td><td></td></tr>
    <tr><td>demo</td><td>demo</td><td></td></tr>
  </table>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: Border-collapse และ Empty Cells

<!DOCTYPE html>
<html>
<head>
  <style>
    div { display: flex; float: left; }
    table { border: 3px solid black; }
    td { border: 3px solid lightgreen; }
    th { border: 3px solid lightblue; }
    #t2 { border-collapse: collapse; }
  </style>
</head>
<body>
  <h2>Team Rankings</h2>
  <div>
    <table id="t1">  {/* separate borders (default) */}
      <tr><th>Team (Test)</th><th>Rank</th></tr>
      <tr><td>India</td><td>1</td></tr>
      <tr><td>Australia</td><td>2</td></tr>
    </table>
  </div>
  <div>
    <table id="t2">  {/* collapsed borders */}
      <tr><th>Team (ODI)</th><th>Rank</th></tr>
      <tr><td>India</td><td>1</td></tr>
      <tr><td>England</td><td>2</td></tr>
    </table>
  </div>
</body>
</html>

ผลลัพธ์

คุณสมบัติเพิ่มเติมที่น่าสนใจ

แนวทางตาราง Responsive

/* Horizontal scroll บนมือถือ */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* หรือ Stack rows บนมือถือ */
@media (max-width: 600px) {
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr { margin-bottom: 1rem; border: 1px solid #ddd; }
  td { display: flex; justify-content: space-between; padding: 0.5rem; }
  td::before { content: attr(data-label); font-weight: bold; }
}