민둥 개발자의 계발 블로그

HTML#4 정답 공개 및 추가 문제! 본문

Study/HTML

HTML#4 정답 공개 및 추가 문제!

민둥산의 민둥이 2022. 4. 18. 20:55

 안녕하세요! 저번 포스팅에는 꽤 많은 테이블이 올라와 있었기에 코드가 조금 길었죠? 

바로 공개하겠습니다! 따단~

들여 쓰기까지 꼬박꼬박 하다 보니 더 길어지는 것 같지만 실제로 타이핑은 몇 번 안 해도 됩니다. 테이블 태그들을 미리 만들어 두고 복붙 이용하세요!

복붙을 하지 않는 자 개발자가 되지 못할 지어다! -민둥산의 민둥이

<html>
 <head>
  <title>table -표</title>
  <style type="text/css">
   table, th, td{
   border:1px solid #e70;
   }
  </style>
 </head>
 <body>
 <hr>
 <h1>table -표</h1>
 <table>
  <tr>
   <th>tag </th>
   <th>설명 </th>
  </tr>

  <tr>
   <td>table </td>
   <td>표를 구성하는 태그</td>
  </tr>

  <tr>
   <td>tr</td>
   <td>줄을 구성하는 태그</td> 
  </tr>

  <tr>
   <td>th</td>
   <td>제목칸을 구성하는 태그<br>
    글자는 볼드체, 내용은 수평 중앙정렬 됨.
   </td>
  </tr>
 
  <tr>
   <td>td</td>
   <td>(일반)칸을 구성하는 태그 </td>
  </tr>

 </table>
 <br>

 <h3>세로형</h3>
 <table>
  <tr>
   <th>ID </th>
   <th>Name </th>
  </tr>

  <tr>
   <td>lhj23</td>
   <td>Lee hee ju</td>
  </tr>

  <tr>
   <td>jej456 </td>
   <td>Ju eun ji </td>
  </tr>

 </table>
  
 <br>
 
 <h3>가로형</h3>
 <table>
  <tr>
   <th>ID</th>
   <td>lhj23 </td>
   <td>jej456 </td>
  </tr>

  <tr>
   <th>Name</th>
   <td>Lee hee ju</td>
   <td>Ju eun ji</td>
  </tr>
 </table>

 <h4>문제. 표 만들기 - 1</h4>
 
 <table>
  <tr>
   <th>No.</th>
   <th>name</th>
   <th>id</th>
   <th>date</th>
  </tr>
  
  <tr>
   <td>01</td>
   <td>최민석</td>
   <td>lgs88</td>
   <td>2022.04.07</td> 
  </tr>

  <tr>
   <td>02</td>
   <td>최지윤</td>
   <td>kj044</td>
   <td>2022.04.07</td>  
  </tr>

  <tr>
   <td>03</td>
   <td>박진우</td>
   <td>hss77</td>
   <td>2022.04.07</td>  
  </tr>
 </table>

 <h4>문제. 표 만들기-2</h4>
  <table>
   <tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
   </tr>

   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
   </tr>

   <tr> 
    <td>4</td>
    <td>5</td>
    <td>6</td>  
   </tr>

   <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
   </tr>

   <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
   </tr>
  </table>
 
 <h2>칸(셀) 합치기</h2>
  <ul>
   <li><b>가로</b>로 합치기 - <b>colspan</b></li>
   <li><b>세로</b>로 합치기 - <b>rowspan</b></li>
  </ul>

 <h3>1.가로칸(셀) 합치기 - colspan="n"</h3>
 <table>
  <tr>
   <th colspan="3">Title</th>
  </tr>
 
  <tr>
   <td>a</td>
   <td>b</td>
   <td>c</td>
  </tr>

  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
 </table>
<br>

 <table>
  <tr>
   <th colspan="2">Title</th>
   <th>t</th>
  </tr>

  <tr>
   <td>a</td>
   <td>b</td>
   <td>c</td>  
  </tr>

  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>

 </table>
<br>
 <table>
 <tr>
   <th></th>
   <th colspan="2">Title</th>
  </tr>
 
  <tr>
   <td>a</td>
   <td>b</td>
   <td>c</td>
  </tr>

  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
 </table>
 
<h5>1.table-1</h5>
<table>
 <tr>
   <th>T</th>
   <th>i</th>
   <th>t</th>
  </tr>
 
  <tr>
   <td>a</td>
   <td colspan="2">bc</td>
  
  </tr>

  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
 </table>

<h5>1.table-2</h5>
<table>
 <tr>
   <th>T</th>
   <th>i</th>
   <th>t</th>
  </tr>
 
  <tr>
   <td colspan="2">ab</td>
   <td>c</td>
  </tr>

  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
 </table>

