3층 1구역 - 개발의 장/JSP

JSP - table CSS (2022-09-14)

상이태상 2022. 9. 14. 23:12

1. 본론

 

1-1. table layout fixed

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex20</title>
<!-- http://localhost:8085/cssExam/exams/ex20.jsp -->
<style>
 td, th{border: 1px solid black;}
 #tb{border: 1px solid black; width: 250px; table-layout: fixed;}
</style>
</head>
<body>
    <h2>table layout 예제</h2>
    <table id="tb">
        <tr>
            <th>table layout fixed</th>
            <td>
                fixed : 내용의 분량에 따라 자동으로 조절되지 않고 고정됨.
                내용의 분량에 따라 자동으로 조절되지 않고 고정됨.
            </td>
        </tr>
    </table>
</body>
</html>
cs

 

 

fixed는 가로의 길이를 설정했을 경우 가로의 길이는 고정되며 내용의 분량이 늘어날때마다

세로로 늘어난다.

 

1-2. table layout auto

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex21</title>
<!-- http://localhost:8085/cssExam/exams/ex21.jsp -->
<style>
 td, th{border: 1px solid black;}
 #tb{border: 1px solid black; width: 250px; table-layout: auto;}
</style>
</head>
<body>
    <h2>table layout 예제</h2>
    <table id="tb">
        <tr>
            <th>table layout auto</th>
            <td>
                auto : 내용의 분량에 따라 자동으로 조절됨.
                내용의 분량에 따라 자동으로 조절됨.
            </td>
        </tr>
    </table>
</body>
</html>
cs

 

 

 

auto는 내용의 분량에 따라 자동적으로 늘어난다.

 

1-3. border-collapse : collapse;

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex22</title>
<!-- http://localhost:8085/cssExam/exams/ex22.jsp -->
<style>
 td, th{border: 1px solid black;}
 #tb{
 border: 5px solid red; 
 width: 250px; 
 table-layout: fixed; 
 border-collapse: collapse;
 /* 테이블 생성 시 사이에 공차가 생기는데 collapse를 통해 공차를 지워줄 수 있다. */
 }
</style>
</head>
<body>
    <h2>표(table)의 테두리와 셀(td)의 테두리 사이의 간격 제거</h2>
    <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>
</body>
</html>
cs

 

 

1-4. border-spacing

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex23</title>
<!-- http://localhost:8085/cssExam/exams/ex23.jsp -->
<style>
 td, th{border: 1px solid black;}
 #tb{
 border: 5px solid red; 
 width: 250px; 
 table-layout: fixed; 
 border-spacing: 5px
 /* 테이블 생성 시 사이에 공차가 생기는데 spacing를 통해 공차를 키워줄 수 있다. */
 }
</style>
</head>
<body>
    <h2>표(table)의 테두리와 셀(td)의 테두리 사이의 간격 조절</h2>
    <table id="tb">
        <tr>
            <th>table border-spacing</th> <td>spacing</td>
        </tr>
        <tr>
            <th>table border-spacing</th> <td>spacing</td>
        </tr>
        <tr>
            <th>table border-spacing</th> <td>spacing</td>
        </tr>
    </table>
</body>
</html>
cs

 

1-5. empty-cells: hide; caption-side: bottom;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex24</title>
<!-- http://localhost:8085/cssExam/exams/ex24.jsp -->
<style>
     td, th { border: 1px solid black; }
     #tb1 {
        border: 1px solid blue;    
        width: 300px;
        empty-cells: hide;
        /* 보통 테이블 생성하면 데이터가 없는 곳도 칸(cell)이 만들어지는데
        empty-cells를 사용하여 데이터가 없는 곳은 칸을 안 만들겠다 라고 선언이 가능하다. */
     }    
     #tb2  {
        border: 1px solid red;    
         width: 300px;
         caption-side: bottom;
         /* 테이블에서 caption이란 제목에 해당하기 때문에 서순으로 맨 하단에 caption을 적용해도 테이블 맨 위에 적용된다. 
         그때 caption-side를 이용하여 caption의 위치를 바꾸어 줄수 있다.*/
     }
     #tb2 caption{font-size: 12px;}
</style>
</head>
<body>
    <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>
    </table>
    <br><br>
    
    <table id="tb2">
        <caption>&lt;미국 대학&gt;</caption>
        <tr>
            <th>University</th> <th>Name</th> <th>Country</th>
        </tr>
        <tr>
            <td>MIT</td> <td>Jack</td> <td>USA</td>
        </tr>
        <tr>
            <td>UCLA</td> <td>Smith</td> <td>USA</td>
        </tr>
    </table>
</body>
</html>
cs
저작자표시 (새창열림)