การเพิ่มเส้นขอบให้ตารางด้วย CSS

ใช้คุณสมบัติ border เพื่อเพิ่มเส้นขอบให้ตาราง (table) และเซลล์ (th, td)

ตัวอย่างที่ 1: เส้นขอบรวม

<!DOCTYPE html> <html> <head> <style> table, th, td {    border: 2px dashed orange; } </style> </head> <body> <h2>Team Ranking Table</h2> <table> <tr> <th>Team</th> <th>Rank</th> <th>Points</th> </tr> <tr> <td>India</td> <td>1</td> <td>200</td>/tr> <tr> <td>England</td> <td>2</td> <td>180</td>/tr> <tr> <td>Australia</td> <td>3</td> <td>150</td>/tr> <tr> <td>NewZealand</td> <td>4</td> <td>130</td>/tr> <tr> <td>SouthAfrica</td> <td>5</td> <td>100</td>/tr> <tr> <td>WestIndies</td> <td>6</td> <td>80</td>/tr> <tr> <td>Pakistan</td> <td>7</td> <td>70</td>/tr> </table> </body> </html>

ตัวอย่างที่ 2: เส้นขอบแยกตารางและเซลล์

<!DOCTYPE html> <html> <head> <style> table {    border: 5px dashed orange; } th, td {    border: 1px dashed green; } </style> </head> <body> <h2>Team Ranking Table</h2> <table> <tr> <th>Team</th> <th>Rank</th> <th>Points</th>/tr> <tr> <td>India</td> <td>1</td> <td>200</td>/tr> <tr> <td>England</td> <td>2</td> <td>180</td>/tr> <tr> <td>Australia</td> <td>3</td> <td>150</td>/tr> <tr> <td>NewZealand</td> <td>4</td> <td>130</td>/tr> <tr> <td>SouthAfrica</td> <td>5</td> <td>100</td>/tr> <tr> <td>WestIndies</td> <td>6</td> <td>80</td>/tr> <tr> <td>Pakistan</td> <td>7</td> <td>70</td>/tr> </table> </body> </html>

คำอธิบายและเทคนิคเพิ่มเติม

border-collapse: collapse

สำคัญมาก! ค่าเริ่มต้นคือ separate ทำให้มีช่องว่างระหว่างเซลล์ ใช้ border-collapse: collapse เพื่อรวมเส้นขอบเป็นเส้นเดียว:

table { border-collapse: collapse; }

คุณสมบัติตารางที่เกี่ยวข้อง:

แนวทางปฏิบัติที่ดี (Best Practices):

• ใช้ border-collapse: collapse สำหรับตารางข้อมูลทั่วไป
• ใช้ box-sizing: border-box ป้องกันขนาดตารางล้น
• ตั้ง padding ให้เซลล์เพื่อความอ่านง่าย
• ใช้ :nth-child() สลับสีแถว (zebra striping)