재유's

[HTML] 표 그리기 본문

IT Story/　: : HTML5

[HTML] 표 그리기

Stella_NY 2019. 1. 10. 15:24

<TABLE> </TABLE>

HTML에서 표를 만들때엔 TABLE 태그를 사용한다.


테이블의 기본 틀

<!-- 표의 영역 지정-->
<table border="굵기" width="넓이" align="left|center|right">

    <!-- 제목영역-->
    <thead> 
        <tr>        <!-- 행(줄)-->
            <th width="넓이" align="left|center|right" valign="top | middle | bottom"> <!-- 제목용도 -->
                ...내용...
            </th>
        </tr>
    </thead>

<!-- 내용영역-->
    <tbody>
        <tr>
            <td>    <!-- 내용용도 -->
                ...내용...
            </td>
        </tr>
    </tbody>

<!-- 하단영역-->
    <tfoot>
        <tr>
            <th>
                ...내용
            </th>
        </tr>
    </tfoot>

</table>

thead, tbody, tfoot은 영역 구분 용도로 사용하는데 영역구분이 모호할 경우 생략이 가능하다.

tr,th,td는 필요한 만큼 반복해서 사용이 가능하다.


테이블 태그 요소

태그

의미

 tr

 행

 th

 제목

 td

 칸



예를 들어

<table border="1" >
    <tr>
        <th> 제목
        </th>
    </tr>
    <tr>
        <td>일반셀1
        </td>
    </tr>
    <tr>
        <td>일반셀2
        </td>
    </tr>
</table>

라는 태그를 입력하면 ( border="1" 는 지정을 하지않으면 선이 보이지 않기때문에 지정한것ㅜ)

아래와 같은 표가 나온다.


제목
일반셀1
일반셀2



테이블 span

span은 셀병합으로 열병합 행병합이 있다.


열병합 : colspan

행병합 : rowspan


으로 표로 표현을 하면 아래와 같다.

rowspan

colspan

 

 

 

 



span은 셀의갯수로 지정할 수 있으며

<th rowspan="3" colspan="2">

rowspan="3" : 3개의 셀을 아래로 병합

colspan="2" : 2개의 셀을 옆으로 병합

여백설정

cellpadding : 칸과 내용 사이의 여백

cellspacing : 칸과 칸 사이의 여백

일반적으로 0으로 설정하여 모든 여택을 off시킨 상태로 사용한다.



저작자표시

'IT Story > 　: : HTML5' 카테고리의 다른 글

[CSS] CSS (StyleSheet)  (0) 2019.01.15
[HTML/JSP] 입력양식 FORM  (0) 2019.01.15
[HTML] 링크태그 <a>  (0) 2019.01.10
[HTML] 단락 나누기 2  (0) 2019.01.10
[HTML] 단락 나누기  (0) 2019.01.09
공유하기 링크
'IT Story/　: : HTML5' Related Articles more
Comments