web/css
[css] 7. 테이블 구조 관련 스타일 속성
jeri
2024. 5. 3. 09:22
반응형
1. border | width | height | table-layout | word-break 속성
33_table1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<h1>테이블 관련 스타일 속성</h1>
<hr>
<table>
<tr>
<th>CONSRAINT_VALIDATION</th>
<td>테이블 크기 관련 스타일 속성과 속성값</td>
</tr>
</table>
</body>
</html>
2. border-collapse | text-align 속성
34_table2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
table {
border: 1px solid black;
/* 📊 border-collapse : 외곽선 중첩 관련 스타일 속성 */
/* 속성값 : seperate(기본 - 외곽선 구분) , collapse */
border-collapse: collapse;
}
th, td{
border: 1px solid black;
/* width 속성을 사용하여 모든 셀의 폭을 일정하게 변경 - 테이블의 폭 자동 변경 */
/* => 태그 내용(문장)이 셀의 폭보다 큰 경우 자동 줄바꿈 처리 - 셀의 폭 미변경 */
/* => 태그 내용(이미지)이 셀의 폭보다 큰 경우 셀의 폭 자동 변경 */
/* width: 100px; - 셀마다 다른 폭 주는 것을 권장 */
/* height 속성을 사용하여 모든 셀의 높이를 일정하게 변경 - 테이블의 높이 자동 변경 */
/* => 태그 내용에 의해 셀의 높이 자동 변경 처리 */
height: 30px;
text-align: center;
}
/*셀마다 폭을 다르게 설정 - 한 행의 셀 폭을 변경하며 다른 행에도 적용 */
/* th에만 클래스명 부여하고 적용해도 같은 행(td)끼리 똑같이 변경됨!! */
.num{ width: 50px;}
.name{ width: 100px;}
.address{ width: 250px; text-align: left;}
</style>
</head>
<body>
<h1>테이블 관련 스타일 속성</h1>
<hr>
<table>
<tr><th>번호</th><th>이름</th><th>주소</th></tr>
<tr><td class="num">1000</td><td class="name">홍길동</td><td class="address">서울시 강남구</td></tr>
<tr><td class="num">2000</td><td class="name">임꺽정</td><td class="address">부산시 사하구</td></tr>
<tr><td class="num">3000</td><td class="name">전우치</td><td class="address">광주시 광산구</td></tr>
<tr><td class="num">4000</td><td class="name">일지매</td><td class="address">수원시 팔달구</td></tr>
<tr><td class="num">5000</td><td class="name">장길산</td><td class="address">인천시 월미구</td></tr>
</table>
</body>
</html>
3. border | border-spacing | empty-cells | caption-side 속성
35_table3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<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: 5px;}
.name{ width: 100px;}
.address{ width: 250px;}
caption {
font-size: 1.5em;
letter-spacing: 10px;
/* 📊 caption-side : 표 제목 출력 위치 관련 스타일 속성 */
/* 속성값 : top(기본), bottom, left, right */
caption-side: bottom;
}
</style>
</head>
<body>
<h1>테이블 관련 스타일 속성</h1>
<hr>
<table>
<caption>회원목록</caption>
<tr>
<th class="num">번호</th><th class="name">이름</th><th class="address">주소</th>
</tr>
<tr>
<th>1000</th><th>홍길동</th><th>서울시 강남구 역삼동</th>
</tr>
<tr>
<th>2000</th><th>임꺽정</th><th>서울시 종로구 종로1가</th>
</tr>
<tr>
<!-- <th>3000</th><th>전우치</th><th>서울시 동작구 사당동</th> -->
<th>3000</th><th>전우치</th><th></th>
</tr>
</table>
</body>
</html>
반응형