제목
데이터
종류 대인 소인 비고
주간권 20,000원 10,000원
야간권 10,000원 5,000원
2일권 35,000원 15,000원
"> Insert title here
제목
데이터
종류 대인 소인 비고
주간권 20,000원 10,000원
야간권 10,000원 5,000원
2일권 35,000원 15,000원
"> Insert title here
제목
데이터
종류 대인 소인 비고
주간권 20,000원 10,000원
야간권 10,000원 5,000원
2일권 35,000원 15,000원
"> 
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Insert title here</title>
			
			<link href = "6.css_table.css" rel = "stylesheet">
		</head>
		<body>
		
			<table>
				<tr><th>제목</th></tr>
				<tr><th>데이터</th></tr>
			</table>
			
			<table class = "fee_table2">
				<tr>
					<th class = "col1">종류</th>
					<th class = "col2">대인</th>
					<th class = "col3">소인</th>
					<th class = "col4">비고</th>
				</tr>
				<tr>
					<td>주간권</td>
					<td>20,000원</td>
					<td>10,000원</td>
				</tr>
				<tr>
					<td>야간권</td>
					<td>10,000원</td>
					<td>5,000원</td>
				</tr>
			    <tr>
					<td>2일권</td>
					<td>35,000원</td>
					<td>15,000원</td>
				</tr>
			</table>
		</body>
	</html>

@charset "UTF-8";

/*
	1. 하위 선택 식별자 : 식별자, 하위 식별자 -> 띄어쓰기 구분 
	2. 복수 선택 식별자 : 식별자, 식별자, 식별자 -> , 구분 
*/

.fee_table2, .fee_table2 th, .fee_table2 td{ /* 테이블, 제목, 데이터*/
	border : solid 2px black;
}

.fee_table2 {
	border-collapse: collapse; /*테두리 병합*/
	color : black;
	
}

.fee_table2 th{
	/*해당 클래스 안에 th만 적용*/
	padding : 10px 20px;
	background-color: #E8F2FE;
	text-align: center;
}

.fee_table2 td{
	padding : 10px;
	text-align: center;
}

.fee_table2 .col1{ /*1열*/
	width : 100px;
}

.fee_table2 .col2, .col3{ /*2열 , 3열*/
	width : 200px;
}

.fee_table2 .col4{ /*4열*/
	width : 50px;
}

Untitled