สำหรับการจัดสไตล์ตารางด้วย CSS สามารถตั้งค่าขอบ, รวมขอบ, ความกว้าง, ความสูง, padding, การจัดตำแหน่งข้อความ ฯลฯ มาดูตัวอย่าง:
ตัวอย่างที่ 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: รวมขอบตาราง (border-collapse)
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; background-color: black; color: white; } th, td { border: 2px dashed yellow; } </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>
ผลลัพธ์
ตัวอย่างที่ 3: ใช้ padding และ text-align
<!DOCTYPE html> <html> <head> <style> table { border: 1px solid black; background-color: blue; color: white; } th, td { border: 1px solid black; padding: 20px; text-align: center; } table#demo { table-layout: fixed; width: 100%; } </style> </head> <body> <h2>Team Ranking Table</h2> <table id="demo"> <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> </table> </body> </html>
ผลลัพธ์
เคล็ดลับการจัดสไตล์ตาราง
- ใช้
border-collapse: collapseเพื่อลดขอบซ้อน - ใช้
paddingบน th, td เพื่อให้ข้อความไม่ชิดขอบ - ใช้
text-alignจัดชิดซ้าย/กึ่งกลาง/ขวา - ใช้
:nth-child(even/odd)สลับสีแถว (zebra striping) - ใช้
white-space: nowrapป้องกันการขึ้นบรรทัดใหม่ - ใช้
overflow-x: autoบน wrapper สำหรับ responsive table
