[CSS] table 표에 사용하는 css 속성

border-collapse	table태그와 td또는 th 사이에 있는 두 줄을 한 줄로 합쳐줌
border-spacing	table태그에 적용된 border와 th,td에 적용된 border 사이의 간격을 조절
empty-cells	내용이 없는 빈 칸을 나타낼지 숨길지를 정함
table-layout	컨텐츠에 맞게 셀 넓이를 (고정)지정할 수 있다 / table-layout: fixed -> 셀 넓이를 고정
word-break	table-layout을 적용했을 때 문장이 너무 길어서 표를 뚫고 나오는 경우 칸에 맞춰 문장을 아랫줄로 정렬  word-break: break-all
vertical-align	칸에서 글자를 top, middle, bottom 부분에 맞춰 정렬

 border-collapse이외에는 잘 사용되지 않는다. 

---

 < 표에 사용하는 다양한 css 속성 >

 

1. border-collapse
:  table태그와 td또는 th 사이에 있는 두 줄을 한 줄로 합쳐주는 속성.

해당 속성은 table태그에 직접 적용해야한다. 
    - collapse : 떨어져있는 두 줄을 한 줄로 합쳐줌 ex) border-collapse: collapse;
    - separate : 기본값으로 table과 th또는 td의 줄이 나눠져 표현됨.

collapse 적용된 결과

 

 

2. border-spacing
: table태그에 적용된 border와 th,td에 적용된 border 사이의 간격을 조절하는 속성. 해당 속성은 table태그에 직접 적용해야한다. * border-collapse:collapse; 인 상태에서는 적용할 수 없음 *
값은 숫자px 로 적용함

ex) border-spacing: 40px 20px;

앞자리는 가로 간격 뒷자리는 세로 간격

 

3. empty-cells
: 내용이 없는 빈 칸을 나타낼지 숨길지를 정함. 기본값은 내용이 없더라도 칸을 표현한다.

* border collapse:collapse; 인 상태에서는 적용할 수 없음
    [속성값]
    -show : 기본값으로 내용이 없어도 칸을 표현함
    -hide : 내용이 없는 빈 칸을 모두 숨김

 

empty-cells: hide;

 

4. table-layout
: 컨텐츠에 맞게 셀 넓이를 (고정)지정할 수 있다. 셀에 width 값을 지정하면 해당 크기에 맞게 화면에 표시됨.
하지만 영문일 경우 여백 없이 길게 입력하면 셀에 width 값은 무시되고 영문내용이 한줄로 표시됨.
이런 경우 table-layout을 이용한다.* table 태그에 직접 적용함. 

    [속성값]
    - fixed : 셀 넓이를 고정하여 내용에 따라 셀 넓이가 달라지지 않게 한다. 
    - auto : 기본값이고 셀의 내용에 따라 넓이가 달라짐. 

table-layout과 word-break을 같이 써주면 셀 크기는 고정되면서 글자가 칸에 맞춰서 들어간다. 

word-break: break-all; 긴 문장을 칸에 맞춰 줄바꿈 한다. 

 

 

5. word-break
 : table-layout을 적용했을 때 문장이 너무 길어서 표를 뚫고 나오는 경우 칸에 맞춰 문장을 아랫줄로 정렬해주는 속성.

(띄어쓰기조차 없을때 뚫고 나오게 된다.)
    [속성값]
    - break-all: 칸에 맞춰 문장을 아랫줄로 정렬함.
    - keep-all : 기본값으로 문장이 table 영역을 벗어나더라도 그대로 보여줌.

 

 

6. vertical-align
: 칸에서 글자를 top, middle, bottom 부분에 맞춰 정렬함. (패딩영역 제외)
    left/center/right 부분으로 정렬할때에는 text-align 속성으로 정렬함
    [속성값]
    -baseline : 셀의 기준선에 내용의 기준선을 맞춤
    -top : 셀의 윗부분에 정렬됨.
    -middle : 기본값으로 셀의 세로 중앙에 글자가 정렬됨.
    -bottom : 셀의 아랫부분에 정렬됨. 

 

 

패딩을 넣어놔서 패딩부분을 제외한 채 top middle bottom 위치에 위치한 것을 볼 수 있다.