HTML 테이블에서 테두리 제거

1. border-collapse CSS 속성을 사용하여 HTML의 테이블 셀에서 테두리 제거
2. CSS border 속성을 none으로 설정하여 HTML의 테이블에서 테두리 제거

이 기사에서는 HTML 테이블에서 테두리를 제거하는 방법을 소개합니다. 표 셀에 이미지를 삽입하는 동안 셀의 테두리를 제거하는 방법을 배웁니다.

border-collapse CSS 속성을 사용하여 HTML의 테이블 셀에서 테두리 제거

HTML 테이블을 사용하여 이미지를 삽입할 수 있습니다. 테이블의 요소에 클래스를 할당하고 CSS에서 클래스의 속성을 정의할 수 있습니다. 이 방법은 td 요소의 높이와 너비를 설정하고 background-image 속성을 사용하여 이미지를 삽입하는 데 도움이 됩니다. 따라서 각 td 요소에 이미지를 삽입할 수 있습니다. 이런 식으로 이미지를 삽입하는 동안 테이블에서 각 셀의 테두리를 볼 수 있습니다. 이미지를 더 잘 보이게 하기 위해 셀과 테이블의 테두리를 제거할 수 있습니다. 이를 위해 CSS border-collapse 속성을 사용할 수 있습니다. 속성 값을 collapse로 설정하여 셀 경계가 병합되도록 할 수 있습니다. 이렇게 하면 셀 간격이 0이 됩니다. table 태그에서 border 속성을 사용하지 않으면 테두리가 표시되지 않습니다.

예를 들어 HTML에서 <table> 태그를 작성한 다음 그 안에 <tr> 태그를 작성합니다. <tr> 태그 내부에 세 개의 <td> 태그를 작성하고 첫 번째, 두 번째 및 세 번째 클래스에 left, middle 및 right 클래스를 작성합니다. CSS에서 table 태그를 선택하고 border-collapse 속성을 collapse로 설정합니다. 그런 다음 left, middle, right 세 가지 클래스를 한 번에 모두 선택하고 높이, 너비 및 배경 이미지를 설정합니다.

아래 예에서 세 개의 td 요소를 만들고 해당 요소에 이미지를 삽입했습니다. border-collapse 속성을 사용하여 셀에서 테두리를 제거했습니다. border-collapse 속성을 제거하여 셀 테두리가 이미지를 어떻게 보이게 하는지 확인할 수 있습니다.

예제 코드:

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>

table{
 border-collapse:collapse;
}
.left, .middle, .right
{
 width: 200px;
 height: 280px;
 background-image: url('https://loremflickr.com/212/280'); 
}

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

border 속성을 none으로 설정하여 HTML 테이블에서 테두리를 제거할 수 있습니다. 속성은 다른 border 속성의 약칭입니다. 이러한 다른 속성은 border-width, border-style 및 border-color입니다. border 속성을 사용하고 없음으로 설정하면 테두리가 형성되지 않습니다.

예를 들어 위에서 만든 테이블을 사용할 수 있습니다. border 속성을 사용하여 위의 CSS를 약간 수정하여 목표를 달성할 수 있습니다. 테이블에서 table, tr 및 td 태그를 선택하고 border 속성을 none으로 설정할 수 있습니다. 이런 식으로 HTML에서 테이블의 테두리와 테이블 셀의 테두리를 제거할 수 있습니다.

예제 코드:

table, tr, td{
 border:none;
}

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>