[HTML] 표 관련 태그

표

• 문서에서 다량의 데이터를 정리해서 표현하고자 할 때 사용, 행과 열로 이루어져 있음
• table, tr, th, td 태그로 구성되어 있음

table 태그

• 기본적인 표를 생성해주는 태그

tr 태그

• 표의 한 행을 나타내는 태그

th 태그

• 표의 제목셀을 나타내는 태그
• 가운데정렬과 bold 효과가 적용

td 태그

• 표의 일반셀을 나타내는 태그\

caption 태그

• 테이블의 제목 추가
• 기본 위치는 테이블 상단

border 속성

• 표 테두리 두께 설정 (기본 두 줄)
• 테두리 한 줄만 나오게 하고자 할 때
  • border-collapse : collapse;

셀의 크기를 조정하는 속성 (width, height)

• width 속성 : 너비 조정 (한 열에 모두 영향을 끼침)
• height 속성 : 높이 조정 (한 행에 모두 영향을 끼침)

셀 병합 속성 (colspan, rowspan)

• colspan 속성 : 2개 열 합치기 (가로병합)
• rowspan 속성 : 2개 행 합치기 (세로병합)

테이블 내에 구조 나누기

• 머리부, 몸통부, 하단부로 구조를 나눌 수 있음
• css 영역이나 이벤트를 부여 할 때 영역을 한정적으로 나눌 때   유용
• thead, tbody, tfoot

출력 예시

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

 </table>