🐧테이블 관련 스타일 속성-1
◈ 테이블 외곽선 출력
◈ 열(셀- Cell) 외곽선 출력 - 행(Row)은 외곽선 출력 불가능
◈ 셀의 폭은 태그내용에 의해 자동 변경되며 모든 셀 폭의 합계가 테이블의 폭으로 설정
◈ width 속성을 사용하여 테이블의 폭 변경
→ 변경될 테이블의 폭이 모든 셀의 폭 합계보다 작은 경우 테이블 폭 변경 처리
→ 셀의 폭은 태그내용에 의해 순차적으로 자동 변경
→ 태그내용이 셀의 폭보다 큰 경우 자동 줄바꿈 처리되어 출력width: 300px;
◈ height 속성을 사용하여 테이블의 높이 변경 가능
→ 변경될 테이블의 높이가 모든 셀의 높이 합계보다 작은 경우 테이블의 높이 미변경
→ 셀의 높이는 태그내용에 의해 자동 변경height: 50px;
◈ table-layout : 테이블 구조 관련 스타일 속성
◈ 속성값 : auto(기본 - 셀의 폭과 높이 자동 설정), fixed(셀의 폭과 높이 고정)
→ fixed 속성값을 사용한 경우 테이블의 폭을 변경하면 모든 셀의 폭이 동일하게 설정table-layout: fixed;
◈ word-break : 셀의 폭보다 긴 단어에 대한 처리 관련 스타일 속성
◈ 속성값 : keep-all(기본 - 단어가 셀을 벗어나 출력), break-all(단어가 셀을 벗어나지 않도록 자동 줄바꿈 처리하여 출력)word-break: break-all;
📃33_table1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> table { /* 테이블 외곽선 출력 */ border: 1px solid red; } th, td { /* 열(셀- Cell) 외곽선 출력 - 행(Row)은 외곽선 출력 불가능 */ border: 1px solid green; /* 셀의 폭은 태그내용에 의해 자동 변경되며 모든 셀 폭의 합계가 테이블의 폭으로 설정 */ /* width 속성을 사용하여 테이블의 폭 변경 */ /* → 변경될 테이블의 폭이 모든 셀의 폭 합계보다 작은 경우 테이블 폭 변경 처리 */ /* → 셀의 폭은 태그내용에 의해 순차적으로 자동 변경 */ /* → 태그내용이 셀의 폭보다 큰 경우 자동 줄바꿈 처리되어 출력 */ width: 300px; /* height 속성을 사용하여 테이블의 높이 변경 가능 */ /* → 변경될 테이블의 높이가 모든 셀의 높이 합계보다 작은 경우 테이블의 높이 미변경 */ /* → 셀의 높이는 태그내용에 의해 자동 변경 */ height: 50px; /* table-layout : 테이블 구조 관련 스타일 속성 */ /* 속성값 : auto(기본 - 셀의 폭과 높이 자동 설정), fixed(셀의 폭과 높이 고정) */ /* → fixed 속성값을 사용한 경우 테이블의 폭을 변경하면 모든 셀의 폭이 동일하게 설정 */ table-layout: fixed; /* word-break : 셀의 폭보다 긴 단어에 대한 처리 관련 스타일 속성 */ /* 속성값 : keep-all(기본 - 단어가 셀을 벗어나 출력), break-all(단어가 셀을 벗어나지 않도록 자동 줄바꿈 처리하여 출력) */ word-break: break-all; } </style> </head> <body> <h1>테이블 관련 스타일 속성</h1> <hr> <table> <tr> <th>CONSRAINT_VALIDATION</th> <td>테이블 크기 관련 스타일 속성과 속성값</td> </tr> </table> </body> </html>
🐧테이블 관련 스타일 속성-2
🎨border-collapse : 외곽선 중첩 관련 스타일 속성
📌border-collapse : 외곽선 중첩 관련 스타일 속성
◈ 속성값 : separate(기본 - 외곽선 구분), collapese(외곽선 병합)
border-collapse: collapse;
◈ width 속성을 사용하여 모든 셀의 폭을 일정하게 변경 - 테이블의 폭 자동 변경
→ 태그내용(문장)이 셀의 폭보다 큰 경우 자동 줄바꿈 처리 - 셀의 폭 미변경
→ 태그내용(이미지)이 셀의 폭보다 큰 경우 셀의 폭 자동 변경width: 100px;
◈ height 속성을 사용하여 모든 셀의 높이를 일정하게 변경 - 테이블의 높이 자동 변경
→ 태그내용에 의해 셀의 높이 자동 변경 처리height: 30px; text-align: center;
◈ 셀마다 폭을 다르게 설정 - 한 행의 샐 폭을 변경하면 다른 행에도 적용
.num { width: 50px; } .name { width: 100px; } .address { width: 250px; text-align: left; }
📃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 : 외곽선 중첩 관련 스타일 속성 */ /* 속성값 : separate(기본 - 외곽선 구분), collapese(외곽선 병합) */ 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> </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
📌margin 속성값으로 auto를 설정한 경우 라인(줄)의 가운데에 박스모델 배치
margin: 0 auto;
📌border 속성값으로 inset 또는 outset을 설정하면 외곽선 명암 효과 제공
border: 3px outset;
📌border-spacing : 외곽선 간격 관련 스타일 속성 - 속성값 단위 : px, %
border-spacing: 10px;
border: 3px inset;
📌empty-cells : 셀의 출력될 내용이 없는 경우에 대한 처리 관련 스타일 속성
◈ 속성값 : show(기본 - 셀 출력), hide(셀 미출력)
empty-cells: hide;
📌caption-side : 표 제목 출력 위치 관련 스타일 속성
◈ 속성값 : top(기본), bottom, left, right
caption-side: bottom;
📃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; /* border: 3px inset; */ /* 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> </head> <body> <h1>테이블 관련 스타일 속성</h1> <hr> <table> <caption>회원목록</caption> <tr> <th class="num">번호</th><th class="name">이름</th><th class="address">주소</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">서울시 종로구 종로1가</td> </tr> <tr> <!-- <td>3000</td><td>전우치</td><td>서울시 동작구 사당동</td> --> <td>3000</td><td>전우치</td><td></td> </tr> </table> </body> </html>
