04. table tag (표 관련 태그, 테이블 관련 태그)

HTML_VSC

04. table tag (표 관련 태그, 테이블 관련 태그)

76beny 2022. 6. 10. 21:29

Table tag : - 웹문서에서 Table 형태로 자료를 정리하기 위해 사용되는 태그

- 행과 열로 구성되어 있고, 만나는 지점을 셀이라 한다.

- 테이블을 지칭하는 태그로 가장 밖에 선언된다.

tr tag / td tag

- tr : 한개의 행(row)을 나타내는 태그
- td : 한개의 열을 나타는 태그

    <table>
        <tr>
            <td>홍길동</td>
            <td>23살</td>
        </tr>
        <tr>
            <td>김길동</td>
            <td>31살</td>
        </tr>
    </table>

border 속성

- border속성 : 테이블의 테두리의 굵기를 조절해주는 속성(향후에는 사용하지 말것!)

    <table border="1px">
        <tr>
            <td>최길동</td>
            <td>23살</td>
            <td>010-1234-5678</td>
        </tr>
        <tr>
            <td>김길동</td>
            <td>42살</td>
            <td>010-4321-5678</td>
        </tr>
    </table>

caption 속성

- caption속성 : 테이블의 제목을 지정하는 태그

    <table border="1px">
        <caption>회원정보</caption>
        <tr>
            <td>최길동</td>
            <td>23살</td>
            <td>010-1234-5678</td>
        </tr>
        <tr>
            <td>김길동</td>
            <td>42살</td>
            <td>010-4321-5678</td>
        </tr>
    </table>

th tag

- th 태그 : 테이블의 제목셀을 지정하는 태그

<table border="1px">
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>전화번호</th>
        </tr>

        <caption>회원정보</caption>
        <tr>
            <td>최길동</td>
            <td>23살</td>
            <td>010-1234-5678</td>
        </tr>
        <tr>
            <td>김길동</td>
            <td>42살</td>
            <td>010-4321-5678</td>
        </tr>
    </table>

colspan 속성

-colspan : 열병합 속성

    <table border="1px">
        <tr>
            <td>안녕</td>
            <td>하이</td>
        </tr>
        <tr>
            <td colspan="2">안녕하세요?</td>
        </tr>
    </table>

rowspan 속성

- rowspan : 행 병합 속성

 <table border="1px">
        <tr>
            <td rowspan="3">안녕</td>
            <td>하이</td>
        </tr>
        <tr>
            <td>안녕</td>
            <td>하이</td>
        </tr>
        <tr>
            <td>안녕</td>
            <td>하이</td>
        </tr>
    </table>

align 속성

- align 속성 : 테이블 전체를 정렬해주는 순서

<table border="1px" align="center">
        <tr>
            <td>최길동</td>
            <td>23살</td>
            <td>010-1234-4567</td>
        </tr>
        <tr>
            <td>김길동</td>
            <td>42살</td>
            <td>010-4312-4567</td>
        </tr>
    </table>
    
    
<table border="1px" align="right">
        <tr>
            <td>최길동</td>
            <td>23살</td>
            <td>010-1234-4567</td>
        </tr>
        <tr>
            <td>김길동</td>
            <td>42살</td>
            <td>010-4312-4567</td>
        </tr>
    </table>

style 속성

style : css 속성(스타일)을 걸수 있는 속성
-width : 너비
-heigth : 높이
-text-align : 텍스트 내용의 정렬
-border : 테두리 굵기

 <table border="1px" style="width: 400px; height: 40; text-align: center; border: black solid 1px">
        <tr>
            <td>최길동</td>
            <td>23살</td>
            <td>010-1234-4567</td>
        </tr>
        <tr>
            <td>김길동</td>
            <td>42살</td>
            <td>010-4312-4567</td>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>21살</td>
            <td>010-4312-4567</td>
        </tr>
    </table>

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우