1. border 속성 : 표 테두리 스타일 결정하기
border : <선 굵기> <선 스타일> <선 색상>
table 태그 내에서 border 을 주게 되면 표의 테두리와 셀의 테두리 모두 한 번에 지정할 수 있지만,
css 상에서 border 값을 줄 때에는 표의 테두리와 셀의 테두리를 각각 지정해 주어야 한다.
<style>
table {
width: 500px;
height: 300px;
border: 4px solid darksalmon;
}
table td {
border: 4px dotted darkorchid;
}
</style>
</head>
<body>
<table>
<tr>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td>셀4</td>
</tr>
</table>
</body>
2. border-collapse 속성 : 테두리 통합, 분리하기
border-collapse : collapse | separate
앞서 살펴본 것처럼 표의 테두리와 셀의 테두리 간의 차이가 있기 때문에 이 간극을 조정하기 위하여
border-collapse 속성을 사용할 수 있다.
위의 예시의 테두리를 합쳐보자.
<style>
table {
width: 500px;
height: 300px;
border: 4px solid darksalmon;
border-collapse: collapse;
}
table td {
border: 4px dotted darkorchid;
}
</style>
</head>
<body>
<table>
<tr>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td>셀4</td>
</tr>
</table>
</body>
셀의 테두리는 안쪽에서의 구분만을 위해 남겨진 것을 확인할 수 있다.
3. border-spacing 속성 : 인접한 셀 테두리 사이 거리 지정하기
border-spacing : <크기> <크기>
border-spacing 속성은 border-collapse 속성이 separate 속성 값으로 되어 있을 때 지정할 수 있는 값으로
서로 인접해 있는 셀 간의 간격을 지정할 수 있다.
크기가 하나만 지정되었을 경우에는 수평 거리와 수직 거리 모두 같은 크기만큼 벌어지게 되는 것이고,
크기가 두 개 지정되었을 경우에는 수평 거리와 수직 거리를 각각 지정할 수 있게 된다.
<style>
table {
width: 500px;
height: 300px;
border: 4px solid darksalmon;
border-spacing: 20px 10px;
}
table td {
border: 4px dotted darkorchid;
}
</style>
</head>
<body>
<table>
<tr>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td>셀4</td>
</tr>
</table>
</body>
4. empty-cells 속성 : 빈 셀의 표시 여부 지정하기
empty-cells : show | hide
기본 값은 show 로 셀 내용이 비어있어도 해당되는 칸을 보이도록 한 것이다.
<style>
table {
width: 500px;
height: 300px;
border: 4px solid darksalmon;
border-spacing: 20px 10px;
}
table td {
border: 4px dotted darkorchid;
}
</style>
</head>
<body>
<table>
<tr>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td></td>
</tr>
</table>
</body>
기본 값 show 상태에서는 셀 내용이 사라졌어도 셀을 보여주는 것을 확인할 수 있다.
이번에는 hide 로 상태 값을 변경해 보도록 하겠다.
<style>
table {
width: 500px;
height: 300px;
border: 4px solid darksalmon;
border-spacing: 20px 10px;
empty-cells: hide;
}
table td {
border: 4px dotted darkorchid;
}
</style>
</head>
<body>
<table>
<tr>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td></td>
</tr>
</table>
</body>
5. table-layout 속성 : 콘텐츠에 맞게 셀 너비 지정하기
table-layout : fixed | auto
기본 값은 auto 로 셀 내용에 따라 너비가 달라진다.
먼저 기본 값일 때의 표 모양을 살펴보자.
<style>
table {
width: 300px;
}
td {
width: 150px;
border: 4px solid royalblue;
padding: 10px;
}
</style>
</head>
<body>
<h1>Table Layout</h1>
<table>
<tr>
<td>한글로띄어쓰기없이길게붙여쓰기</td>
<td>LONG_DESCRIPTION_WITHOUT_SPACE</td>
</tr>
</table>
</body>
이 상태가 auto 속성 값으로 셀의 내용에 따라 모양이 다른 것을 확인할 수 있다.
이번엔 fixed 속성 값을 지정해보자.
<style>
table {
width: 300px;
table-layout: fixed;
}
td {
width: 150px;
border: 4px solid royalblue;
padding: 10px;
}
</style>
</head>
<body>
<h1>Table Layout</h1>
<table>
<tr>
<td>한글로띄어쓰기없이길게붙여쓰기</td>
<td>LONG_DESCRIPTION_WITHOUT_SPACE</td>
</tr>
</table>
</body>
이번에는 표 모양은 유지되는 것을 확인할 수 있다.
하지만 문제가 발생했다.
한글의 경우 띄어쓰기 없이 입력하더라도 표의 지정된 크기에 따라 자동으로 줄바꿈이 되었지만,
영어는 셀의 지정된 영역을 벗어나버렸다.
이러한 경우 사용할 수 있는 속성이 바로 word-break 속성이다.
<style>
table {
width: 300px;
table-layout: fixed;
}
td {
width: 150px;
border: 4px solid royalblue;
padding: 10px;
word-break: break-all;
}
</style>
</head>
<body>
<h1>Table Layout</h1>
<table>
<tr>
<td>한글로띄어쓰기없이길게붙여쓰기</td>
<td>LONG_DESCRIPTION_WITHOUT_SPACE</td>
</tr>
</table>
</body>
word-break 속성을 통해 영문도 셀의 크기에 맞춰 줄바꿈이 된 것을 확인할 수 있다.
6. vertical-align 속성 : 셀 안에서 수직 정렬하기
vertical-align : baseline | top | bottom | middle | sub | super | text-top | text-bottom | <길이 값> | <백분율>
기본 값은 baseline 으로 셀의 기준선에 내용의 기준선을 맞추게 된다.
<style>
table {
width: 300px;
height: 500px;
table-layout: fixed;
}
td {
width: 150px;
border: 4px solid royalblue;
padding: 10px;
}
.vertical1 {
vertical-align: top;
}
.vertical2 {
vertical-align: bottom;
}
.vertical3 {
vertical-align: middle;
}
</style>
</head>
<body>
<h1>Table Layout</h1>
<table>
<tr>
<td class="vertical1">수직 정렬하기</td>
<td class="vertical2">수직 정렬하기</td>
</tr>
<tr>
<td class="vertical3">수직 정렬하기</td>
<td class="vertical4">수직 정렬하기</td>
</tr>
</table>
</body>
'CSS' 카테고리의 다른 글
| combination selector : 연결 선택자 (0) | 2022.10.26 |
|---|---|
| HTML5 시멘틱 태그 (0) | 2022.10.24 |
| z-index 속성 (0) | 2022.10.24 |
| position 속성 (0) | 2022.10.24 |
| float, clear 속성 (0) | 2022.10.21 |
