HTML에서 테이블 행 사이에 수직 공간을 어떻게 추가합니까?

HTML 테이블의 공백 분리: 종합 가이드

웹 개발자로서 우리는 테이블을 사용하여 구조화된 방식으로 데이터를 표시하는 경우가 많습니다. 그러나 브라우저가 일반적으로 제공하는 것 이상으로 테이블 행 사이에 추가 수직 분리가 필요한 상황이 발생할 수 있습니다. CSS를 사용하여 이를 달성할 수 있습니까?

테이블 행 간격을 위한 CSS

일반적인 오해 중 하나는 CSS 속성 border-spacing을 사용하여 테이블 사이에 수직 공간을 추가할 수 있다는 것입니다. 행. 표 셀 사이의 간격을 조정하지만 행 사이의 수직 거리에는 영향을 주지 않습니다.

해결책: Rescue에 패딩

테이블 행 사이에 공간을 만들려면 , 핵심은 개별 테이블 셀에 패딩을 적용하는 데 있습니다(). 다음 CSS 코드를 고려해보세요.

tr.spaceUnder>td {
  padding-bottom: 1em;
}

spaceUnder 클래스를 포함하는 tr 행 내의 td 요소는 1em의 하단 패딩을 받아 효과적으로 행을 더 멀리 밀어냅니다. 이를 통해 깨끗하고 정리된 테이블 구조를 유지하면서 선택한 행 사이에 세로 간격을 만들 수 있습니다.

추가 고려 사항

이 솔루션은 tr의 직계 하위 항목에서만 작동한다는 점에 유의하세요. 강요. 이를 통해 아래 코드에 예시된 것처럼 섹션 사이의 간격이 다른 중첩 테이블을 생성할 수 있습니다.

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

위 내용은 HTML에서 테이블 행 사이에 수직 공간을 어떻게 추가합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!