<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boostrap Table Example</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<!--
1. 컨테이너 없이 테이블만 작성하면 너비가 100% 꽉 참.
2. 테이블 외관에 div 쓰고 class=table 적용하면 양쪽에 적절한 마진 생김.
-->
</head>
<body>
<div class="container">
<!-- <h1 class="display-4">BootStrap Rable Example</h1> <!--글자 크기-->
<h3 style="text-align:center; padding-top:50px;">
Bootstrap Table Example
<small class="text-muted">with faded secondary text</small><!--채도가 낮은 -->
</h3>
<br>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Job</th>
<th>Hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>홍길동</td>
<td>22</td>
<td>서울시 서초구 양재동 OO물산 307-12,1408</td>
<td>Male</td>
<td>Programmer</td>
<td>영화보기</td>
</tr>
<tr>
<td>2</td>
<td>이순신</td>
<td>33</td>
<td>부산광역시 해운대구 해운대동 OO물산 307-12,1408</td>
<td>Female</td>
<td>Designer</td>
<td>음악감상</td>
</tr>
<tr>
<td>3</td>
<td>강감찬</td>
<td>44</td>
<td>인천시 서구 서구동 OO물산 307-12, 1408</td>
<td>Male</td>
<td>Manager</td>
<td>우표수집</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>1. 기존 Table을 생성하면 가로 여백이 없이 화면이 꽉 찬 테이블이 생성된다.
2. 부트스트랩을 통해 조정해주자.
3. table class = table -> 이쁘게 생긴 테이블(하지만 가로 여백 꽉 차있다.)
4. table 태그를 <div> 태그로 감싸준다.
5. div에 class를 부여 container (자동으로 가로 여백이 맞춰진다)
6. h1에 class ='display-숫자' 로 문자의 크기를 조정할 수 있다.
7. small 태그에 class='text-muted'하면 채도가 낮은 글씨가 생성된다.
'공공데이터API 활용' 카테고리의 다른 글
| 13. 부트스트랩 반응형 테이블 (0) | 2022.01.21 |
|---|---|
| 12. JSON 데이터를 출력시키는 BS 테이블 클래스 연습하기 (0) | 2022.01.21 |
| 10. Servlet JSP vs JSON 연동하기 - 공공데이터 포털사이트 JSON 연동 (0) | 2022.01.21 |
| 9. Servlet JSP vs JSON 연동하기 - 실습 (0) | 2022.01.21 |
| 8. JSON 데이터 웹페이지 테이블로 출력하기 (0) | 2022.01.21 |
