[HTML] 표 관련 태그; 이력서 만들기

TIL: 스스로 이해한 것을 바탕으로 정리하였기에 오류가 있을 수 있습니다. 틀린 부분은 댓글로 알려주시면 감사하겠습니다.

 

 

 

 

표 

웹 문서에서 자료를 정리할 때 주로 사용

행과 열로 이루어져있다.

행과 열이 만나는 지점을 셀이라고 한다.

 

표를 구성하는 태그 : <table>, <tr>, <th>, <td>

 

 

 

표 관련 태그

태그	설명
<table> </table>	표를 생성해주는 태그
<table border="1"> </table>	border 속성 : 테두리 두께
<caption> </caption>	테이블의 제목 추가 (기본위치는 테이블 상단 중앙)
<tr> </tr>	표의 한 행을 나타내는 태그
<th> </th>	표의 제목셀을 나타내는 태그 => 글자 굵게, 가운데 정렬
<th width="100" height="100"> </th>	width 속성 : 가로 길이  /  height 속성 : 세로 길이
<td> </td>	표의 일반셀을 나타내는 태그
<td colspan="2" rowspan="3"> </td>	colspan="2" : 2개의 열 합치기 / rowspan="3" : 3개의 행 합치기
<figure> </figure>	테이블의 설명 혹은 이미지의 설명에 사용하는 태그
<thead style="background-color: red"> </thead> <tbody style="background-color: red"> </tbody><tfoot style="background-color: red"> </tfoot>	배경색 지정 (ex. red)

 

 

 

 

 

 

 

기본구조 (3행 2열)

<table>
       <tr>
              <th> </th>
              <th> </th>
       </tr>
       <tr>
              <th> </th>
              <th> </th>
       </tr>
</table>

 

 

 

 

 

 

기본적인 표 만들기 (4행 3열)

<table border="1"> 
       <caption>웹 브라우저 종류</caption>

       <tr>
             <th width="130" height="30">브라우저명</th>
             <th width="80">제조사</th>
             <th width="200">홈페이지</th>
       </tr>
       <tr>
             <th>인터넷 익스플로어</th>
             <th>MS</th>
             <th>http://www.마소.com</th>
       </tr>
       <tr>   
            <th>크롬</th> 
            <th>구글</th>
            <th>http://www.구글.com</th>
       </tr>
       <tr>
            <th>파이어폭스</th>
            <th>Mozila</th>
            <th>http://www.mozila.com</th>
       </tr>

</table>

 

 

 

 

 

 

표의 행과 열을 합치는 colspan / rowspan 속성을 이용해서 이력서 만들기

 

<h3>이력서</h3>   
     
<table border="1">
            <tr>
                <td colspan="2" rowspan="2" width="130" height="130">사진</td>
                <td width="80" height="30">이름</td>
                <td width="150" ></td>
            </tr>
            <tr>
                <td height = "30">연락처</td>
                <td></td>
            </tr>
            <tr>
                <td height="30">주소</td>
                <td colspan="3"> </td>
            </tr>
            <tr>
                <td height="130">자기소개</td>
                <td colspan="3"> </td>
            </tr>
</table>

 

 

 

 

 

 

테이블 내에 영역 잡기

 

테이블은 <thead> <tbody> <tfoot> 으로 영역을 잡을 수 있다.

(따로 영역을 잡지않은 부분은 tbody가 기본값)

 

 

<table border="1">
            <thead style="background-color: red;">
                <tr>
                    <th>이름</th>
                    <th>나이</th>
                    <th>주소</th>
                </tr>
            </thead>
            <tbody style="background-color: pink;">
                <tr>
                    <td>김개똥</td>
                    <td>20</td>
                    <td>서울시 관악구</td>
                </tr>
                <tr>
                    <td>박말순</td>
                    <td>10</td>
                    <td>경기도 남양주</td>
                </tr>
                <tr>
                    <td>박개동</td>
                    <td>50</td>
                    <td>서울시 동작</td>
                </tr>
            </tbody>
            <tfoot style="background-color: yellow;">
                <tr>
                    <th colspan="2"> 총 인원</th>
                    <td>3 명</td>
                </tr>
            </tfoot>
</table>

 

style속성은 위처럼 몸통부에 따로 기술해놓을수도 있고, 머리부에 

<style> 
        thead{
                 background-color: red; 
        }

로써 표현해줄 수 있다.