728x90
반응형
<!-- src/main/webapp/4/weather.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>날짜 정보</title>
<style type="text/css">
/*선택자 : table or tr or th or td 인 태그의 서식 설정*/
table,tr,th,td {
border : solid 1px black; /* 테두리 : 실선, 선의 두께, 색상 */
border-collapse: collapse; /* 테두리 간격 없음 */
padding:8px; /* 테두리와 내용사이의 간격 띄우기 */
}
</style>
</head>
<body>
<h3>일기예보</h3>
<!--
rowspan='2' : 세로 셀 두개를 한개로 합하는 기능
colspan='2' : 가로 셀 두개를 한개로 합하는 기능
-->
<table>
<tr>
<th rowspan='2'>지역</th>
<th colspan='2'>27일(목)</th>
<th colspan='2'>28일(금)</th>
<th colspan='2'>29일(토)</th>
</tr>
<tr>
<td>오전</td><td>오후</td><td>오전</td><td>오후</td><td>오전</td><td>오후</td>
</tr>
<tr>
<td>서울<br>경기도</td>
<td><img src='img/shine.png'></td><td><img src='img/shine.png'></td><td><img src='img/shine.png'></td>
<td><img src='img/rain.png'></td><td><img src='img/rain.png'></td><td><img src='img/rain.png'></td>
</tr>
<tr>
<td>제주도</td>
<td><img src='img/shine.png'></td><td><img src='img/shine.png'></td><td><img src='img/shine.png'></td>
<td><img src='img/rain.png'></td><td><img src='img/rain.png'></td><td><img src='img/rain.png'></td>
</tr>
</table>
</body>
</html>
728x90
반응형
'study > Html' 카테고리의 다른 글
| [Html] 4. 테이블과 폼양식 (폼 양식 : <form>, <input>, <select>, <option> ) (0) | 2022.04.04 |
|---|---|
| [Html] 4. 테이블과 폼양식 Exam1 (테이블의 행과 열 합치기 : <rowspan>, <colspan>) (0) | 2022.04.04 |
| [Html] 4. 테이블과 폼양식 (테이블 삽입하기 : <table>, <tr>, <td>, <th>) (0) | 2022.04.04 |
| [Html] 3. 멀티미디어와 링크 (새로운 탭으로 링크 걸기 : <target='_blank' >) (0) | 2022.04.04 |
| [Html] 3. 멀티미디어와 링크 (링크걸기 : <a>, href ) (0) | 2022.04.04 |