HTML table

border-collapse 속성

테이블 전체의 테두리와 각 셀의 테두리가 겹쳐 의도치 않은 두 개의 테두리가 생길 때 쓰이는 유용한 속성인 border-collapse, 값을 collapse를 해두면 테두리 겹침 현상을 해결할 수 있다.

 

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

 

border-spacing 속성

셀 사이에 여백을 주고 싶을 때 사용하는 속성이다. 테이블의 테두리가 겹쳐져 있다면 (has collapsed border) 적용되지 않는다. border-spacing 속성은 테이블에 적용한다.

 

table {
  border-spacing: 5px;
} 

 

colspan,rowspan 속성

셀이 하나 이상의 열/행을 차지하고 싶을 때 사용한다. 각 속성은 해당 셀에 적용한다.

 

caption 태그

테이블의 제목이나 부연설명을 달고 싶을 때 캡션 태그를 사용한다. 캡션 태그는 테이블 시작 태그 바로 밑에 선언한다.