HTML 테이블 테두리 제거 방법

HTML 테이블에서 눈에 보이는 테두리를 없애려면 선이 표시되는 테이블과 셀에 CSS border 속성을 none으로 지정하세요. 인접한 셀의 테두리가 하나의 선을 공유하게 하려면 border-collapse: collapse를 사용합니다. 이 속성은 테두리를 제거하는 대신 서로 맞닿은 테두리를 합칩니다. 따라서 셀 안에 이미지나 다른 콘텐츠를 배치할 때 두 속성의 차이를 알아두면 유용합니다. border-collapse: collapse는 인접한 테두리가 만나는 방식을 바꾸고, border: none은 선택한 요소에 렌더링되는 테두리를 없앱니다.

border-collapse: collapse로 HTML 테이블 셀의 인접한 테두리 합치기

CSS border-collapse 속성은 테이블에서 분리 테두리 모델과 병합 테두리 모델 중 무엇을 사용할지 제어합니다. 값을 collapse로 지정하면 인접한 셀의 테두리가 합쳐져 공유 경계를 따라 두 개의 선이 따로 그려지지 않습니다. 하지만 테이블 바깥쪽이나 셀 주변에 이미 지정된 테두리는 계속 보일 수 있습니다. 이 선언은 테두리를 제거하지 않으며 간격을 0으로 설정하는 방법도 아닙니다. 분리 테두리 모델에서는 border-spacing이 셀 테두리 사이의 간격을 제어합니다. 병합 모델은 인접한 테두리를 합치므로, 이 모델에서 보이는 선을 없애려고 border-spacing을 바꾸는 것은 해결책이 아닙니다.

다음의 간단한 HTML 예제에는 테두리가 있는 셀 두 개가 있습니다. 테이블 규칙은 두 셀이 만나는 곳의 선을 합치고, 셀 규칙은 테두리를 계속 표시합니다.

const example = `<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>`;
console.log(example);

<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>

셀에 이미지 요소를 넣는 경우를 포함해 예제의 셀 텍스트를 원하는 콘텐츠로 바꾸면 됩니다. 이 CSS는 일반적인 <td> 및 <th> 셀에 적용되며 이미지 서비스에 의존하지 않습니다. padding 선언은 각 셀 안쪽에 여백을 더합니다. 서로 분리된 셀 테두리 사이의 간격을 제어하지는 않습니다. 선이 이어지는 격자 형태를 원한다면 셀 테두리를 유지하고 병합 모델을 사용하세요. 선을 모두 없애려면 아래 설명처럼 해당 요소에 적용되는 테두리 선언을 제거하면 됩니다.

CSS border 속성을 none으로 설정해 HTML 테이블의 테두리 제거하기

테두리를 숨기려면 테이블과 테두리를 없앨 셀 종류마다 border: none을 지정하세요. table, th, td 선택자를 사용하면 테이블, 헤더 셀, 데이터 셀을 함께 대상으로 삼습니다. 테이블 바깥 테두리는 이미 없고 셀 사이의 선만 남았다면 th, td로 해당 셀만 선택할 수 있습니다. 선택자는 선언을 적용할 요소를 정하고, CSS 캐스케이드에 따라 일치하는 선언 중 실제 적용되는 선언이 결정됩니다. 더 구체적인 규칙은 일반 선택자보다 우선할 수 있으며, 구체성이 같으면 나중에 선언된 규칙이 우선합니다.

border 속성은 border-width, border-style, border-color를 한 번에 지정하는 약식 속성입니다. 값을 none으로 설정하면 선택한 요소에 렌더링되는 테두리가 없어지지만, 셀 안쪽 여백이나 콘텐츠까지 없어지지는 않습니다. 예를 들어 세 요소 종류 모두에서 보이는 테두리를 없애려면 스타일시트에 table, th, td { border: none; }을 지정할 수 있습니다. 테이블에 병합 테두리 모델도 적용하려는 경우에만 border-collapse: collapse를 추가하세요. 이 속성은 border: none을 대신하지 않습니다.

선이 계속 남아 있다면 어떤 요소가 그 선을 그리는지 확인하세요. 테이블 자체의 테두리에는 테이블을 대상으로 하는 규칙이 필요하고, 헤더 셀이나 데이터 셀의 테두리에는 각각 th 또는 td를 대상으로 하는 규칙이 필요합니다. 그런 다음 다른 스타일시트 규칙이 선언을 덮어쓰는지 확인하세요. 이렇게 하면 실제로 테두리가 있는 요소에만 수정 사항을 적용해 관련 없는 테이블 간격이나 콘텐츠를 바꾸지 않을 수 있습니다.