HTML -4
2020. 6. 9. 12:30ㆍWeb(CSS)
| <html> |
| <head> |
| <title>html수업 3번째</title> |
| <style type="text/css"> |
| table, th, td { |
| border:1px solid #35a; |
| } |
| </style> |
| </head> |
| <body> |
| <hr> |
| <h1>table - 표 만들기</h1> |
| <hr> |
| <table> |
| <tr> |
| <th>table</th> |
| <td>표를 구성하는 태그</td> |
| </tr> |
| <tr> |
| <th>tr</th> |
| <td>줄을 구성하는 태그</td> |
| </tr> |
| <tr> |
| <th>th</th> |
| <td>제목칸을 구성하는 태그<br> |
| (글자는 볼드체, 컨텐츠의 정렬은 중앙) |
| </td> |
| </tr> |
| <tr> |
| <th>td</th> |
| <td>일반칸을 구성하는 태그</td> |
| </tr> |
| </table> |
| <table> |
| <tr> |
| <th>Company</th> |
| <th>Contact</th> |
| <th>Country</th> |
| </tr> |
| <tr> |
| <td>Alfreds Futterkiste</td> |
| <td>Maria Anders</td> |
| <td>Germany</td> |
| </tr> |
| <tr> |
| <td>Centro comercial Moctezuma</td> |
| <td>Francisco Chang</td> |
| <td>Mexico</td> |
| </tr> |
| <tr> |
| <td>Ernst Handel</td> |
| <td>Roland Mendel</td> |
| <td>Austria</td> |
| </tr> |
| </table> |
| <table> |
| <tr> |
| <th>Company</th> |
| <td>Alfreds Futterkiste</td> |
| <td>Centro comercial Moctezuma</td> |
| <td>Ernst Handel</td> |
| </tr> |
| <tr> |
| <th>Contact</th> |
| <td>Maria Anders</td> |
| <td>Francisco Chang</td> |
| <td>Roland Mendel</td> |
| </tr> |
| <tr> |
| <th>Country</th> |
| <td>Germany</td> |
| <td>Mexico</td> |
| <td>Austria</td> |
| </tr> |
| </table> |
| <hr> |
| <h1>cell(칸) 합치기</h1> |
| <hr> |
| <ol> |
| <li>colspan="n" 가로로 칸 합치기</li> |
| <li>rowspan="n" 세로로 칸 합치기</li> |
| </ol> |
| <hr> |
| <h2>colspan="n" 가로로 칸 합치기</h2> |
| <table> |
| <caption>코로나19 체온 체크</caption> |
| <tr> |
| <th>날짜</th> |
| <th>이름</th> |
| <th>체온</th> |
| <th>비고</th> |
| </tr> |
| <tr> |
| <td>2020.05.15</td> |
| <td>홍길동</td> |
| <td>36.5</td> |
| <td>정상</td> |
| </tr> |
| <tr> |
| <td>2020.05.15</td> |
| <td>홍길수</td> |
| <td>37.9</td> |
| <td>귀가</td> |
| </tr> |
| <tr> |
| <td>2020.05.15</td> |
| <td>홍동수</td> |
| <td>37.1</td> |
| <td>재확인 36.8</td> |
| </tr> |
| <tr> |
| <th>담당</th> |
| <td colspan="3"> </td> |
| </tr> |
| </table> |
| <br><br> |
| <table> |
| <caption>코로나19 체온 체크-2</caption> |
| <tr> |
| <th>날짜</th> |
| <th>이름</th> |
| <th>체온</th> |
| <th>비고</th> |
| </tr> |
| <tr> |
| <td>2020.05.15</td> |
| <td>홍길동</td> |
| <td>36.5</td> |
| <td>정상</td> |
| </tr> |
| <tr> |
| <td>2020.05.15</td> |
| <td>홍길수</td> |
| <td>37.9</td> |
| <td>귀가</td> |
| </tr> |
| <tr> |
| <td>2020.05.15</td> |
| <td>홍동수</td> |
| <td>37.1</td> |
| <td>재확인 36.8</td> |
| </tr> |
| <tr> |
| <th colspan="2">담당</th> |
| <td colspan="2"> </td> |
| </tr> |
| </table> |
| <h3>문제. 가로로 칸 합치기</h3> |
| <table> |
| <tr> |
| <th colspan="3">문진표</th> |
| </tr> |
| <tr> |
| <th>이름</th> |
| <td colspan="2">홍기자</td> |
| </tr> |
| <tr> |
| <th>체온</th> |
| <td>36.6</td> |
| <td>정상</td> |
| </tr> |
| </table> |
| <h3>문제. 가로로 칸 합치기</h3> |
| <table> |
| <tr> |
| <th>방향</th> |
| <th colspan="2">속성명</th> |
| </tr> |
| <tr> |
| <th>가로</th> |
| <td>colspan</td> |
| <td>( ="n") </td> |
| </tr> |
| <tr> |
| <th>세로</th> |
| <td>rowspan</td> |
| <td>( ="n") </td> |
| </tr> |
| <tr> |
| <th colspan="2">난이도</th> |
| <td>하</td> |
| </tr> |
| </table> |
| <hr> |
| <h2>rowspan="n" 세로로 칸 합치기</h2> |
| <table> |
| <tr> |
| <th colspan="2">칸 합치기</th> |
| </tr> |
| <tr> |
| <th>colspan</th> |
| <td rowspan="2">="n"</td> |
| </tr> |
| <tr> |
| <th>rowspan</th> |
| </tr> |
| </table> |
| <h3>문제. 세로로 칸 합치기</h3> |
| <table> |
| <tr> |
| <th rowspan="2">log-in</th> |
| <td>ID</td> |
| <td><input type="text"></td> |
| </tr> |
| <tr> |
| <td>PWD</td> |
| <td><input type="password"></td> |
| </tr> |
| </table> |
| <br><br> |
| <table> |
| <tr> |
| <th rowspan="3">출<br>결</th> |
| <th>성명</th> |
| <td rowspan="2">출석</td> |
| <th>비고</th> |
| </tr> |
| <tr> |
| <td>홍기수</td> |
| <td rowspan="2">귀가후<br>검진요</td> |
| </tr> |
| <tr> |
| <th>체온</th> |
| <td>39</td> |
| </tr> |
| </table> |
| <hr> |
| <h2>복합 칸 합치기</h2> |
| <table style="width:500px;"> |
| <tr> |
| <th colspan="4">tag</th> |
| </tr> |
| <tr> |
| <td colspan="2" style="width:250px;"> |
| 한 줄에 나란히 올 수 없음<br>크기 적용 가능 |
| </td> |
| <td colspan="2" style="width:250px;"> |
| 한 줄에 나란히 옴<br>크기 적용 불가 |
| </td> |
| </tr> |
| <tr> |
| <th rowspan="4">block</th> |
| <td>div</td> |
| <th rowspan="4">inline</th> |
| <td>span</td> |
| </tr> |
| <tr> |
| <td>p</td> |
| <td>b</td> |
| </tr> |
| <tr> |
| <td>hn(n=1~6)</td> |
| <td>a</td> |
| </tr> |
| <tr> |
| <td>ul</td> |
| <td>input</td> |
| </tr> |
| </table> |
| </body> |
| </html> |
이번엔 표를 만들어 보았다. 표를 만들면서 처음으로 CSS를 접했다. 조금 신기했는데 얼른 제대로 배워보고 싶은 마음이 들었다. 좀 더 예쁘게 만들고 싶은 마음이 크다.
표는 만들 때 조금 집중이 필요한것 같다. tr, td, th를 헷갈려서 빼먹거나 하지 않게 집중을 할 필요가 있는 것 같다.
칸 합치는 부분은 배울 때 재미있었다. 좀 더 복잡해지는 게 재미있을 것 같다.