테이블
- class=”table”
- table-bordered : 테두리 있음
- table-borderless : 테두리 없음
- table-striped : td 태그 흰색행/회색행
- table-hover : 행에 마우스 올리면 색상 변경
- table-dark : 배경색을 검정색으로 설정
- table-sm/md... (md = default)
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap table</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-md table-hover table-info table-bordered">
<thead class="thead-dark">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tr class="table-danger">
<td>4</td>
<td>HTML /CSS</td>
<td>flower</td>
<td>2019-11-17</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>일본어 스터디</td>
<td>성춘향</td>
<td>2019-11-15</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Bootstrap</td>
<td>이몽룡</td>
<td>2019-11-12</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>JSP 프로그래밍</td>
<td>홍길동</td>
<td>2019-11-07</td>
<td>1</td>
</tr>
</table>
<table class="table table-striped table-bordered"> <!-- 줄무늬 행 -->
<thead class="thead-dark">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tr>
<td>4</td>
<td>HTML /CSS</td>
<td>flower</td>
<td>2019-11-17</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>일본어 스터디</td>
<td>성춘향</td>
<td>2019-11-15</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Bootstrap</td>
<td>이몽룡</td>
<td>2019-11-12</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>JSP 프로그래밍</td>
<td>홍길동</td>
<td>2019-11-07</td>
<td>1</td>
</tr>
</table>
</div>
</body>
</html>
'Frontend > Bootstrap' 카테고리의 다른 글
| Bootstrap 오류 - CDN 링크 사용 (0) | 2021.12.07 |
|---|---|
| 내비게이션 바 : Navbar (0) | 2021.12.07 |
| 이미지 (0) | 2021.12.07 |
| Button (0) | 2021.12.07 |
| 그리드 (Grid) (0) | 2021.12.07 |