개념.log/Publishing
[HTML] Tag Quiz 4
_2J
2020. 6. 13. 02:12
Q4. 그림과 같은 표를 작성하세요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>커피 드립 순서</title>
</head>
<body>
<p>커피 드립 순서 - 아라비아 숫자</p>
필터접기
분쇄
불림
추출
<p>커피 드립 순서 - 알파벳 소문자</p>
필터접기
분쇄
불림
추출
</body>
</html>
|
|
Q4. 정답 코드
더보기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>주요 SNS 서비스별 이용률</title>
<style>
table, th, td {
border:1px solid gray; /* 표의 테두리 - 1px 회색 실선 */
border-collapse:collapse; /* 표 테두리와 셀 테두리 합치기 */
}
th, td {
width:100px; /* 셀 너비 */
padding:5px; /* 셀 패딩(테두리와 내용 사이의 여백) */
}
caption {
font-size:20px; /* 표 설명글 글자 크기 */
margin:10px; /* 표 설명글 주변 여백 */
font-weight:bold; /* 표 설명글 글자 굵게 */
}
</style>
</head>
<body>
<table>
<caption><b>주요 SNS 서비스별 이용률(%)</b></caption>
<tr>
<th></th>
<th>페이스북</th>
<th>카카오스토리</th>
<th>밴드</th>
<th>인스타그램</th>
<th>트위터</th>
</tr>
<tr>
<th>2015년</th>
<td>77.1</td>
<td>58.3</td>
<td>32.4</td>
<td>16.7</td>
<td>22.1</td>
</tr>
<tr>
<th>2016년</th>
<td>73.8</td>
<td>51.0</td>
<td>40.1</td>
<td>28.1</td>
<td>14.7</td>
</tr>
</table>
</body>
</html>