11주차 - jsp&css (21) border-collapse
2022. 9. 14. 19:18ㆍjsp/css
이번의 목표
01. border-collapse를 사용해보자
<table> 태그를 사용하며 자세히 본 사람들은 이미 눈치챘겠지만, table 안의 각 셀 사이에는 공백이 있습니다.
이 공백을 없애기 위해서는 border-collapse 를 사용할 수 있습니다.
border-collapse:collapse; 는 셀사이의 공백을 없앱니다.
border-collapse:separate; 는 디폴트 값이므로 별도로 입력하지 않아도 됩니다.
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-collapse: collapse;
}
#tb2 {
width: 250px;
border: 5px solid red;
table-layout: fixed;
border-collapse: separate; /* separate 가 기본값이므로 입력하지 않아도 무방하다.*/
}
</style>
</head>
<body>
<h3>표(table)의 테두리 사이의 간격 제거 예제</h3>
<table id="tb">
<tr>
<th>table border-collapse</th>
<td>collapse</td>
</tr>
<tr>
<th>table border-collapse</th>
<td>collapse</td>
</tr>
<tr>
<th>table border-collapse</th>
<td>collapse</td>
</tr>
</table>
<h3>표(table)의 테두리 사이의 간격 제거하지 않은 예제 -디폴트-</h3>
<table id="tb2">
<tr>
<th>table border-separate</th>
<td>separate</td>
</tr>
<tr>
<th>table border-separate</th>
<td>separate</td>
</tr>
<tr>
<th>table border-separate</th>
<td>separate</td>
</tr>
</table>
</body>
</html>02. 실행 화면
① table-border:collapse; 에서는 공백이 없어진 것을 확인할 수 있습니다.
② table-border:separate; 는 디폴트 값으로 공백이 남아있는 것을 확인할 수 있습니다.
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (23) caption-side, empty-cells (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (22) border-spacing (0) | 2022.09.14 |
| 11주차 - jsp&css (20) table-layout (0) | 2022.09.14 |
| 11주차 - jsp&css (19) box-sizing (0) | 2022.09.14 |
| 11주차 - jsp&css (18) <header>, <section>, <footer> (0) | 2022.09.14 |