표에 사용하는 다양한 css속성
1.border-collapse
:table태그와 td 또는 th사이에 있는 두 줄을 한 줄로 합쳐주는 속성.
해당 속성은 table태그에 직접 적용해야 함.
-collapse : 떨어져 있는 두 줄을 한줄로 합쳐줌.
-separate : 기본값으로 table과 td 또는 th의 줄이 나눠져 표현됨.
collapse를 적용하면 위의 이미지와 같이 두 줄이였던 부분이 한 줄로 합쳐진다.
2.border-spacing
:table태그에 적용된 border와 th,td에 적용된 border사이의 간격을 조절하는 속성.
border-collapse:collapse 인상태에서 적용할 수 없음. 같은 숫자 px로 적용함.
3.empty-cells
:내용이 없는 빈 칸을 나타낼지 숨길지를 지정함. 기본값은 내용이 없더라도 칸을 표현함.
[속성값]
-show: 기본값으로 내용이 없어도 칸을 표현함.
-hide: 내용이 없는 빈 칸을 모두 숨김.
4.table-layout
:컨텐츠에 맞게 셀 넓이를 지정할 수 있다. 셀에 width값을 지정하면
해당 크기에 맞게 화면에 표시됨.
하지만 영문일 경우 여백없이 길게 입력하면 셀의 width값은 무시되고 영문 내용이 한줄로
표시됨. 이런 경우 table-layout을 이용함.
[속성값]
-fixed : 셀 넓이를 고정하여 내용에 따라 셀 넓이가 달라지지 않게 함.
-auto : 기본값이고 셀의 내용에 따라 넓이가 달라짐.
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 : 셀의 아랫부분에 정렬됨.
표의 구조를 나타내는 태그
웹사이트의 레이아웃을 짜면 구성을 한눈에 볼 수있는것처럼 표의 구조를 나눠주면 표를 쉽게 파악할 수있다.
표는 thead,tbody,tfoot으로 나눌 수 있는데
thead
표의 최상단에 위치하고 보통 제목영역을 나타낸다.
tbody
표 제목에 따른 내용들을 나타내는 영역이다.
tfoot
표 내용에 따른 요약내용을 나타내는 영역이다.( 필수는 아님. )
세로 줄을 동일하게 스타일링하는 태그
한 열(세로 줄)에 있는 모든 셀에 같은 스타일을 적용하고자 할때 colgroup,col/태그를 사용한다.
둘 이상의 열을 묶어 같은 스타일을 지정하려면 span속성을 이용해
col span="2"/형식으로 설정할 수 있다. 그러면 같이 묶인 두 열에 동일한 스타일링을
할 수 있다. colgroup은 col들을 묶어주는 부모영역의 역할을 한다.
col의 개수는 칸의 개수와 동일해야 한다.
colgroup 태그
한 열에 있는 모든 셀에 같은 스타일을 적용해주는 태그.
이때 col/의 개수는 만드려는 세로 칸의 갯수와 동일해야한다.
colspan 태그
둘 이상의 열을 묶어 같은 스타일을 지정하려면 span속성을 이용해
col span="2"/형식으로 설정할 수 있다.
= 두개에 모두 같은 스타일링을 적용할 수 있다.
