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><미국 대학></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 |