HTML / (25) 표 Padding & Spacing

▶ HTML 표는 셀 내부의 Padding 과 셀 사이의 Spacing 을 조정할 수 있다.

 

■ HTML 표 - 셀 Padding

▶ 셀 Padding은 셀 가장자리와 셀 내용 사이의 공간이다.

▶ 기본적으로 pdding 은 0으로 설정되어 있다.

▶ 표 셀에 패딩을 추가하려면 CSS "padding" 속성을 사용한다.

th, td {
  padding: 15px;
}

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding 

 

▶ 내용 위에만 padding을 추가하려면 "padding-top" 속성을 사용한다.

▶ 다른 부분은 "padding-bottom", "padding-left", "padding-right" 속성을 사용한다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding2 

 

■ HTML 표 - 셀 Spacing

▶ 셀 spacing은 각 셀 사이에 공간이다.

▶ 기본적으로 공간은 2 픽셀로 설정된다.

▶ 표 셀 사이에 공간을 변경하려면 <table> 요소에 CSS "border-spacing" 속성을 사용한다.

table {
  border-spacing: 30px;
}

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_border-spacing 

 

출처 : https://www.w3schools.com/html/html_table_padding_spacing.asp

HTML Table Padding & Spacing