보통 스프레드시트나 워드프로세서에서 표를 만들던가 등등


문서를 다루는 프로그램에서 표를 다루게 되면 셀 합치기가 있습니다.



그것을 구현하는 방법에 대해서 다뤄보도록 하겠습니다.



셀을 합치기 위에서는 colspan, rowspan 두 가지의 속성을 이용합니다.


이 속성은 td 또는 th태그에 이용하면 됩니다.




예제를 통해서 보도록 하겠습니다.


<!DOCTYPE html>


<html lang="ko">

<head>

    <meta charset="utf-8" />

    <title>테이블 태그</title>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th colspan="2">음식별 종류</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td rowspan="3">과일</td>

                <td>복숭아</td>

            </tr>

            <tr>

                <td>사과</td>

            </tr>

            <tr>

                <td>포도</td>

            </tr>

            <tr>

                <td rowspan="2">육류</td>

                <td>닭고기</td>

            </tr>

            <tr>

                <td>돼지고기</td>

            </tr>

        </tbody>

    </table>

</body>

</html>


이에 대한 출력 결과 입니다.


음식별 종류
과일 복숭아
사과
포도
육류 닭고기
돼지고기



다음과 같이 출력이 됩니다.


td태그에 colspan 태그에 값 만큼 오른쪽으로 칸을 더 차지하고,

td태그에 rowspan 태그에 값 만큼 아래쪽으로 칸을 더 차지하는 것 입니다.






셀 합치기를 통해서 표를 작성하게 되면 조금 더 복잡해져서 우선 표를 그려놓고 이를 차근차근히 소스로 구현을 해야할 것 입니다.


생각나는 표를 그대로 바로 옮기려고 하면 당장은 힘들 수 있으니,


여기선 어떤 속성을 넣고 여기는 어떤 속성을 넣어서 하면 되겠다~ 라는 것을 미리 짜놓으신 다음에


소스로 옮겨가면서 연습하시는 편이 좋습니다!

'프로그래밍 > HTML5' 카테고리의 다른 글

[HTML5] 오디오 태그  (0) 2016.08.05
[HTML5] 공간 분할 태그  (0) 2016.07.26
[HTML5] 테이블 태그 (2) - 셀 합치기  (0) 2016.07.26
[HTML5] 테이블 태그 (1) - 기본  (0) 2016.07.22
[HTML5] 주석 달기  (3) 2016.07.20
[HTML5] 목록 태그  (0) 2016.07.20

댓글 작성