study_doit_HTML-CSS-JavaScript/07/table-css1.html at master · Paul2021-R/study_doit_HTML-CSS-JavaScript · GitHub

56 lines (56 loc) · 1.21 KB

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

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>표 스타일</title>

<style>

table {

caption-side: bottom; /* 표 캡션 위치 */

border:1px solid black; /* 표 테두리는 검은 색 실선으로 */

}

td, th {

border:1px dotted black; /* 셀 테두리는 검은 색 점선으로 */

padding:10px; /* 셀 테두리와 내용 사이의 여백 */

text-align:center; /* 셀 내용 가운데 정렬 */

}

</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>