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

 

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>

 

 

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

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

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."