상세 컨텐츠

본문 제목

[개미의 걸음 HTML&CSS 16차시] 테이블 관련 스타일

HTML

by IT개미 데이터 2020. 8. 16. 23:23

본문

728x90

테이블 관련 속성

caption-side 테이블 제목 위치를 설정할 때 사용하는 속성
border 테이블 테두리 스타일을 설정할 때 사용하는 속성
border-collapse 테이블 테두리를 통합*분리할 때 사용하는 속성
border-spacing 인접한 셀 테두리 사이의 거리를 설정할 때 사용하는 속성
px, em 등의 단위를 사용하여 지정[값이 두개인 경우 처음이 수평거리 값, 두번째가 수직거리 값]
empty-cells 빈 셀의 표시 여부를 설정할 때 사용하는 속성
width, height 표 너비와 높이를 설정할 때 사용하는 속성
table-layout 콘텐츠에 맞게 셀 너비 지정할 때 사용하는 속성
text-align 셀 안의 텍스트의 수평 정렬 방법을 설정할 때 사용하는 속성
left,  center,  right  
vertical-align 셀 안에서 수직 정렬할 때 사용하는 속성

 

① caption-side

테이블 제목 위치를 설정할 때 사용하는 속성

속성 값 설    명
top 캡션을 테이블의 윗부분에 표시[기본값]
bottom 캡션을 표의 아랫부분에 표시

 

 

② border-collapse 속성

테이블 테두리를 통합*분리할 때 사용하는 속성

속성 값 설    명
separate 표의 바깥 테두리와 셀의 각 테두리를 따로 표시[기본값]
collapse 표의 바깥 테두리와 셀의 각 테두리를 하나로 합쳐서 표시

 

 

③ empty-cells

빈 셀의 표시 여부를 설정할 때 사용하는 속성

속성 값 설    명
show 빈 셀 주위에 테두리를 그려 빈 셀을 표시
hide 빈 셀 주위에 테두리를 그리지 않고 비워둠

 

 

④ table-layout

콘텐츠에 맞게 셀 너비 지정하기

속성 값 설    명
auto 셀 내용에 따라 셀의 너비가 달라짐[기본값]
fixed 셀 내용에 따라 셀의 너비가 달라지지 않음, 셀 너비 고정

 

 

③ empty-cells 속성

빈 셀의 표시 여부를 설정할 때 사용하는 속성

속성 값 설    명
show 빈 셀 주위에 테두리를 그려 빈 셀을 표시
hide 빈 셀 주위에 테두리를 그리지 않고 비워둠

 

 

④ Vertical-align 속성

빈 셀의 표시 여부를 설정할 때 사용하는 속성

속성 값 설    명
sub 인라인 요소의 기준선을 부모 요소의 아래첨자 위치에 맞춤
super 인라인 요소의 기준선을 부모 요소의 위첨자 위치에 맞춤
baseline 인라인 요소의 기준선을 부모 요소의 기준선에 맞춤
표의 셀에서 사용할 경우 셀의 기준선에 내용의 기준선을 맞춤
top 인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춤
표의 셀에서 사용할 경우 패딩의 위쪽 가장자리에 내용의 윗부분을 맞춤
middle 인라인 요소의 중앙 부분을 부모 요소의 기준선에서 x-높이(소문자 x의 높이 값)의 반만큼 올려서 맞춤
표의 셀에서 사용할 경우 패딩 박스의 중앙에 내용을 맞춤
bottom 인라인 요소의 아랫부분을 부모 요소의 아랫부분에 맞춤
표의 셀에서 사용할 경우 패딩의 아래쪽 가장자리에 내용의 아래부분을 맞춤
text-top 인라인 요소의 윗부분을 부모 요소 글꼴의 윗부분에 맞춤
text-bottom 인라인 요소의 아래부분을 부모 요소 글꼴의 아래부분에 맞춤
길이 값 기준선을 0px로 생각하고 길이값이 양수면 기준선 위로, 음수면 기준선 아래로 지정한 크기만큼 옮김 
백분율 값 기준선을 0%로 생각학 line-height의 몇 %인지에 따라 양수면 위로, 음수면 아래로 옮김

 

 

 

 

 

bootstrap을 활용한 테이블 꾸미기

<head>태그 안에 bootstrap을 활용하기 위한 태그들을 집어넣으면 좀 더 쉽게 table을 꾸밀 수 있음

bootstrap source

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

 

 

 

728x90

'HTML' 카테고리의 다른 글

[개미의 걸음 HTML&CSS 18차시] CSS 레이아웃(배치 및 다단 설정)  (0) 2020.08.18
[개미의 걸음 HTML&CSS 17차시] 박스모델 관련 스타일  (0) 2020.08.17
[개미의 걸음 HTML&CSS 15차시] 목록 관련 스타일  (0) 2020.08.15
[개미의 걸음 HTML&CSS 14차시] 텍스트 관련 스타일  (0) 2020.08.14
[개미의 걸음 HTML&CSS 13차시] 배경 관련 스타일(색상, 이미지, 그라데이션)  (0) 2020.08.13

관련글 더보기

댓글 영역

티스토리툴바