HTML Table Padding & Spacing | 셀 공간 조절

​

• HTML 표는 padding과 spacing 기능을 통해, 셀 사이의 공간을 조절할 수 있다.

---

 

<셀 padding>

​

• 셀 padding은, 셀의 가장자리와 셀 내용 사이의 공간을 말한다.
• default 값으로, 0으로 맞춰져 있고,
• padding을 더해주기 위해선, CSS의 padding 속성을 사용 하면 된다.

padding을 더한 다는 것은, 텍스트 위 아래로 빈 공간을 의미 (파랑색 화살표)

 

• padding 값을 좀 더 세밀하게 조절하고 싶다면, 아래와 같은 padding 속성을 이용하면 된다.
• padding-top
• padding-bottom
• padding-left
• padding-right

---

 

<셀 Spacing>

​

• cell spacing은 셀과 셀 사이의 빈 공간을 말한다.
• default 값으로, 2 pixels 이 기본 적용되고,
• 이를 변경하려면, table 요소에서 CSS의 border-spacing 속성을 사용하면 된다.
• border-spacing 은 테이블을 한번 테두리로 감싸주고, 그 안의 cell 간 spacing을 조절한다.

셀 칸과 셀 칸 사이의 거리 = spacing (파란색 화살표)

---