03 _HTML (표관련태그)

학습에 사용한 html 파일

03_표관련태그.html

0.01MB

 

표관련태그 

 

표만들기

 

구현할 표 

사용한 코드

 

 

 

표의 행과 열을 합치는 속성

 

colspan - 2개의 열 합치기

rowspan - 2개의 행 합치기

 

ex) 

tr = 표의 한 행을 나타내는 태그

td = 표의 한 행에 몇칸으로 나눌것인지라고 이해하면 쉽다.

 

1) colspan

           

<table border="1">

        <thead style="background-color: white;">

            <tr>

                <td width="30" height="30"></td>

                <td width="30" height="30"></td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td width="30" height="30"></td>

                <td width="30" height="30"></td>

            </tr>

        </tbody>

        <tfoot>

            <tr style="background-color: white;">

                <td width="30" height="30"></td>

                <td width="30" height="30"></td>

            </tr>

        </tfoot>

    </table>>

 

위와 같은 코드 작성시 아래와 같은 표가 만들어지는데 ( 2열3행)

 

1행의 2칸을 묶고 싶다면 colspan = "2"을 사용하여 td를 묶으면 되고

묶은뒤  해당 행에 포함된 td갯수를 지워주면 된다.

 

하나의 tr에 td는 2개 였지만 colspan으로 묶었기 때문에 아래 td는 제거

결과

2)rowspan

 <table border="1">

      <tbody>

            <tr>

                <td width="30" height="30">td</td>

                <td width="30" height="30">td</td>

            </tr>

            <tr>

                <td width="30" height="30">td</td>

                <td width="30" height="30">td</td>

            </tr>

            <tr style="background-color: white; color: black;">

                <td width="30" height="30">td</td>

                <td width="30" height="30">td</td>

            </tr>

       </tbody>

    </table>>

 

위와 같은 코드 작성시 아래와 같은 표가 만들어지는데 ( 2열3행)

 

아래와 같이 행마다 첫번째 위치하는 td들을 병합하고 싶을 땐 rowspan="3" 을 이용하면된다.

쉽게 td로 rowspan은 아래로 colspan은 가로로 병합한다고 생각하면 된다.

첫번째 tr에 위치하는 td (1행 1열) 에 rowspan="위치하는 td로부터  병합할 행의 갯수" 를 입력하고

tr마다 위치하는 td의 갯수를 줄여줘야한다.

 

 

※ 만약 테이블을 thead/tbody/tfoot 으로 나눈경우 각 태그별 conspan과 rowspan은 적용되나 

thead가 tbody까지 영향을 미치진 못한다.