ช่องว่างภายในตาราง HTML & การเว้นวรรค

ตาราง HTML สามารถปรับช่องว่างภายในเซลล์และช่องว่างระหว่างเซลล์ได้

ตาราง HTML - ช่องว่างภายในเซลล์

ช่องว่างภายในเซลล์คือช่องว่างระหว่างขอบเซลล์และเนื้อหาของเซลล์

โดยค่าเริ่มต้น ช่องว่างภายในถูกตั้งค่าเป็น 0

หากต้องการเพิ่มช่องว่างภายในเซลล์ตาราง ให้ใช้paddingคุณสมบัติ CSS:

th, td {
padding: 15px;
}

หากต้องการเพิ่มช่องว่างภายในเนื้อหาเท่านั้น ให้ใช้padding-topคุณสมบัติ

และด้านอื่น ๆ ด้วยpadding-bottom, padding-left, และpadding-rightคุณสมบัติ:

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

ระยะห่างของเซลล์คือช่องว่างระหว่างแต่ละเซลล์

โดยค่าเริ่มต้น พื้นที่จะถูกตั้งค่าเป็น 2 พิกเซล

หากต้องการเปลี่ยนช่องว่างระหว่างเซลล์ตาราง ให้ใช้border-spacingคุณสมบัติ CSS บนtable องค์ประกอบ:

table {
border-spacing: 30px;
}