HTML/ [HTML] TABLE 태그 사용하여 입사지원서 만들기
2023-02-28 20:07:27

TABLE 태그

table 태그는 표를 간편하게 만들기 위해 사용 하는 태그로 웹페이지에 표를 쉽고 빠르게 만들수 있게 해준다.

간단하게 작성한 코드를 보며 이해해보자.

 

소스 코드

  • col 태그는 테이블에서 가로를 의미하며 가로폭을 100px로 고정
  • tr 태그는 세로를 의미하며 border: 1px solid black 속성은 표의 테두리를 꾸미기 위한 속성으로 1px의 solid 타입의 검은색 테두리를 나타내줌
  • th 태그는 헤더 셀로 내용 작성시 굵은 폰트와 가운데 정렬 되는 것이 특징
  • td 태그는 데이터 셀로 일반적인 데이터를 작성할때 사용
<body>
  <table>
    <col style="width: 100px;">
    <col style="width: 100px;">
    <col style="width: 100px;">
    <tr style="height: 100px;">
      <th style="border:1px solid black;">번호</th>
      <th style="border:1px solid black;">이름</th>
      <th style="border:1px solid black;">주소</th>
    </tr>
    <tr style="height: 100px;">
      <td style="border:1px solid black;">1</td>
      <td style="border:1px solid black;">2</td>
      <td style="border:1px solid black;">3</td>
    </tr>
    <tr style="height: 100px;">
      <td style="border:1px solid black;">1</td>
      <td style="border:1px solid black;">2</td>
      <td style="border:1px solid black;">3</td>
    </tr>
    <tr style="height: 100px;">
      <td style="border:1px solid black;">1</td>
      <td style="border:1px solid black;">2</td>
      <td style="border:1px solid black;">3</td>
    </tr>
  </table>
</body>

 

결과

 

가로3 세로4의 간단한 표가 생성되고 th 태그와 td 태그의 차이를 볼 수 있다.

 

colspan, rowspan을 활용한 표 작성

위에 작성한 표처럼 하나당 하나의 셀만 가능하게 표현이 되지만 가로 2칸을 한칸으로 하거나 세로 2칸은 한칸으로 표현 할 수 있는 colspan과 rowspan 속성이 있어 다른 형식으로도 표현이 가능하다.

 

소스 코드

  • rowspan="2" 속성을 사용하여 가로 2칸을 사용
  • colspan="2" 속성을 사용하여 세로 2칸 사용
  • rowspan과 colspan은 실제로 병합되는 것이 아닌 칸수를 차지하는 것으로 상황에 맞게 사용해야 함
<body>  
  <table>
    <col style="width: 100px;">
    <col style="width: 100px;">
    <col style="width: 100px;">
    <tr style="height: 100px;">
      <th style="border:1px solid black;">번호</th>
      <th style="border:1px solid black;">이름</th>
      <th style="border:1px solid black;">주소</th>
    </tr>
    <tr style="height: 100px;">
      <td style="border:1px solid black;">1</td>
      <td rowspan="2" style="border:1px solid black;">2</td>
      <td style="border:1px solid black;">3</td>
    </tr>
    <tr style="height: 100px;">
      <td style="border:1px solid black;">1</td>
      <td style="border:1px solid black;">3</td>
    </tr>
    <tr style="height: 100px;">
      <td style="border:1px solid black;">1</td>
      <td colspan="2" style="border:1px solid black;">2</td>
    </tr>
  </table>
</body>

 

결과

 

TABLE 태그를 활용한 입사지원서 양식 작성하기

인터넷에 떠돌아 다니는 입사지원서 양식을 table 태그로 작성하여 실습해보자.

 

소스 코드

  • 입사지원서 양식의 가로 폭을 1000px로 고정
  • table style에 border-collapse: collapse 속성은 표를 작성할때 조금씩 떨어져있는 칸들을 합쳐주는 속성
  • background-color: #cccccc 속성은 뒤 배경에 #cccccc 색을 입혀주는 속성
  • text-align: left 속성은 글자를 왼쪽으로 정렬 해주는 속성으로 left, center, right가 주로 쓰임
