[ CSS / HTML ] 테꾸. 테이블 태그 꾸미기
2024. 4. 11. 19:18ㆍ· FRONT-END/└ CSS
환경 : Visual Studio Code
- 다양한 방법으로 다양하게 테이블을 꾸며보자
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 디자인</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<!-- <link rel="stylesheet" type="text/css" href="test.css"> -->
<style>
/*
테이블 디자인
- table이라는 클래스가 붙는 경우만 디자인하도록 설계
- table은 전체와 칸에 테두리가 따로 적용된다(나눠져있다, seperate)
*/
.table{
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
}
/*
.table 안에 있는 td와 th에만 디자인을 적용하는 방법
(1) 후손 선택자
- .table th라고 작성하면 .table 안에있는 모든 th를 선택
- .table td라고 작성하면 .table 안에 있는 모든 td를 선택
- 작성이 편하지만 테이블이 중첩되면 문제가 생김(범용성↓)
(2) 자식 선택자
- .table > tbody > tr > td라고 작성하면 순서대로 따라가서 나오는 td를 선택
- 작성이 까다롭지만 정확한 대상을 지정할 수 있음(범용성↑)
*/
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td
.table > tfoot > tr > th,
.table > tfoot > tr > td {
text-align: center;
padding: 0.25em;
}
/*
테이블 확장 스타일 - 테두리가 있는 테이블
*/
.table.table-border > thead > tr > th,
.table.table-border > thead > tr > td,
.table.table-border > tbody > tr > th,
.table.table-border > tbody > tr > td,
.table.table-border > tfoot > tr > th,
.table.table-border > tfoot > tr > td {
border: 1px solid #2d3436;
}
/*
테이블 확장 스타일 - 줄무늬 테이블
- 제목 줄에 배경을 설정하고 내용은 짝수 줄만 배경 설정
- 제목 줄에 배경을 설정하지 않고 내용은 홀수 줄만 배경 설정
*/
.table.table-stripe > thead > tr,
.table.table-stripe > tbody > tr:nth-child(2n) {
background-color: rgb(253, 213, 220);
}
/*
테이블 확장 스타일 - 가로줄무늬 테이블
*/
.table.table-horizontal {
border-top:1px solid #2d3436;
border-bottom:1px solid #2d3436;
}
.table.table-horizontal > thead {
border-bottom:1px solid #2d3436;
}
.table.table-horizontal > tfoot {
border-top:1px solid #2d3436;
}
/* :not() 을 이용하여 특정 대상을 선택에서 제거할 수 있다 */
.table.table-horizontal > tbody > tr:not(tr:last-child) {
border-bottom: 1px solid #ececec;
}
/*
테이블 확장 스타일 - 마우스 반응 테이블
- 제목은 제외한 내용 줄만 마우스가 올라가면 색상이 변하도록 구현
*/
.table.table-hover > tbody > tr:hover {
background-color: #b2bec3;
}
</style>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>테이블 디자인</h1>
</div>
<div class="cell">
<h2>기본 테이블</h2>
</div>
<div class="cell center">
<table class="table">
<thead>
<tr>
<th>강좌명</th>
<th>강의시간</th>
<th>수강료</th>
<th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>자바 마스터 과정</td>
<td>90</td>
<td>1000000</td>
<td>온라인</td>
</tr>
<tr>
<td>파이썬 기초</td>
<td>60</td>
<td>600000</td>
<td>온라인</td>
</tr>
<tr>
<td>웹 개발자 단기완성</td>
<td>120</td>
<td>1200000</td>
<td>오프라인</td>
</tr>
</tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
<div class="cell">
<h2>테두리가 있는 테이블</h2>
</div>
<div class="cell center">
<table class="table table-border">
<thead>
<tr>
<th>강좌명</th>
<th>강의시간</th>
<th>수강료</th>
<th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>자바 마스터 과정</td>
<td>90</td>
<td>1000000</td>
<td>온라인</td>
</tr>
<tr>
<td>파이썬 기초</td>
<td>60</td>
<td>600000</td>
<td>온라인</td>
</tr>
<tr>
<td>웹 개발자 단기완성</td>
<td>120</td>
<td>1200000</td>
<td>오프라인</td>
</tr>
</tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
<div class="cell">
<h2>줄무늬 테이블</h2>
</div>
<div class="cell center">
<table class="table table-stripe">
<thead>
<tr>
<th>강좌명</th>
<th>강의시간</th>
<th>수강료</th>
<th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>자바 마스터 과정</td>
<td>90</td>
<td>1000000</td>
<td>온라인</td>
</tr>
<tr>
<td>파이썬 기초</td>
<td>60</td>
<td>600000</td>
<td>온라인</td>
</tr>
<tr>
<td>웹 개발자 단기완성</td>
<td>120</td>
<td>1200000</td>
<td>오프라인</td>
</tr>
</tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
<div class="cell">
<h2>가로 줄무늬 테이블</h2>
</div>
<div class="cell center">
<table class="table table-horizontal">
<thead>
<tr>
<th>강좌명</th>
<th>강의시간</th>
<th>수강료</th>
<th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>자바 마스터 과정</td>
<td>90</td>
<td>1000000</td>
<td>온라인</td>
</tr>
<tr>
<td>파이썬 기초</td>
<td>60</td>
<td>600000</td>
<td>온라인</td>
</tr>
<tr>
<td>웹 개발자 단기완성</td>
<td>120</td>
<td>1200000</td>
<td>오프라인</td>
</tr>
</tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
<div class="cell">
<h2>마우스 반응형 테이블</h2>
</div>
<div class="cell center">
<table class="table table-hover">
<thead>
<tr>
<th>강좌명</th>
<th>강의시간</th>
<th>수강료</th>
<th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>자바 마스터 과정</td>
<td>90</td>
<td>1000000</td>
<td>온라인</td>
</tr>
<tr>
<td>파이썬 기초</td>
<td>60</td>
<td>600000</td>
<td>온라인</td>
</tr>
<tr>
<td>웹 개발자 단기완성</td>
<td>120</td>
<td>1200000</td>
<td>오프라인</td>
</tr>
</tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
</div>
</body>
</html>
- 출력 결과
[코드 뜯어보기] (table 세부 내용 생략)
[ 기본 테이블 ]
<head>
<style>
/*
테이블 디자인
- table이라는 클래스가 붙는 경우만 디자인하도록 설계
- table은 전체와 칸에 테두리가 따로 적용된다(나눠져있다, seperate)
*/
.table{
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
}
/*
.table 안에 있는 td와 th에만 디자인을 적용하는 방법
(1) 후손 선택자
- .table th라고 작성하면 .table 안에있는 모든 th를 선택
- .table td라고 작성하면 .table 안에 있는 모든 td를 선택
- 작성이 편하지만 테이블이 중첩되면 문제가 생김(범용성↓)
(2) 자식 선택자
- .table > tbody > tr > td라고 작성하면 순서대로 따라가서 나오는 td를 선택
- 작성이 까다롭지만 정확한 대상을 지정할 수 있음(범용성↑)
*/
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td
.table > tfoot > tr > th,
.table > tfoot > tr > td {
text-align: center;
padding: 0.25em;
}
</style>
</head>
<body>
<div class="cell">
<h2>기본 테이블</h2>
</div>
<div class="cell center">
<table class="table">
<thead></thead>
<tbody></tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
</body>
[ 테두리가 있는 테이블 ]
<head>
<style>
.table{
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
}
/*
테이블 확장 스타일 - 테두리가 있는 테이블
*/
.table.table-border > thead > tr > th,
.table.table-border > thead > tr > td,
.table.table-border > tbody > tr > th,
.table.table-border > tbody > tr > td,
.table.table-border > tfoot > tr > th,
.table.table-border > tfoot > tr > td {
border: 1px solid #2d3436;
}
</style>
</head>
<body>
<div class="container w-500">
<div class="cell">
<h2>테두리가 있는 테이블</h2>
</div>
<div class="cell center">
<table class="table table-border">
<thead></thead>
<tbody></tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
</div>
</body>
</html>
[ 줄무늬 테이블 ]
<head>
<style>
.table{
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
}
/*
테이블 확장 스타일 - 줄무늬 테이블
- 제목 줄에 배경을 설정하고 내용은 짝수 줄만 배경 설정
- 제목 줄에 배경을 설정하지 않고 내용은 홀수 줄만 배경 설정
*/
.table.table-stripe > thead > tr,
.table.table-stripe > tbody > tr:nth-child(2n) {
background-color: rgb(253, 213, 220);
}
</style>
</head>
<body>
<div class="container w-500">
<div class="cell">
<h2>줄무늬 테이블</h2>
</div>
<div class="cell center">
<table class="table table-stripe">
<thead>
<tr>
<th>강좌명</th>
<th>강의시간</th>
<th>수강료</th>
<th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>자바 마스터 과정</td>
<td>90</td>
<td>1000000</td>
<td>온라인</td>
</tr>
<tr>
<td>파이썬 기초</td>
<td>60</td>
<td>600000</td>
<td>온라인</td>
</tr>
<tr>
<td>웹 개발자 단기완성</td>
<td>120</td>
<td>1200000</td>
<td>오프라인</td>
</tr>
</tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
</div>
</body>
</html>
[ 가로 줄무늬 테이블 ]
<head>
<style>
.table{
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
}
/*
테이블 확장 스타일 - 가로줄무늬 테이블
*/
.table.table-horizontal {
border-top:1px solid #2d3436;
border-bottom:1px solid #2d3436;
}
.table.table-horizontal > thead {
border-bottom:1px solid #2d3436;
}
.table.table-horizontal > tfoot {
border-top:1px solid #2d3436;
}
/* :not() 을 이용하여 특정 대상을 선택에서 제거할 수 있다 */
.table.table-horizontal > tbody > tr:not(tr:last-child) {
border-bottom: 1px solid #ececec;
}
</style>
</head>
<body>
<div class="container w-500">
<div class="cell">
<h2>가로 줄무늬 테이블</h2>
</div>
<div class="cell center">
<table class="table table-horizontal">
<thead>
<tr>
<th>강좌명</th>
<th>강의시간</th>
<th>수강료</th>
<th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>자바 마스터 과정</td>
<td>90</td>
<td>1000000</td>
<td>온라인</td>
</tr>
<tr>
<td>파이썬 기초</td>
<td>60</td>
<td>600000</td>
<td>온라인</td>
</tr>
<tr>
<td>웹 개발자 단기완성</td>
<td>120</td>
<td>1200000</td>
<td>오프라인</td>
</tr>
</tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
</div>
</body>
</html>
[ 마우스 반응형 테이블 ]
<head>
<style>
.table{
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
}
/*
테이블 확장 스타일 - 마우스 반응 테이블
- 제목은 제외한 내용 줄만 마우스가 올라가면 색상이 변하도록 구현
*/
.table.table-hover > tbody > tr:hover {
background-color: #b2bec3;
}
</style>
</head>
<body>
<div class="container w-500">
<div class="cell">
<h2>마우스 반응형 테이블</h2>
</div>
<div class="cell center">
<table class="table table-hover">
<thead>
<tr>
<th>강좌명</th>
<th>강의시간</th>
<th>수강료</th>
<th>구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>자바 마스터 과정</td>
<td>90</td>
<td>1000000</td>
<td>온라인</td>
</tr>
<tr>
<td>파이썬 기초</td>
<td>60</td>
<td>600000</td>
<td>온라인</td>
</tr>
<tr>
<td>웹 개발자 단기완성</td>
<td>120</td>
<td>1200000</td>
<td>오프라인</td>
</tr>
</tbody>
<!--
<tfoot></tfoot>
-->
</table>
</div>
</div>
</body>
</html>
개인 공부 기록용 입니다:)
728x90
'· FRONT-END > └ CSS' 카테고리의 다른 글
| [ CSS / HTML ] 네비게이터 꾸미기 (0) | 2024.04.12 |
|---|---|
| [ CSS / HTML ] link 태그 꾸미기 (0) | 2024.04.12 |
| [ CSS ] 미리 정해두고 꺼내 먹기 (0) | 2024.04.04 |
| [ CSS ] form 디자인을 해보자 - 인스타그램 로그인 화면 디자인 해보기 (0) | 2024.04.03 |
| [ CSS ] form 디자인을 해보자 (0) | 2024.04.03 |