study_HTML/HTML-css_study_table.html at main · 202010800LJH/study_HTML · GitHub

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
57
58
59
60
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>표 스타일</title>
    <style>
			table {
				caption-side: bottom;  /* 표 캡션 위치 */
				border:1px solid black;  /* 표 테두리는 검은 색 실선으로 */
				border-collapse: collapse; /* 표의 선을 한개로 */
			}
			td, th {
				border:1px solid black;  /* 셀 테두리는 검은 색 선으로 */
				padding:10px;  /* 셀 테두리와 내용 사이의 여백 */
				text-align:center;  /* 셀 내용 가운데 정렬 */
			}
			th{
				background-color: #ccc; /* 제목 표의 배경색 지정 */
			}
		</style>
	</head>
	<body>
		<h2>상품 구성</h2>
		<table>
			<caption>선물용과 가정용 상품 구성</caption>
			<thead>
				<tr>
					<th>용도</th>
					<th>중량</th>
					<th>갯수</t>
					<th>가격</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td rowspan="2">선물용</td>
					<td>3kg</td>
					<td>11~16과</td>
					<td>35,000원</td>
				</tr>
				<tr>
					<td>5kg</td>
					<td>18~26과</td>
					<td>52,000원</td>
				</tr>
				<tr>
					<td rowspan="2">가정용</td>
					<td>3kg</td>
					<td>11~16과</td>
					<td>30,000원</td>
				</tr>
				<tr>
					<td>5kg</td>
					<td>18~26과</td>
					<td>47,000원</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>