[HTML5[ <table> 태그

<table> 태그


1. 표란?

table, 표는 데이터를 일목요연하게 표현하기 위한 방법이다.


2. 문법(Syntax)

<table>

    <tr>

       <th>제목</th>

    </tr>

    <tr>

       <td>데이터</td>

    </tr>

</table>


3. 설명(Description)

- 데이터를 구조화할 때 사용됨

- 레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css등을 이용

- th는 데이터 그룹의 제목에 해당함 (header cells)

- td는 th에 속하는 데이터 그룹 (standard cells)


4. 예제(Example)

example1.html - 테이블은 행(tr) 안에 열(td)가 포함되는 형식을 가지고 있다. 아래 예제에서 tr은 3행을 의미하고, 각각의 행은 3개의 td를 가지면서 3개의 열을 표현하고 있다. 

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <table border="1">// 표는 table로 시작

            <tr>//tr로 한줄씩 만든다.

                <td>이름</td><td>성별</td><td>나이</td>

            </tr>

            <tr>

                <td>최진혁</td><td>남</td><td>6</td>

            </tr>

            <tr>

                <td>최유빈</td><td>여</td><td>2</td>

            </tr>

        </table>

    </body>

</html>


example2.html - <th>는 제목을 의미한다. 아래 예제는 이름, 성별, 나이를 제목으로 표현하는 방법을 보여준다. 

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <table border="1">

            <tr>

                <th>이름</th><th>성별</th><th>나이</th>//th은 각각의 contents의 제목에 해당한다.

            </tr>

            <tr>

                <td>최진혁</td><td>남</td><td>6</td>

            </tr>

            <tr>

                <td>최유빈</td><td>여</td><td>2</td>

            </tr>

        </table>

    </body>

</html>


example3.html - 행을 병합하고 싶다면 rowspan 속성을 사용한다.

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <table border="1">

            <tr>

                <th>이름</th><th>성별</th><th>나이</th>

            </tr>

            <tr>

                <td>최진혁</td><td>남</td><td rowspan="2">비공개</td>//row:행, span: 묶는다.(통합한다.)--> 두개의 행을 하나의 행으로 묶는다.--> 병합될 대상은 다음행을 말한다.

            </tr>

            <tr>

                <td>최유빈</td><td>여</td>

            </tr>

        </table>

    </body>

</html>


example4.html - 열을 병합하고 싶다면 colspan을 사용한다. 

<!DOCTYPE html>

<html>

    <body>

        <table border="1">

            <tr>

                <th>이름</th><th>성별</th><th>나이</th>

            </tr>

            <tr>

                <td>최진혁</td><td colspan="2">비공개</td>// 두개의 열을 하나의 박스로 묶는다.

            </tr>

            <tr>

                <td>최유빈</td><td>여</td><td>2</td>

            </tr>

        </table>

    </body>

</html>



'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5] <a> 태그  (0) 2014.12.21
[HTML5] <input> 태그  (0) 2014.12.21
[HTML5] <form> 태그_GET과 POST  (0) 2014.12.21
[HTML5] <form> 태그 2  (0) 2014.12.20
[HTML5] <form> 태그 1  (0) 2014.12.20