2022. 9. 14. 19:48ㆍjsp/css
이번의 목표
01. caption-side를 이용하여 테이블에 제목을 달아보자
02. empty-cell 을 이용하여 빈 셀을 공백으로 만들어보자
<table>태그에는 <caption>를 사용하여 제목을 달아줄 수 있습니다.
이때 기본값은 항상 테이블의 상단에 위치하도록 되어있습니다.
위치를 변경하기 위해서는 caption-side 를 사용하면 됩니다.
top, bottom, left, right 로 위치 변경이 가능합니다.
그리고 다음으로 알아볼 것은 empty-cells 입니다.
테이블을 만들때에 필요에 의해서 빈칸을 만들어야 하는 경우가 있습니다.
그런 경우에는 보통 <td/> 또는 <td></td> 를 이용하여 바로 태그를 닫는데 이렇게 되면 <td>에 걸어둔 스타일이 적용되어 빈칸에 적용된 스타일만 덩그러니 나타나게 됩니다.
이를 아예 공백으로 만들기 위해서 empty-cell을 사용할 수 있습니다.
empty-cells:show; 는 디폴트 값으로 입력하지 않았을 때의 상태와 동일합니다.
empty-cells:hide; 는 빈셀은 공백으로 만들어줍니다. 때문에 <style>에서 td에 일괄적으로 스타일을 적용했을 때에도 빈칸은 공백으로 출력이 됩니다.
01. jsp 코드
02. 실행 화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex23</title>
<style type="text/css">
td, th { border: 1px solid;}
#tb1{
border: 1px solid blue;
width: 300px;
}
#tb2{
border: 1px solid red;
width: 300px;
caption-side: bottom; /* 제목을 배치할 위치 설정. 디폴트는 top*/
empty-cells: hide; /* 값이 없는 셀은 숨긴다. 디폴트는 show */
}
</style>
</head>
<body>
<h3>empty-cells , caption-side 디폴트 일때</h3>
<table id="tb1">
<tr>
<th>학교</th> <th>이름</th><th>국가</th>
</tr>
<tr>
<td>한국대</td> <td>한국인</td><td>대한민국</td>
</tr>
<tr>
<td>대한대</td><td>대한인</td><td></td>
</tr>
<caption>대한민국 대학</caption> <!-- <caption>은 제목이기 때문에 아래 적어도 테이블 상단에 위치한다. -->
</table>
<br><br><br>
<h3>empty-cells:hide, caption-side:bottom 예제</h3>
<table id="tb2">
<caption>미국 대학</caption>
<tr>
<th>학교</th> <th>이름</th><th>국가</th>
</tr>
<tr>
<td>미국대</td> <td>미국인</td><td>미국</td>
</tr>
<tr>
<td>하버드대</td><td>하버드인</td><td></td>
</tr>
</table>
</body>
</html>02. 실행 화면
① empty-cells, caption-side 둘다 디폴트일 때에는 공백에도 border가 생성되어있고 제목또한 상단에 위치한것을 확인할 수 있습니다.
② empty-cells:hide, caption-side:bottom 일 때에는 빈칸은 공백, 제목도 하단에 위치한 것을 확인할 수 있습니다.
'jsp > css' 카테고리의 다른 글
| css - !important, box-shadow 에 대해 알아보자 (0) | 2022.10.19 |
|---|---|
| 하위 선택자 / 자식 선택자 (0) | 2022.09.22 |
| 11주차 - jsp&css (22) border-spacing (0) | 2022.09.14 |
| 11주차 - jsp&css (21) border-collapse (0) | 2022.09.14 |
| 11주차 - jsp&css (20) table-layout (0) | 2022.09.14 |