본문 바로가기
HTML

[HTML] TABLE 태그 사용하여 입사지원서 만들기

by 동복이 2023. 2. 28.

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

관련글

티스토리툴바