CSS - table의 속성

테이블의 속성

table {
	/* 테이블 외곽선 출력 */
	border: 1px solid red;
	
	/* 셀의 폭은 태그내용에 의해 자동 변경되며 모든 셀 폭의 합계가 테이블의 폭으로 설정 */
	
	/* width 속성을 사용하여 테이블의 폭 변경 가능 */
	/* => 변경될 테이블의 폭이 모든 셀의 폭 합계보다 작은 경우에는 테이블 폭 변경 처리 */
	/* => 셀의 폭은 태그내용에 의해 순차적으로 자동 변경 */
	/* => 태그내용이 셀의 폭보다 큰 경우 자동 줄바꿈 처리되어 출력 */
	width: 300px;
	
	/* height 속성을 사용하여 테이블의 높이 변경 가능 */
	/* => 변경될 테이블의 높이가 모든 셀의 높이 합계보다 작은 경우 테이블의 높이 미변경 */
	/* => 셀의 높이는 태그내용에 의해 자동 변경 */
	height: 50px;
	
	/* table-layout : 테이블 구존 관련 스타일 속성 */
	/* 속성값 : auto(기본 - 셀의 폭과 높이 자동 설정), fixed(셀의 폭과 높이 고정) */
	/* => fixed 속성값을 사용한 경우 테이블의 폭을 변경하면 모든 셀의 폭이 동일하게 설정 */
	table-layout: fixed;
	
	/* word-break : 셀의 폭보다 긴 단어에 대한 처리 관련 스타일 속성 */
	/* 속성값 : keep-all(기본 - 단어가 셀을 벗어나도록 출력)
		, break-all(단어가 셀을 벗어나지 않도록 자동 줄바꿈 처리하여 출력) */
	word-break: break-all;
}

th, td {
	/* 열(셀 - Cell) 외곽선 출력 - 행(Row)은 외곽선 출력 불가능 */
	border: 1px solid green;
}
	cellspacing : 셀 간의 간격 
	cellpadding : 셀과 글자 사이의 간격

테이블 행의 속성

<style type="text/css">
table {
	border: 1px solid black;
	
	/* border-collapse : 외곽선 중첩 관련 스타일 속성 */
	/* 속성값 : separate(기본 - 외곽선 구분), collapse(외곽선 병합)  */
	border-collapse: collapse ;
}

th, td {
	border: 1px solid black;
	
	/* width 속성을 사용하여 모든 셀의 폭을 일정하게 변경 - 테이블의 폭 자동 변경 */
	/* => 태그내용(문장)이 셀의 폭보다 큰 경우 자동 줄바꿈 처리 - 셀의 폭 미변경 */
	/* => 태그내용(이미지)이 셀의 폭보다 큰 경우 셀의 폭 자동 변경 */
	/* width: 100px; */
	
	/* height 속성을 사용하여 모든 셀의 높이를 일정하게 변경 - 테이블의 높이 자동 변경 */
	/* => 태그내용에 의해 셀의 높이 자동 변경 처리 */
	height: 30px;
	text-align: center;
}

/* 셀마다 폭을 다르게 설정 - 한 행의 샐 폭을 변경하면 다른 행에도 적용  */
.num { width: 50px; }
.name { width: 100px; }
.address { 
	width: 250px;
	text-align: left; 
}
</style>

테이블의 명암과 출력 내용이 없는 셀 처리

<style type="text/css">
table {
	/* margin 속성값으로 auto를 설정한 경우 라인(줄)의 가운데에 박스모델 배치 - 박스모델의 폭 변경 */
	margin: 0 auto;
	
	/* border 속성값으로 inset 또는 outset을 설정하면 외곽선 명암 효과 제공  */
	border: 3px outset;
	
	/* border-spacing : 외곽선 간격 관련 스타일 속성 - 속성값 단위 : px, % */
	border-spacing: 10px;
}

th, td {
	height: 30px;
	padding: 5px;
	text-align: center;
	border: 3px outset;
	
	/* empty-cells : 셀의 출력될 내용이 없는 경우에 대한 처리 관련 스타일 속성 */
	/* 속성값 : show(기본 - 셀 출력), hide(셀 미출력) */
	empty-cells: hide;
}

.num { width: 50px; }
.name { width: 100px; }
.address { width: 250px; }

caption {
	font-size: 1.5em;
	letter-spacing: 10px;
	
	/* caption-side : 표 제목 출력 위치 관련 스타일 속성 */
	/* 속성값 : top(기본), bottom, left, right */
	caption-side: bottom;	
}
</style>