html table 태그를 이용해서 미국립 약물중독 연구소 표를 만들어보겠습니다.
위의 표를 비슷하게 만들어보겠습니다.
1. table - tr,th,td
표의 제목과 부연 설명을 포함해서 표를 만들었습니다.
표의 행마다 데이터를 넣어주었고, backgroud color를 넣기 위해 해당 위치에 id를 정해주었습니다.
colspan 속성- 셀을 합치는 속성 을 사용하였습니다.
표 제목을 적어주고 표와 살짝 띄어지게 하기 위해서 tr을 하나 더 넣었습니다.
<body>
<table>
<tr id="head1">
<th colspan="7">미국립약물중독연구소</th>
</tr>
<tr id="head2">
<th colspan="7">(Nationa Institue on Drug Abuse, NIDA) 보고서 (1994)</th>
</tr>
<tr id>
<th colspan="7"></th>
</tr>
<tr id="tr1">
<td></td>
<td>니코틴</td>
<td>헤로인</td>
<td>코카인</td>
<td>알코올</td>
<th>카페인</td>
<td>대마초</td>
</tr>
<tr>
<td id="td1">의존성</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td id="td2">금단성</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>6</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td id="td3">내성</td>
<td>5</td>
<td>6</td>
<td>3</td>
<td>4</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td id="td4">강화성</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>4</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td id="td5">독성</td>
<td>3</td>
<td>6</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>2</td>
</tr>
<tr id="text">
<th colspan="7">(높은 숫자 = 높은 효과)</th>
</tr>
</table>
</body>2. style
border-collapse : collapse; 를 이용해 선을 한 줄로 만들었습니다.
th의 기본 font-weight 를 unset으로 하였다. 재설정하기 위해서 했는데 unset 속성의 역할은 정확히 모르겠습니다.
부연 설명은 text라고 id를 정하여 text-align을 이용해 왼쪽으로 정렬시켰다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미국립약물중독연구소보고서</title>
<style>
table{
border-collapse: collapse;
width: 550px;
height: 280px;
text-align: center;
font-weight: bold;
}
th{
font-weight: unset;
}
td{
border: solid 1.5px black;
}
#tr1,#td1,#td2,#td3,#td4,#td5{
background-color: rgb(236,225,208);
border: solid 1.5px black;
}
#head1,#head2{
font-size: 19px;
font-weight: bolder;
}
#text{
font-weight: normal;
text-align: left;
}
</style>
</head>3. 결과물
바깥에 선을 적용하고 싶었는데 못했습니다. 좀 더 공부해보고 방법을 찾을 예정.
그리고 연구소 글씨가 '구' 에만 위로 올라가있는 거 왜 그런지 의문.
이렇게 html table 태그를 이용해 표 만들기 완성 !
'HTML & CSS' 카테고리의 다른 글
| [HTML][CSS] display 속성 - block, inline, inline-block (0) | 2020.12.21 |
|---|---|
| [HTML][CSS] 수성아트피아 리페어 페이지 만들기 과제 (0) | 2020.12.19 |
| [HTML][CSS] 리트리버 소개 과제 - float: left; (0) | 2020.12.18 |
| [HTML] 절대경로, 상대경로 - 이미지 경로 표기법 (0) | 2020.12.17 |
| [html][css] 관람등급 만들기 - div,span,table,display (0) | 2020.12.16 |