การสร้าง Table ที่สวยงามด้วย CSS

การสร้าง Table ที่สวยงามด้วย CSS

ในบทเรียนก่อนหน้า เราได้เรียนรู้เกี่ยวกับการปรับแต่ง List ด้วย CSS คราวนี้เราจะมาเจาะลึกเรื่องการจัดรูปแบบ Table ให้สวยงามและอ่านง่ายยิ่งขึ้นด้วย CSS กันบ้าง Table หรือตาราง เป็นองค์ประกอบสำคัญในการนำเสนอข้อมูลที่เป็นระเบียบ การใช้ CSS จะช่วยให้เราควบคุมรูปลักษณ์ของ Table ได้อย่างละเอียด ไม่ว่าจะเป็นสี, เส้นขอบ, ช่องว่าง และอื่นๆ อีกมากมาย

โดยพื้นฐานแล้ว Table ใน HTML จะประกอบด้วยแท็กต่างๆ ดังนี้:

• <table>: แท็กหลักที่ใช้กำหนดตาราง
• <tr>: แท็กที่ใช้กำหนดแถว (Table Row)
• <th>: แท็กที่ใช้กำหนดหัวตาราง (Table Header) มักจะอยู่ในแถวแรก
• <td>: แท็กที่ใช้กำหนดเซลล์ข้อมูล (Table Data)

เราจะมาดูวิธีปรับแต่ง Table ด้วย CSS โดยเน้นที่ properties ที่สำคัญและใช้งานบ่อยกันครับ

border-collapse: จัดการเส้นขอบตาราง

โดยปกติแล้ว Table จะมีเส้นขอบสองชั้น: เส้นขอบของ Table เอง และเส้นขอบของแต่ละเซลล์ (<td> และ <th>) border-collapse property ช่วยให้เราจัดการเส้นขอบเหล่านี้ได้

ค่าที่เป็นไปได้สำหรับ border-collapse คือ:

• separate: (ค่าเริ่มต้น) แต่ละเซลล์และ Table จะมีเส้นขอบของตัวเอง
• collapse: เส้นขอบที่อยู่ติดกันจะรวมกันเป็นเส้นเดียว

ลองดูตัวอย่าง:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

table {
  border: 1px solid black;
}

th, td {
  border: 1px solid black;
}

ผลลัพธ์ที่ได้คือ Table ที่มีเส้นขอบสองชั้น หากเราต้องการให้เส้นขอบรวมกันเป็นเส้นเดียว เราสามารถเพิ่ม border-collapse: collapse; ลงใน CSS ได้ดังนี้:

table {
  border: 1px solid black;
  border-collapse: collapse; /* เพิ่มตรงนี้ */
}

th, td {
  border: 1px solid black;
}

เพียงเท่านี้ Table ของเราก็จะมีเส้นขอบที่สวยงามและเป็นระเบียบเรียบร้อย

padding และ spacing: เพิ่มช่องว่างเพื่อให้อ่านง่าย

การเพิ่มช่องว่างภายในเซลล์ (padding) และระหว่างเซลล์ (spacing) จะช่วยให้ Table ดูโปร่งสบายและอ่านง่ายขึ้น

padding property ใช้สำหรับเพิ่มช่องว่างภายในเซลล์:

th, td {
  padding: 8px; /* เพิ่ม padding 8px รอบๆ ข้อความในเซลล์ */
}

border-spacing property ใช้สำหรับกำหนดระยะห่างระหว่างเซลล์ (ใช้ได้เฉพาะเมื่อ border-collapse มีค่าเป็น separate):

table {
  border-spacing: 10px; /* กำหนดระยะห่างระหว่างเซลล์เป็น 10px */
  border-collapse: separate; /* ต้องตั้งค่าเป็น separate */
}

ตัวอย่างการใช้งาน padding และ border-spacing:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
  </tr>
</table>

table {
  border-collapse: collapse;
  border-spacing: 5px; /* เพิ่มระยะห่างระหว่างเซลล์ */
}

th, td {
  border: 1px solid black;
  padding: 10px; /* เพิ่ม padding ภายในเซลล์ */
  text-align: left; /* จัดข้อความชิดซ้าย */
}

th {
  background-color: #f2f2f2; /* เปลี่ยนสีพื้นหลังของหัวตาราง */
}

โค้ดนี้จะทำให้ Table มีช่องว่างภายในเซลล์ 10px และมีระยะห่างระหว่างเซลล์ 5px นอกจากนี้ยังมีการจัดข้อความชิดซ้ายและเปลี่ยนสีพื้นหลังของหัวตารางเพื่อความสวยงาม

Zebra striping: แถวสลับสีเพื่อให้อ่านง่ายยิ่งขึ้น

Zebra striping คือเทคนิคการใช้สีพื้นหลังสลับกันในแต่ละแถวของ Table เพื่อให้ง่ายต่อการอ่านและติดตามข้อมูล เราสามารถทำได้โดยใช้ pseudo-class :nth-child ใน CSS

:nth-child(even) เลือกทุกแถวที่เป็นเลขคู่

:nth-child(odd) เลือกทุกแถวที่เป็นเลขคี่

ตัวอย่าง:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$1200</td>
  </tr>
  <tr>
    <td>Tablet</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>$800</td>
  </tr>
</table>

table {
  width: 100%; /* กำหนดความกว้างของตารางให้เต็มพื้นที่ */
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd; /* สีเส้นขอบอ่อนๆ */
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* แถวเลขคู่มีสีพื้นหลังอ่อนๆ */
}

ในตัวอย่างนี้ เรากำหนดให้แถวที่เป็นเลขคู่มีสีพื้นหลังเป็น #f9f9f9 ซึ่งเป็นสีเทาอ่อนๆ ทำให้เกิดแถบสีสลับกัน ช่วยให้อ่านข้อมูลได้ง่ายขึ้น

นอกจากนี้ เรายังสามารถใช้ :hover pseudo-class เพื่อเพิ่มลูกเล่นเมื่อผู้ใช้เลื่อนเมาส์ไปบนแถวใดแถวหนึ่งได้อีกด้วย:

tr:hover {
  background-color: #ddd; /* เปลี่ยนสีพื้นหลังเมื่อ hover */
}

โค้ดนี้จะเปลี่ยนสีพื้นหลังของแถวเป็น #ddd เมื่อผู้ใช้เลื่อนเมาส์ไปบนแถวนั้น

สรุปแล้ว การใช้ CSS เพื่อจัดรูปแบบ Table จะช่วยให้เราสร้าง Table ที่สวยงาม, อ่านง่าย, และเป็นระเบียบเรียบร้อยได้ Properties อย่าง border-collapse, padding, border-spacing, และ :nth-child เป็นเครื่องมือสำคัญที่จะช่วยให้ Table ของเราดูดีขึ้นอย่างเห็นได้ชัด

ในบทเรียนถัดไป เราจะไปเรียนรู้เกี่ยวกับการปรับแต่ง Form ด้วย CSS เพื่อให้ Form ของเราไม่เพียงแต่ใช้งานได้ดี แต่ยังดูสวยงามและน่าใช้งานอีกด้วย