<h5>1.table-3</h5>
<table>
 <tr>
   <th>T</th>
   <th>i</th>
   <th>t</th>
  </tr>
 
  <tr>
   <td>a</td>
   <td>b</td>
   <td>c</td>
  </tr>

  <tr>
   <td colspan="3">123</td>
  </tr>
 </table>

<h5>1.table-4</h5>
<table>
 <tr>
   <th>T</th>
   <th>i</th>
   <th>t</th>
  </tr>
 
  <tr>
   <td colspan="3">abc</td>
  
  </tr>

  <tr>
   <td>1</td>
   <td colspan="2">23</td>

  </tr>
 </table>

<h3>2.세로칸(셀) 합치기 - rowspan="n"</h3>
<h5>2.table-1</h5>
 <table>
 <tr>
   <th rowspan="3">T<br>a<br>1</th>
   <th>i</th>
   <th>t</th>
  </tr>
 
  <tr>
   <td>b</td>
   <td>c</td>
  </tr>

  <tr>
   <td>2</td>
   <td>3</td>
  </tr>
 </table>

<h5>2.table-2</h5>
 <table>
 <tr>
   <th>T</th>
   <th>i</th>
   <th>t</th>
  </tr>
 
  <tr>
   <td>a</td>
   <td rowspan="2">b<br>2</td>
   <td>c</td>
  
  </tr>

  <tr>
   <td>1</td>
   <td>3</td>
  </tr>
 </table>

<h5>2.table-3</h5>
  <table>
 <tr>
   <th>T</th>
   <th>i</th>
   <th rowspan="3">t<br>c<br>3</th>
  </tr>
 
  <tr>
   <td>a</td>

   <td>c</td>
  
  </tr>

  <tr>
   <td>1</td>
   <td>2</td>

  </tr>
 </table>

<h5>2.table-4</h5>
  <table>
 <tr>
   <th>T</th>
   <th>i</th>
   <th rowspan="2">t<br>c</th>
  </tr>
 
  <tr>
   <td rowspan="2">a<br>1</td>
   <td>b</td>
  
  </tr>

  <tr>
   <td>2</td>
   <td>3</td>
  </tr>
 </table>

<h3>2.복합칸(셀) 합치기</h3>
 <table>
  <tr>
   <th colspan="4">문진표</th>
  </tr>

  <tr>
   <th rowspan="3">학생</th>
   <td>김미수</td>
   <th rowspan="3">체온</th>
   <td>36.5</td>
  </tr>

  <tr>
   <td>이수지</td>
   <td>37</td>
  </tr>

  <tr>
   <td>오수아</td>
   <td>34.3</td>
  </tr>

 </table>

 <h5>문제. 복합칸 합치기</h5>
 <table>
  <tr>
   <th colspan="4">아이티윌 게스트하우스 예약 안내</th>
  </tr>

  <tr>
   <th>방이름</th>
   <th>대상</th>
   <th>크기</th>
   <th>가격</th>
  </tr>

  <tr>
   <th>유채방></th>
   <td>여성 도미토리</td>
   <td rowspan="3">4인실</td>
   <td rowspan="4">1인 20,000원</td>
  </tr>

  <tr>
   <th rowspan="2">동백방</th>
   <td>남성 도미토리</td>
  </tr>

  <tr>
   <td>가족 1팀</td> 
  </tr>

  <tr>
   <th colspan="2">천혜향방</th>
   <td>2인실 </td>
  </tr>
  
  <tr>
   <td colspan="4"><b>바깥채 단독: 전화문의</b> (010-777-5454)</td>
  </tr>
 </table>
 
 </body>
</html>

 추가문제

이건 하셔도 되고 안 하셔도 됩니다만 조금 더 세세한 느낌으로 테이블을 한번 더 만들어 볼 수 있습니다!

자바 개발자반 시간표

자바 개발자반 시간표

자바 개발자반
오라클 웹표준 UI 애플리케이션
1교시
~
4교시		 특강
강사
홍길동		 1교시 1교시
2교시 2교시
3교시 3교시
4교시 4교시
5교시 5교시
~
8교시		 특강
강사
홍길순		 5교시
6교시 6교시
7교시 7교시
~
8교시 		특강
강사
김갑을
8교시
반응형
저작자표시 (새창열림)

'Study > HTML' 카테고리의 다른 글

HTML #5 이미지 태그!  (0) 2022.04.18
HTML 테이블 추가 문제 정답 공개!  (0) 2022.04.18
HTML#4 테이블 만들기!  (4) 2022.04.12
HTML 연습! 심심해서 직접 해보았습니다!  (2) 2022.04.11
HTML 태그#3 목록 태그 및 특수문자 출력!  (0) 2022.04.11
'Study/HTML' Related Articles more
Comments