1. border-collapse
table태그에 border를 사용하게 되면 table과 td사이는 두 줄로 표현된다.
이때 border-collapse속성을 사용하면 표와 표사이의 여백을 없애고 한 줄로 표현해준다.
이 속성은 table태그자리에 선언되어야 한다.[속성값]
- collapse : table과 td사이의 여백을 없애고 border를 한 줄로 합친다.
- separate : 기본값으로 table과 td사이 테두리를 따로 표시한다.2. border-spacing
table태그에 border를 사용하게 되면 table과 td사이의 간격을 지정하는 속성이다.
border-collapse:collapse일땐 사용할 수 없고,
border-spacing도 table태그에 지정해야 한다.
border-spacing의 값을 1개만 쓰면 모두 동일한 간격을 가지고
값을 2개로 나눠 쓰면 첫 번째 자리는 좌우 간격의 자리, 뒤의 자리는 세로 간격의 자리이다.3. empty-cells
표에서 내용이 없는 칸이 있을 때 해당 칸에 있는 border를 보여줄것인지
안보여줄것인지 정하는 속성이다.
마찬가지로 border-collapse:collapse일땐 사용할 수 없다.[속성값]
- show : 내용이 없더라도 빈 셀 주위에 테두리를 표시해준다. 기본값
- hide : 내용이 없는 칸은 테두리를 없앤다.table-layout
컨텐츠에 맞게 셀 넓이를 지정할 수 있다.
셀의 width값을 지정하면 해당 크기에 맞게 화면에 표시된다.
하지만 영문일 경우 여백없이 길게 입력하면 셀의 width값은 무시되고
영문 내용은 한 줄로 길게 표현된다.
만약 width값을 고정하여 칸의 넓이를 적용하려면 table-layout을 사용한다.
table태그에 직접 적용해야 한다.
table-layout을 적용하면 칸의 넓이가 고정되면서
길게 작성된 영문이 옆 칸을 뚫고 나갈 수 있다.
이때에는 word-break속성을 지정하여 칸에 맞춰 영문이 아래로 내려오도록 할 수 있다.
해당 속성도 table태그에 선언한다.[속성값]
- fixed
: 칸에 적용한 width값을 고정한다. 한 줄로 영문이 길게 들어가더라도 무시하지 않는다.
- auto
: 기본값으로 내용이 띄어쓰기없이 영문이 한 줄로 길게 들어가면 width값을 무시한다.
word-break
- break-all : 문자가 칸에 맞춰 아래로 내려온다.
- keep-all : 문자가 칸을 벗어나더라도 유지한다.vertical-align
표를 작성하면 글자는 칸의 세로 중앙에 위치한다.
만약 이 글자들의 정렬을 top/middle/bottom 위치로 보내고 싶다면
vertical-align을 사용한다. 가로로 정렬하려면 text-align을 이용한다.
vertical-align은 table태그안에서만 사용할 수 있다.[속성값]
- baseline : 셀의 글자 기준선에 맞춰 글자의 기준선을 맞춘다.
- top : 패딩이 있을 경우 패딩영역을 제외한 칸의 윗쪽에 글자를 맞춘다.
- bottom : 패딩이 있을 경우 패딩영역을 제외한 칸의 아래쪽에 글자를 맞춘다.
- middle : 기본값으로 칸의 세로 중앙에 글자를 나타낸다.
Hi