테이블 테두리 두 개가 나와요
간단한 내용으로, 테이블로 만들어진 자료가 있길래 가져와서 넣었습니다. 그런데 테이블 테두리가 두 개로 나오네요.
포스팅에는 도표를 넣을 때 가능하면 이미지보다는 태그를 이용해서 넣습니다. 그리고 대부분은 가로 스크롤을 넣고 있기에 웬만하면 다시 정리하고 있는데, 이번 도표는 작아서 모바일 화면에서도 잘 나오겠더군요. 그래서 그대로 적용했는데, 테이블이 제대로 나올 것인지에만 신경 쓰다 보니 테이블 테두리가 두 개가 나오는 것에는 깜박했습니다.
내용을 보겠습니다.
구분 | 상한액 | 하한액 |
---|---|---|
가 | - | 43,189 |
나 | 53,696 | 35,778 |
다 | 43,884 | 31,167 |
라 | 38,501 | 27,462 |
마 | 33,898 | - |
<table style="text-align: center;" border="1" width="350" data-ke-align="alignLeft">
간단하게 <table border=1>로 넣고 결과를 보니 테이블 테두리가 두 개로 나오네요.
이런, 지금은 태그를 자세하게 살피지 않는 편입니다. HTML로 만들어 주는 사이트가 있어 아주 유용하게 사용하고 있어 조금만 바뀌면 일일이 태그를 수정하기보다는 엑셀 또는 한글 등에 도표를 몽땅 복사해서 새로운 태그 코드를 얻고 있죠. 세세한 것 살펴보는 실력이 쇠퇴한다고 할 수 있지만, 이제는 이런 간단한 것은 기계에 맡기고 있습니다.
테두리가 두 개로 나오는 것은 딱 하나의 코드가 빠졌는데요,
구분 | 상한액 | 하한액 |
---|---|---|
가 | - | 43,189 |
나 | 53,696 | 35,778 |
다 | 43,884 | 31,167 |
라 | 38,501 | 27,462 |
마 | 33,898 | - |
<table style="text-align: center; border-collapse: collapse;" border="1" width="350" data-ke-align="alignLeft">
여기에 추가된 것은 border-collapse: collapse; 입니다.
border-collapse: collapse;은 CSS 속성으로, 테이블의 테두리 겹침 방식을 설정하는 속성입니다. 이 속성을 사용하면 인접한 셀들의 테두리를 하나로 합쳐 하나의 깔끔한 테두리를 만듭니다.
기본적으로 HTML 테이블은 border-collapse: separate; 로 설정되어 있어 각 셀에 개별적인 테두리가 적용됩니다. 그래서 테두리가 하나로 만들기 위해서는 반드시 border-collapse: collapse; 이 코드를 넣어야 합니다.
간단한 건데요, 깜빡깜빡했습니다.