HTML 03. 테이블관련 태그

- 표 : 웹문서에서 자료를 정리할 때 자주 사용, 행과 열로 이루어져 있고 행과열이 만나는 지점을 "셀"이라고 함

<table></table> : 기본적인 표를 생성해주는 태그

<tr> </tr> : 표의 한행을 나타내는 태그

<th></th> : 표의 제목 셀을 나타내는 태그 => 글자 굵게, 가운데 정렬됨

<td></td> : 표의 일반 셀을 나타내는 태그 

1. 기본적인 표만들기

 <table border="1"> <!--border속성 : 표의 테두리 두께-->
            <!-- caption :테이블의 제목을 추가하는 태그(기본 위치 : 표 위쪽 가운데)-->
            <caption><b>웹브라우저의 종류</b></caption>

            <tr>
               <th width="120px" height="50">브라우저명</th>
               <th width="80">제조사</th>
               <th width="300">홈페이지</th> 
            </tr>

            <tr>
                <td>Internet Explorer</td>
                <td>MS</td>
                <td>http://www.microsoft.com</td>
            </tr>

            <tr>
                <td>Chrome</td>
                <td>Google</td>
                <td>http://wwww.google.com</td>
            </tr>

            <tr>
                <td>Safari</td>
                <td>Apple</td>
                <td>http://www.apple.com</td>
            </tr>
</table>

웹브라우저의 종류

브라우저명	제조사	홈페이지
Internet Explorer	MS	http://www.microsoft.com
Chrome	Google	http://wwww.google.com
Safari	Apple	http://www.apple.com

<figure> <figcaption> :테이블의 설명 또는 이미지의 설명할때 주로 사용 

 <figure>
     <figcaption>테이블의 설명 또는 이미지의 설명 표현할때 주로 사용 </figcaption>
     <figcaption>설명의 내용을 여러줄로 표기할 수도 있음</figcaption>
</figure>

테이블의 설명 또는 이미지의 설명 표현할때 주로 사용

설명의 내용을 여러줄로 표기할 수도 있음

 

2. 표의 행과 열을 합치는 속성 

- colspan : 열 합치기
- rowspan : 행 합치기 

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

            </tr>
        </table>

 

이력서

사진		이름
		연락처
주소
자기소개

 

 

3. 테이블내 구조 나누기 

<thead> : 테이블 제목행
<tbody> : 테이블 내용
<tfoot> : 테이블 마지막행의 소계

 <table border="1">
            <thead>
                <tr>
                    <th>이름</th>
                    <th>나이</th>
                    <th>주소</th>
                </tr>
            </thead>
            
            <tbody id = "tt">
                <tr>
                    <td>홍길동</td>
                    <td>23</td>
                    <td><button>서울</button></td>
                </tr>

                <tr>
                    <td>김말똥</td>
                    <td>30</td>
                    <td><button>부산</button></td>
                </tr>

                <tr>
                    <td>김개순</td>
                    <td>32</td>
                    <td><button>광주</button></td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <th colspan = "2">총인원</th>
                    <td align="center">3명</td>
                </tr>
            </tfoot>
        </table>

이름	나이	주소
홍길동	23
김말똥	30
김개순	32
총인원		3명