[웹 UI 개발] 표 - 3 / 표의 border 속성

• 표 - 0
• 표 - 1 / 표 접근성
• 표 - 2 / 표와 position

---

테이블 렌더링이 되는 방식과 테이블 레이어를 확인하고 원하는 디자인대로 표를 꾸밀 수 있도록 한다.

 

 

테이블 렌더링

thead, tbody, tfoot로 이루어진 테이블과 셀의 border 컬러를 상하좌우 모두 다르게 설정해서

"border-collapse: separate;" 속성과 "border-collapse: collapse" 속성을 비교해보자.

 

- border-collapse: separate

테이블 요소의 선이 모두 잘 보이는 것을 확인할 수 있다.

separate의 경우 table, thead, tfoot, tbody 순으로 렌더링된다.

 

 

- border-collapse: collapse

table 태그에 적용된 검은색 선과 각 셀의 위쪽 빨간선과 왼쪽 보라선이 없어진 것을 확인할 수 있다.

각 셀이 자신의 왼쪽, 위쪽 셀에 선이 가려지기 때문에 발생하는 현상이다.

테이블 구조와 상관없이 선이 병합되면서 우측 하단부터 좌측 상단으로 렌더링된다.

 

 

테이블 레이어

테이블 레이어는 위 이미지처럼 table < col < tbody <  thead < tr < td < th 순서대로 이루어져 있다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

웹 UI 개발