CSS의 테이블에서 셀 패딩 사용

1. CSS의 셀 패딩 및 셀 간격에 padding 및 border-spacing 속성 사용
2. border-spacing 속성을 사용하여 CSS에서 수직 및 수평 간격 지정

이 기사에서는 CSS에서 수행하는 방법과 함께 셀 패딩 및 셀 간격의 개념을 소개합니다.

CSS의 셀 패딩 및 셀 간격에 padding 및 border-spacing 속성 사용

셀 패딩의 목적은 셀의 경계에서 셀의 내용까지 공백을 제공하는 것입니다. CSS의 padding 속성을 사용하여 셀의 패딩을 지정할 수 있습니다. padding 속성은 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩을 나타내는 약어입니다. CSS 선택기로 테이블의 셀을 선택하고 padding 속성을 사용할 수 있습니다.

마찬가지로 셀 간격의 목적은 인접한 셀 사이에 공간을 제공하는 것입니다. border-spacing CSS 속성을 사용하여 인접 셀의 경계 사이의 간격을 지정할 수 있습니다. 그러나 이 속성은 border-collapse 속성이 separate로 설정된 경우에만 작동합니다. 이는 border-collapse를 collapse로 설정할 때 border-spacing 속성을 사용할 수 없음을 의미합니다. separate 값은 border-collapse 속성의 기본값입니다.

셀 패딩 및 셀 간격이 없는 일반 HTML 테이블은 다음 적용된 CSS와 동일합니다. border-collapse:collapse는 인접한 셀의 경계가 하나로 병합됨을 의미합니다. padding:0px는 셀에 패딩이 없는 것과 유사합니다. 이는 테이블의 기본 동작과 유사합니다.

table {
    border-collapse:collapse;
}

td {
    padding:0px;
} 

예를 들어, 이름, 주소 및 연령 제목이 있는 HTML 테이블을 만듭니다. 일부 값으로 표를 채우십시오. <td> </td> 태그는 테이블 데이터를 나타냅니다. CSS에서 <table> 태그를 선택하고 border-spacing을 5px로 설정합니다. 다음으로 <td> 태그를 선택하고 padding을 5px로 설정합니다.

따라서 텍스트의 4면 모두에서 5px의 셀 패딩을 만들었습니다. 또한 테이블의 각 셀 경계 사이에 5px의 공간을 만들었습니다. CSS에서 셀 패딩 및 셀 간격을 수행하는 방법을 배웠습니다.

예제 코드:

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>

table {
    border-spacing: 5px;
}
td {
    padding: 5px;
}

border-spacing 속성을 사용하여 CSS에서 수직 및 수평 간격 지정

border-spacing 속성을 사용하여 테이블의 셀 테두리 사이의 수평 및 수직 간격을 지정할 수 있습니다. 이전 예에서는 가로 간격을 적용했습니다. 여기서는 두 간격을 모두 적용합니다. border-spacing 속성에 대해 두 개의 값을 지정할 수 있습니다. 첫 번째는 가로 간격과 비슷하고 두 번째는 세로 간격과 비슷합니다. 위에서 만든 테이블에 이 방법을 적용할 수 있습니다.

예를 들어 table 태그를 선택하고 border-spacing을 8px 및 5px로 설정합니다. 8px의 수평 간격과 5px의 수직 간격을 생성합니다.

예제 코드:

table {
    border-spacing:8px 5px;
}
td {
    padding: 5px;
}

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>