<!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:120px; /* 셀 너비 */
padding:5px; /* 셀 패딩(테두리와 내용 사이의 여백) */
}
</style>
</head>
<body>
</body>
</html>주어진 문제 문제 난이도 3/3
문제 조건 - <caption> 태그를 사용할 것
- 표의 제목 셀은 <th> 태그를 사용하고 그 외의 셀은 <td> 태그를 사용
<!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:120px; /* 셀 너비 */
padding:5px; /* 셀 패딩(테두리와 내용 사이의 여백) */
}
</style>
</head>
<body>
<table border="1">
<caption>
<h2>주요 SNS 서비스별 이용률(%) </h2>
</caption>
<thead>
<tr>
<td></td>
<th>페이스북</th>
<th>카카오스토리</th>
<th>밴드</th>
<th>인스타그램</th>
<th>트위터</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</body>
</html>HTML을 이용하여 표를 직접 만들어 보니 신기하고 재미가 있는 것 같다.
'HTML' 카테고리의 다른 글
| [Chapter 3 - 연습문제] HTML5 공부 4일차!(2021-07-01) (0) | 2021.07.01 |
|---|---|
| [Chapter 3] HTML5 공부 3일차 (2021-06-30) (0) | 2021.07.01 |
| [Chapter 2-2] HTML5 공부 2일차 (2021-06-29) (0) | 2021.06.30 |
| HTML공부 시작! (2021-06-28) (0) | 2021.06.29 |
| [Chapter 2-1] HTML5 공부 2일차 (2021-06-29) (0) | 2021.06.29 |