ใน HTML สามารถจัดการ ช่องว่างระหว่างขอบเซลล์กับเนื้อหาภายในเซลล์ (Cell Padding) และ ช่องว่างระหว่างเซลล์แต่ละช่อง (Cell Spacing) ตามที่ต้องการได้
With Padding
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
With Spacing
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
HTML Table – Cell Padding
ช่องว่างของเซลล์ (Cell Padding) คือพื้นที่ระหว่างขอบของเซลล์ (Cell Edges) และเนื้อหาภายในเซลล์ (Cell Content) ค่าเริ่มต้นคือ 0 หากต้องการกำหนดขนาดช่องว่างภายในเซลล์ สามารถใช้ Property CSS padding
th, td {
padding: 15px;
}
หากต้องการใส่ช่องว่างเฉพาะบางด้าน เช่น ด้านบนหรือด้านซ้าย สามารถใช้ Property เฉพาะ เช่น
padding-topช่องว่างด้านบนpadding-bottomช่องว่างด้านล่างpadding-leftช่องว่างด้านซ้ายpadding-rightช่องว่างด้านขวา
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
Cell Spacing
Cell Spacing (ช่องว่างระหว่างเซลล์) คือระยะห่างระหว่างเซลล์แต่ละช่องของตาราง โดยค่าเริ่มต้นจะอยู่ที่ 2 pixels หากต้องการปรับระยะห่างนี้ ให้ใช้ Property CSS border-spacing กับ <table>
table {
border-spacing: 30px;
}