<body>
  <div style="width: 1000px;"> 

    <!-- 입사지원서 머리 -->
    <div>
      <table style="border:1px solid black;border-collapse: collapse;width: 100%;height: 120px;text-align: center;">
        <col style="width: 800px;">
        <col style="width: 40px;">
        <col style="width: 160px;">
        <tr>
          <th rowspan="2"><h1>입 사 지 원 서</h1></th>
          <th rowspan="2" style="background-color: #cccccc;border: 1px solid black;">지원분야</th>
          <td style="border: 1px solid black;text-align: left;">1.</td>
        </tr>
        <tr>
          <td style="border: 1px solid black;text-align: left;">2.</td>
        </tr>
      </table>
    </div> <br>
    
    <!-- 인적사항 -->
    <div>
      <table style="border-collapse: collapse;text-align: center;width: 100%;height: 180px;">
        <col style="width: 150px;border:1px solid black;">
        <col style="width: 50px;border: 1px solid black;">
        <col style="width: 50px;border: 1px solid black;">
        <col style="width: 60px;border: 1px solid black;">
        <col style="width: 270px;border: 1px solid black;">
        <col style="width: 150px;border: 1px solid black;">
        <col style="width: 270px;border: 1px solid black;">
        <tr>
          <th rowspan="6" style="border: 1px solid black;"></th>
          <th rowspan="6" style="border: 1px solid black;text-align: center;background-color: #cccccc;">인 <br> 적 <br> 사 <br> 항</th>
          <td rowspan="2" style="border: 1px solid black;">성명</td>
          <td style="border: 1px solid black;">한문</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">주민번호</td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr>
          <td style="border: 1px solid black;">한자</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">생년월일</td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr>
          <td colspan="2" style="border: 1px solid black;">현 주 소</td>
          <td colspan="3" style="border: 1px solid black;"></td>
        </tr>
        <tr>
          <td colspan="2" style="border: 1px solid black;">본   적</td>
          <td colspan="3" style="border: 1px solid black;"></td>
        </tr>
        <tr>
          <td colspan="2" style="border: 1px solid black;">E-Mail</td>
          <td colspan="3" style="border: 1px solid black;"></td>
        </tr>
        <tr>
          <td colspan="2" style="border: 1px solid black;">자택전화</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">휴 대 폰</td>
          <td style="border: 1px solid black;"></td>
        </tr>
      </table>
    </div> <br>
    
    <!-- 학력사항 -->
    <div>
      <table style="border: 1px solid black;width: 100%;border-collapse: collapse;text-align: center;">
        <col style="border: 1px solid black;width: 50px;">
        <col style="border: 1px solid black;width: 225px;">
        <col style="border: 1px solid black;width: 225px;">
        <col style="border: 1px solid black;width: 150px;">
        <col style="border: 1px solid black;width: 250px;">
        <col style="border: 1px solid black;width: 100px;">
        <tr style="height: 25px;">
          <th rowspan="5" style="border: 1px solid black;background-color: #cccccc;">학 <br> 력 <br> 사 <br> 항</th>
          <td style="border: 1px solid black;">학 교 명</td>
          <td style="border: 1px solid black;">재 학 기 간</td>
          <td style="border: 1px solid black;">전 공</td>
          <td style="border: 1px solid black;">주간/야간</td>
          <td style="border: 1px solid black;">소재지</td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
      </table>
    </div> <br>
    
    <!-- 경력사항 -->
    <div>
      <table style="border: 1px solid black;width: 100%;border-collapse: collapse;text-align: center;">
        <col style="border: 1px solid black;width: 50px;">
        <col style="border: 1px solid black;width: 225px;">
        <col style="border: 1px solid black;width: 225px;">
        <col style="border: 1px solid black;width: 150px;">
        <col style="border: 1px solid black;width: 250px;">
        <col style="border: 1px solid black;width: 100px;">
        <tr style="height: 25px;">
          <th rowspan="5" style="border: 1px solid black;background-color: #cccccc;">경 <br> 력 <br> 사 <br> 항</th>
          <td style="border: 1px solid black;">직 장 명</td>
          <td style="border: 1px solid black;">근 무 기 간</td>
          <td style="border: 1px solid black;">근무부서</td>
          <td style="border: 1px solid black;">담당업무</td>
          <td style="border: 1px solid black;">퇴직사유</td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
      </table>
    </div> <br>
    
    <!-- 자격증 -->
    <div>
      <table style="border: 1px solid black;width: 100%;border-collapse: collapse;text-align: center;">
        <col style="border: 1px solid black;width: 50px;">
        <col style="border: 1px solid black;width: 180px;">
        <col style="border: 1px solid black;width: 100px;">
        <col style="border: 1px solid black;width: 180px;">
        <col style="border: 1px solid black;width: 150px;">
        <col style="border: 1px solid black;width: 240px;">
        <col style="border: 1px solid black;width: 100px;">
        <tr style="height: 25px;">
          <th rowspan="5" style="border: 1px solid black;background-color: #cccccc;">자 <br> 격 <br> 증</th>
          <td style="border: 1px solid black;">자격명</td>
          <td style="border: 1px solid black;">취득일자</td>
          <td style="border: 1px solid black;">발급기관</td>
          <td style="border: 1px solid black;">자격명</td>
          <td style="border: 1px solid black;">취득일자</td>
          <td style="border: 1px solid black;">발급기관</td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
      </table>
    </div> <br>
    
    <!-- 가족사항 및 능력 사항 -->
    <div>
      <table style="border: 1px solid black;width: 100%;text-align: center;border-collapse: collapse;">
        <col style="border: 1px solid;width: 50px;">
        <col style="border: 1px solid;width: 80px;">
        <col style="border: 1px solid;width: 165px;">
        <col style="border: 1px solid;width: 80px;">
        <col style="border: 1px solid;width: 165px;">
        <col style="border: 1px solid;width: 80px;">
        <col style="border: 1px solid;width: 80px;">
        <col style="border: 1px solid;width: 80px;">
        <col style="border: 1px solid;width: 140px;">
        <col style="border: 1px solid;width: 80px;">
        <tr style="height: 25px;">
          <th rowspan="6" style="border: 1px solid black;background-color: #cccccc;">가족 <br> 사항</th>
          <td style="border: 1px solid black;">관계</td>
          <td style="border: 1px solid black;">성명</td>
          <td style="border: 1px solid black;">연령</td>
          <td style="border: 1px solid black;">직업</td>
          <td style="border: 1px solid black;">동거</td>
          <th rowspan="6" style="border: 1px solid black;background-color: #cccccc;">능 <br> 력 <br> 사 <br> 항</th>
          <td rowspan="4" style="border: 1px solid black;">Q <br> A <br> 사 <br> 활</td>
          <td colspan="2" style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td rowspan="2" style="border: 1px solid black;">외국</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;"></td>
        </tr>
      </table>
    </div> <br>
    
    <!-- 기타사항 및 병역사항 -->
    <div>
      <table style="border-collapse: collapse;text-align: center;">
        <col style="border: 1px solid black;width: 50px;background-color: #cccccc;">
        <col style="border: 1px solid black;width: 120px;">
        <col style="border: 1px solid black;width: 180px;">
        <col style="border: 1px solid black;width: 90px;">
        <col style="border: 1px solid black;width: 180px;">
        <col style="border: 1px solid black;width: 80px;">
        <col style="border: 1px solid black;width: 130px;">
        <col style="border: 1px solid black;width: 170px;">
        <tr style="height: 25px;">
          <th rowspan="5" style="border: 1px solid black;">기 <br> 타 <br> 사 <br> 항</th>
          <td style="border: 1px solid black;">거주형태</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">신  장</td>
          <td style="border: 1px solid black;"></td>
          <th rowspan="5" style="border: 1px solid black;background-color: #cccccc;">병 <br> 역 <br> 사 <br> 항</th>
          <td style="border: 1px solid black;">구  분</td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;">종  교</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">체  중</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">군  별</td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;">취  미</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">시  력</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">계  급</td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;">특  기</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">혈액형</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">기  간</td>
          <td style="border: 1px solid black;"></td>
        </tr>
        <tr style="height: 25px;">
          <td style="border: 1px solid black;">결혼여부</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">과외활동</td>
          <td style="border: 1px solid black;"></td>
          <td style="border: 1px solid black;">면제사유</td>
          <td style="border: 1px solid black;"></td>
        </tr>
      </table>
    </div>

    <!-- 맺은말 -->
    <div style="text-align: center;">
      <h3>본인은 상기 기록이 사실임을 확인합니다.</h3>
      <h3>20     년     월     일     작성자 : </h3>
    </div>
  </div>
  
</body>
</html>

 

결과

 

 

 

728x90

'HTML' 카테고리의 다른 글

[HTML] input을 활용한 메뉴 탭 만들기  (0) 2023.03.07
[HTML] A태그와 IMG태그를 활용하여 LIST 실습  (0) 2023.02.28
[HTML] 태그 및 VScode 단축키 정리  (0) 2023.02.27

티스토리툴바