11주차 - jsp&css (22) border-spacing
2022. 9. 14. 19:33ㆍjsp/css
이번의 목표
01. border-spacing 을 사용해보자
지난 시간에는 <table> 태그의 셀 사이의 간격을 없애는 방법을 알아 보았습니다.
이번에는 테두리와 셀 사이의 간격을 조절하는 방법을 알아볼 것입니다.
이를 위해서는 border-spacing 을 이용합니다.
border-spacing 을 사용하여 간격의 값을 설정할 수 있습니다.
예시) border-spacing: 10px;
이때에 0px을 설정하는 것으로 border-collapse:collapse 와 같은 기능을 할 수도 있습니다.
하지만 collapse와 다른점은 테두리(border)가 겹치는 곳은 두꺼워 진다는 것입니다.
그렇기 때문에 간격을 없애고자 할 때에는 border-collapse를 사용하는 것이 더 낫습니다.
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>ex20</title>
<style type="text/css">
td, th {
border: 1px solid;
}
#tb {
width: 250px;
border: 5px solid red;
table-layout: fixed;
border-spacing: 5px;
}
#tb2 {
width: 250px;
border: 5px solid red;
table-layout: fixed;
}
#tb3 {
width: 250px;
border: 5px solid red;
table-layout: fixed;
border-spacing: 0px;
}
</style>
</head>
<body>
표(table)의 테두리와 셀(td)의 테두리 사이의 간격 조절
<table id="tb">
<tr>
<th>border-spacing: 10px;</th>
<td>10px;</td>
</tr>
<tr>
<th>border-spacing: 10px;</th>
<td>10px;</td>
</tr>
<tr>
<th>border-spacing: 10px;</th>
<td>10px;</td>
</tr>
</table>
<br>
표(table)의 테두리와 셀(td)의 테두리 사이의 간격 조절하지 않은 예제 -디폴트-
<table id="tb2">
<tr>
<th>default</th>
<td>default</td>
</tr>
<tr>
<th>default</th>
<td>default</td>
</tr>
<tr>
<th>default</th>
<td>default</td>
</tr>
</table>
<br>
표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 0px로 했을때
<table id="tb3">
<tr>
<th>border-spacing: 0px;</th>
<td>0px</td>
</tr>
<tr>
<th>border-spacing: 0px;</th>
<td>0px</td>
</tr>
<tr>
<th>border-spacing: 0px;</th>
<td>0px</td>
</tr>
</table>
</body>
</html>02. 실행 화면
입력값에 따라 테이블의 간격이 달라지는 것을 확인할 수 있습니다.
'jsp > css' 카테고리의 다른 글
| 하위 선택자 / 자식 선택자 (0) | 2022.09.22 |
|---|---|
| 11주차 - jsp&css (23) caption-side, empty-cells (0) | 2022.09.14 |
| 11주차 - jsp&css (21) border-collapse (0) | 2022.09.14 |
| 11주차 - jsp&css (20) table-layout (0) | 2022.09.14 |
| 11주차 - jsp&css (19) box-sizing (0) | 2022.09.14 |