프로그래밍/CSS

06.26(table)

Gooding 2020. 6. 26. 21:56
728x90
반응형

CSS table 속성

 

border

 border-collapse

border-spacing

caption-side

empty-cells

table-layout


table 속성

속성 설명
border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음
border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정
border-spacing 테이블 요소(th, td)간의 여백을 설정
caption-side 테이블의 캡션(caption)을 설정
empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정
table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정

 

border 

 

테이블의 테두리(border)를 설정

이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가짐

 

 

border-collapse

 

border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현

이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 테이블 요소별 테두리를 모두 표현

 

 

border-spacing

 

border-spacing 속성은 테이블 요소(th, td)간의 여백을 설정

 

 

text-align

 

테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬을 설정

<th>태그 내부는 가운데 정렬이, <td>태그 내부는 왼쪽 정렬이 기본 설정

 

 

vertical-align

 

vertical-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬을 설정

<th>태그와 <td>태그 모두 가운데 정렬이 기본 설정

 

 

반응형

'프로그래밍 > CSS' 카테고리의 다른 글

06.30(transition)  (0) 2020.06.30
06.29(transform)  (0) 2020.06.29
06.25(position)  (0) 2020.06.25
06.24(display & 화면에서 요소 감추기)  (0) 2020.06.24
06.23(background)  (0) 2020.06.23