<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>col colgroup 태그 연습</title>
</head>
<body>
<!-- 표에서 하나의 열에 스타일을 지정하거나 열을 몇개씩 묶어서 스타일을 한꺼번에 저장할 때-->
<table border ="1">
<caption> colgroup 연습</caption>
<colgroup>
<col><!--비워둠-->
<col style="background-color: rgba(54, 82, 175, 0.89);">
<col style="background-color: rgb(253, 222, 155);">
<col style="background-color: rgb(143, 114, 103);">
</colgroup>
<tr>
<td></td> <td></td> <td></td> <td></td>
</tr>
<tr>
<td></td> <td></td> <td></td> <td></td>
</tr>
</table>
</body>
</html>
테이블 스타일 설정
border 얇은선으로 하려는데 왜 안되지..
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>col colgroup 태그 연습</title>
<style>
table, tr, td{ /*테이블 스타일 설정*/
border:1px solid #ccc;
padding:5px;
font-size: 0.8em;
}
</style>
</head>
<body>
<!-- 표에서 하나의 열에 스타일을 지정하거나 열을 몇개씩 묶어서 스타일을 한꺼번에 저장할 때-->
<table>
<caption> 1인당 연간 설탕 소비량 <small>[단위 : kg] </small></caption>
<colgroup>
<col style="background-color: rgba(241, 241, 241, 0.89);">
<col><!--비워둠-->
</colgroup>
<tr>
<td>WHO 권장량</td> <td>18.25</td>
</tr>
<tr>
<td>한국</td> <td>22</td>
</tr>
<tr>
<td>중국</td><td>25</td>
</tr>
<tr>
<td>싱가포르</td><td>>58</td>
</tr>
<tr>
<td>미국</td><td>33</td>
</tr>
</table>
</body>
</html>
