개발나라 스용공주

[HTML] 일기예보 만들기 예제 실습 본문

WEB/HTML & CSS

[HTML] 일기예보 만들기 예제 실습

스용공주 2024. 7. 12. 15:39
728x90
728x90

<!doctype html>
<html>
    <head>
        <title>날씨 예보</title>
        <meta charset="utf-8">
        <style>
            table, tr, th, td {
                border : black 1px solid;
                border-collapse: collapse;
                padding : 10px;
            }
        </style>
    </head>
    <body>
        <h3>일기예보</h3>
        <table>
            <tr>
                <th rowspan="2">지역</th><th colspan="2">13일(목)</th><th colspan="2">14일(금)</th><th colspan="2">15일(토)</th><th colspan="2">16일(일)</th>
            </tr>
            <tr>
                <td>오전</td><td>오후</td><td>오전</td><td>오후</td><td>오전</td><td>오후</td><td>오전</td><td>오후</td>
            </tr>
            <tr>
                <td>서울<br>경기도<br>인천</td><td><img src="Design/Weather/Rain.png" width="30"></td><td><img src="Design/Weather/Rain.png" width="30"></td><td><img src="Design/Weather/Wind.png" width="30"></td><td><img src="Design/Weather/Rain.png" width="30"></td><td><img src="Design/Weather/Rain.png" width="30"></td><td><img src="Design/Weather/Sun.png" width="30"></td><td><img src="Design/Weather/Sun.png" width="30"></td><td><img src="Design/Weather/Rain.png" width="30"></td>
            </tr>
            <tr>
                <td>대전<br>세종<br>충남</td><td><img src="Design/Weather/Wind.png" width="30"></td><td><img src="Design/Weather/Wind.png" width="30"></td><td><img src="Design/Weather/Sun.png" width="30"></td><td><img src="Design/Weather/Rain.png" width="30"></td><td><img src="Design/Weather/Wind.png" width="30"></td><td><img src="Design/Weather/Sun.png" width="30"></td><td><img src="Design/Weather/Rain.png" width="30"></td><td><img src="Design/Weather/Sun.png" width="30"></td>
            </tr>
            <tr>
                <td>부산<br>울산<br>경상남도</td><td><img src="Design/Weather/Rain.png" width="30"></td><td><img src="Design/Weather/Wind.png" width="30"></td><td><img src="Design/Weather/Sun.png" width="30"></td><td><img src="Design/Weather/Wind.png" width="30"></td><td><img src="Design/Weather/Rain.png" width="30"></td><td><img src="Design/Weather/Sun.png" width="30"></td><td><img src="Design/Weather/Sun.png" width="30"></td><td><img src="Design/Weather/Sun.png" width="30"></td>
            </tr>
        </table>
    </body>
</html>
728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML] table의 display 속성  (0) 2024.07.22
[HTML] table에서 칸 병합하기 / colspan, rowspan  (0) 2024.07.12
[교재] HTML 왕기초 22장 - Visual Studio Code / 폼(form) 양식 만들기  (0) 2024.07.03
[교재] HTML 왕기초 21장 - Visual Studio Code / 표 만들기  (1) 2024.07.03
[생활코딩] CSS 왕기초 20장 - Visual Studio Code / link로 css 파일 따로 관리하기  (0) 2024.07.02
'WEB/HTML & CSS' Related Articles more
Comments