HTML

03. 표 관련 태그 (html)

비보호신호등 2024. 8. 27. 17:17

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

표를 만들기 위한 태그 : <table>, <tr>, <td>, <tn>

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

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

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

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

border : 표의 테두리 두께

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

(기본적인 틀)

 

<h1>기본적인 표 만들기</h1>
    <table border="1"> <!--border속성 : 표에 테두리 두께-->
        <caption><b>휴대폰의 종류</b></caption>
        <tr>
            <th>모델명</th>
            <th>제조사</th>
            <th>홈페이지</th>
        </tr>
        <tr>
            <td>갤럭시</td>
            <td>삼성</td>
            <td>https://www.samsung.com/sec/</td>
        </tr>
        <tr>
            <td>아이폰</td>
            <td>애플</td>
            <td>https://www.apple.com/kr/</td>
        </tr>
        <tr>
            <td>픽셀</td>
            <td>구글</td>
        </tr>
    </table>

 

표의 행과 열을 합치는 속성

셀(th, td)태그의 속성을 이용해서 행 또는 열을 합칠 수 있음.

 

colspan = "2" : 2개의 열을 합치기

rowspan = "2" : 2개의 행을 합치기

 

<h3>이력서</h3>
    <table border="1">
        <tr>
            <td width="130" height="130" rowspan="2" colspan="2">사진</td>
            <td width="80">이름</td>
            <td width="200">OOO</td>
        </tr>
        <tr>
            <td>연락처</td>
            <td>010-0000-0000</td>
        </tr>
        <tr>
            <td width="70" height="50">주소</td>
            <td colspan="3">인천시 서구 xxx xxxx xxx xxx</td>
        </tr>
        <tr>
            <td width="130">자기소개</td>
            <td colspan="3">안녕하세요 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ
                ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ
                ㅇㅇㅇㅇㅇㅇㅇㅇㅇ
            </td>
        </tr>
    </table>