고정 헤더 영역
상세 컨텐츠
본문
반응형
empty-cells 속성 - 빈 셀의 표시 여부 지정하기
- border-spacing: separate를 사용해 셀들을 분리했을 경우, empty-cells 속성을 사용해 내용이 없는 빈 셀 들의 표시 여부를 지정한다.
empty-cells: show | hide
속성
- show : 빈 셀 주위에 테두리를 그려 빈 셀을 표시한다. 기본 값이다.
- hide : 빈 셀에 테두리를 그리지 않고 비워 둔다.
<html>
<head>
<meta charset="utf-8">
<style>
.table {
border-collapse: separate;
empty-cells: hide;
border: 1px solid #000;
}
<style>
</head>
<body>
<table class="table">
<tr>
<td>과일</td>
<td>사과</td>
<td>바나나</td>
</tr>
<tr>
<td>야채</td>
<td>토마토</td>
<td></td>
</tr>
<tr>
<td>채소</td>
<td>상추</td>
<td></td>
</tr>
</table>
</body>
</html>
width, height 속성 - 표 너비와 높이 지정하기
- 표와 셀의 너비를 지정하지 않으면 셀 안의 내용이 표시될 만큼만 표시된다. 그래서 width와 height 속성을 이용해 넓이와 높이를 지정하면 지정한 크기가 표출된다.
<html>
<head>
<meta charset="utf-8">
<style>
.table1 {
border-collapse: collapse;
border: 1px solid #000;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<td>과일</td>
<td>사과</td>
<td>바나나</td>
</tr>
<tr>
<td>야채</td>
<td>토마토</td>
<td></td>
</tr>
</table>
</body>
</html>
table-layout 속성 - 콘텐츠에 맞게 셀 너비 지정하기
- 영문 내용을 여백 없이 길게 입력할 경우, <td>의 width 속성은 무시되고 영문 내용은 모두 한 줄로 표시된다. 표의 전체 너비에 맞추기 위해 옆에 있는 셀의 너비가 그만큼 줄어든다. 영문도 CSS에서 지정한 width 값을 지켜야 한다. table-layout 속성을 이용하면 셀 안의 내용에 따라 셀 너비를 변하게 할지, 고정 시킬 지 결정할 수 있다.
table-layout: fixed | auto
속성
- fixed : 셀 너비를 고정한다. 셀 내용에 따라 셀의 너비가 달라지지 않는다.
- auto : 셀 내용에 따라 셀의 너비가 달라진다. 기본 값이다.
text-align 속성 - 셀 안에서 수평 정렬하기
- text-align 속성은 셀 안에서 텍스트의 수평 정렬 방법을 지정한다.
text-align: left | right | center
vertical-align 속성 - 셀 안에서 수직 정렬하기
- vertical-align 속성은 수직 정렬 방법을 지정하는 속성이기 때문에 inline이나 inline-block으로 배치한 요소의 새로 정렬 방법을 지정한다.
vertical-align: baseline | top | bottom | middle | sub | super | text-top | text-bottom | <길이 값> | <백분율 값>
속성
- baseline : 인라인 요소의 기준선을 부모 요소와 기준선(baseline)에 맞춘다.
- sub : 인라인 요소의 기준선을 부모 요소와 아래 첨자 위치에 맞춘다.
- super : 인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춘다.
- top : 인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춘다.
- middle : 인라인 요소의 중앙 부분을 부모 요소의 기준선에서 x-높이(소문자 x의 높이 값) 반만큼 올려서 맞춘다.
- bottom : 인라인 요소의 아랫 부분을 부모 요소의 아랫부분을 맞춘다.
- text-top : 인라인 요소의 윗부분을 부모 요소 글꼴의 윗부분에 맞춘다.
- text-bottom : 인라인 요소의 아랫 부분을 부모 요소 글꼴의 아랫부분에 맞춘다.
<html>
<head>
<meta charset="utf-8">
<style>
table { border: 1px solid #000; }
.td1 { vertical-align: top; }
.td2 { vertical-align: middle; }
.td3 { vertical-align: text-top; }
</style>
</head>
<body>
<table>
<tr>
<td class="td1">과일</td>
<td class="td2">사과</td>
<td class="td3">바나나</td>
</tr>
</table>
</body>
</html>반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 연결 선택자 (0) | 2021.05.11 |
|---|---|
| [HTML5] 시맨틱 태그 (0) | 2021.05.10 |
| [CSS 기초] 표 스타일 (1) (0) | 2021.05.06 |
| [CSS 기초] 다단으로 편집하기 (0) | 2021.05.03 |
| [CSS 기초] CSS 포지셔닝과 주요 속성들 (0) | 2021.05.01 |
댓글 영역