[css] <table> 기본 정리

table에는 dafault로 border-collapse: separate 값을 가지고 있다. 이는 table의 각 셀들을 분리시켜 셀들 사이에 공백을 발생시킨다. 이는 border를 지정해주면 명확히 확인 가능하다.

Name	Mobile Number
Mint	010-000-0000
	010-111-1111

table {
   border-collapse: separate;
   border-spacing: 5px;
}
th, td {
   border:1px solid #ccc
}

위의 표를 보면, 각 셀이 떨어져 따로 테두리 선을 그려 마치 이중선처럼 표현이 되는 것을 확인할 수 있다. 셀들 간의 공백은 border-spacing으로 조절 가능한데, 셀들을 붙이기 위해, 0으로 지정하여도, 각 셀에서 테두리선을 그리는 것은 변함이 없기 때문에, 이중선같은 표현을 피할 수 없다.

Name	Mobile Number
Mint	010-000-0000
	010-111-1111

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

이중선을 피해 하나의 테두리선을 그리고 싶을 때엔, separate를 collapse로 변경하면 된다. 이는 셀을 합치는 속성으로, 각 셀이 아닌, 합쳐진 셀에서 선이 그려지기 때문에, 이중선이 발생하지 않는다.

2. table-layout (default : auto)

table {
   table-layout : fixed
}

table은 셀의 너비를 별도로 지정하지 않으면, 각 셀 내용에 따라 셀들의 너비들을 자동으로 분배한다. 문제는 너비 대비 셀이 많거나, 너비 대비 셀의 내용이 많을 때, 또는 몇 셀의 너비를 지정하고 싶을 때 발생한다.

예로, 1000px의 너비를 가진 table 안에 10개의 셀이 존재한다고 가정해보자. 각 셀의 내용 때문에 최소 너비가 100px이 되는데, 맨 앞의 두 셀의 최소 너비를 300px로 지정해버리면, table은 너비 1000px의 값을 무시하고 table을 늘려버리거나, 두 셀의 너비 300px 값을 무시하고 두 셀의 너비를 좁혀버린다. table-layout은 이렇게 제멋대로인 table을 정신교육시켜주는 아주 좋은 속성이다.  

3. <caption> blind 처리

스크린 리더기마다 차이가 있어, 단순히 다룰 수 있는 부분이 아니기 때문에, 별도로 글을 작성하였다.

[CSS3] 웹접근성을 고려한 .blind(hidden) 처리

4. vertical-align 

Name	Mobile Number
Mint	010-000-0000
	010-111-1111

th, td {
   vertical-align: top;
}

각 셀의 내용 높이가 다를 때, vertical-align 속성으로 세로정렬을 지정할 수 있다. vertical-align의 모든 속성을 사용할 수 있는 건 아니고, top, middle, bottom 중에서 선택 가능하다.

5. :nth-child(odd) / :nth-child(even)

Mint	010-000-0000
coding	010-111-1111
Mint	010-000-0000
coding	010-111-1111

table tr:nth-child(odd) { 
   background-color: #eee;
}

짝수행(even) 혹은 홀수행(odd)에 배경 컬러를 주고 싶을 땐, 따로 속성은 없고 위와 같이 홀짝 선택자를 이용해 값을 지정하면 된다.

6 caption-side (default : top)

Name and Mobile Number

Name	Mobile Number
Mint	010-000-0000
	010-111-1111

caption {
  caption-side: bottom;
}

<caption> 태그가 그려지는 위치를 지정하는 속성으로, 값은 top, bottom, inherit, initial 이 있다.

반응형

저작자표시비영리동일조건

'css' 카테고리의 다른 글

[css] 선택자1 - Attribute Selector 속성 선택자  (0)	2021.03.20
[css-real] 웹접근성을 고려한 .blind(hidden) 처리  (0)	2021.01.20
[css] <table> 기본 정리  (0)	2021.01.20
[css-real] 드래그(drag) 막기  (0)	2021.01.11
[css-real] 형광펜으로 표시한 듯 효과주기  (0)	2021.01.10
[css-real]: 한줄, 또는 여러줄의 말줄임(...) 처리 방법1  (0)	2021.01.10