วิธีตั้งค่า Cell Padding ในตาราง HTML

Cell padding คือระยะห่างระหว่างขอบเซลล์ (border) กับเนื้อหาภายในเซลล์ ใน HTML5 ไม่รองรับ attribute cellpadding ของ <table> แล้ว ต้องใช้ CSS property padding แทน

วิธีการ

<table style="padding: 10px"> ... </table>
<!-- หรือระบุต่อเซลล์ -->
<td style="padding: 10px">เนื้อหา</td>

ตัวอย่างเต็ม

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Programming Language</h1>
  <table>
    <tr>
      <th style="padding:10px">Language</th>
    </tr>
    <tr>
      <td style="padding:10px">Ruby</td>
    </tr>
  </table>
</body>
</html>

ข้อควรทราบ

• padding สามารถระบุได้ 4 ด้านแยกกัน: padding-top, padding-right, padding-bottom, padding-left
• รูปแบบย่อ: padding: 10px 20px 15px 5px (บน ขวา ล่าง ซ้าย)
• inline style จะ override global styles
• แนะนำใช้ class ใน CSS file สำหรับโปรเจกต์จริง