비전공개미 개발노트
HTML 1일차 - [문제풀이] 테이블만들기 본문
반응형
SMALL
| 예보구간 | 좋음 | 보통 | 약간나쁨 | 나쁨 | 매우나쁨 | ||
|---|---|---|---|---|---|---|---|
| 예측농도 | 0~30 | 31~80 | 81~120 | 121~200 | 201~300 | 301 ~ | |
| 행동요령 | 노약자 | 장시간 실외 활동 가급적 자제 | 무리한 실외활동 자제요청(특히 호흡기, 심질환자, 노약자) | 실외활동 제한 |
실내 생활 |
||
| 일반 | 장시간 무리한 실외활동 자제 | 실외활동 자제 |
실외활동 자제 |
||||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {font-size: 12pt;}
table, tr, th, td {border: 0.5px solid #ccc;}
img {transition: all 0.7s; overflow: hidden;}
img:hover { opacity: 0.5;}
</style>
</head>
<body>
<img src="../images/a1.png" alt="메인이미지" width="700">
<table cellspacing="0" width="700px">
<caption><h1>미세먼지 농도</h1></caption>
<tr>
<th colspan="2">예보구간</th>
<th bgcolor="lightblue">좋음</th>
<th bgcolor="lightgreen">보통</th>
<th bgcolor="yellow">약간나쁨</th>
<th bgcolor="orange">나쁨</th>
<th colspan="2" bgcolor="red">매우나쁨</th>
</tr>
<tr align="center">
<td colspan="2">예측농도</td>
<td>0~30</td>
<td>31~80</td>
<td>81~120</td>
<td>121~200</td>
<td>201~300</td>
<td>301 ~</td>
</tr>
<tr align="center">
<td rowspan="2">행동요령</td>
<td>노약자</td>
<td></td>
<td></td>
<td>장시간 실외 활동 가급적 자제</td>
<td>무리한 실외활동 자제요청(특히 호흡기, 심질환자, 노약자)</td>
<td>실외활동<br>제한</td>
<td>실내<br>생활</td>
</tr>
<tr align="center">
<td>일반</td>
<td></td>
<td></td>
<td></td>
<td>장시간 무리한 실외활동 자제</td>
<td>실외활동<br>자제</td>
<td>실외활동<br>자제</td>
</tr>
</table>
</body>
</html>반응형
LIST
'프론트엔드 > HTML' 카테고리의 다른 글
| HTML/JavaScript - input입력 / select선택 / radio선택 / checkbox선택 되어있는지 체크하기 (1) | 2022.10.04 |
|---|---|
| HTML/JavaScript - [문제풀이] drag & drop으로 사진옮기기 (1) | 2022.10.04 |
| HTML 2일차 - 태그유형, 자바스크립트 사용방법 (0) | 2022.09.30 |
| HTML 1일차 - 기본구성 및 태그 (0) | 2022.09.29 |
Comments