HTML 표를 만들어보자

Posted by ITPangPang
2016.07.03 17:19 웹(Web)/HTML


HTML 표를 

만들어보자




ㆍ HTML에서 나름 복잡한 표를 만들어보도록 하겠습니다.


ㆍ 사실 별게 없긴 한데 그나마 HTML에서 복잡한 편입니다.


ㆍ 표 꾸미는 부분은 CSS로 대부분 하기 때문에 기본적인

    틀 만드는 방법만 알아보도록 하겠습니다.



먼저 표를 만들기

위해서는 3가지 태그를

알아야합니다


<TABLE> ~ </TABLE>

<TR> ~ </TR>

<TD> ~ </TD>

먼저

<TABLE>

뜻 그대로 표입니다


표를 만들기 위해

먼저 BODY 부분에

<TABLE>을 추가시켜줍니다.

1
2
3
4
5
6
7
8
9
10
<html>
    <head>
        <title>ITPANGPANG</title>
    </head>
    <body>
        <table>
            ITPANGPANG
        </table>
    </body>
</html>
cs


여기 부분은 표를

만들겠다고

알려주기만 하는 부분이고


화면상에 표를

나타내기 위해서는

표의 border와

td를 넣어주어야 합니다


태그, 속성의

설명전에 먼저 코드를 보면

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <title>ITPANGPANG</title>
    </head>
    <body>
        <table border = "1">
            <td>
                ITPANGPANG
            </td>
        </table>
    </body>
</html>
cs


이렇게 구성됩니다.

border는 단어 느낌 그대로

테두리를 의미합니다.

테두리의 굵기를 1로 정해주었습니다.


다음 td

table data의 약자로

테이블의 들어가는 정보라는

뜻이겠죠


위의 코드를 돌린 결과물을

보면


위와 같이 표가

생성된 것을

확인 할 수 있습니다.


여기서 border만 "2"로 

바꿔보겠습니다

테두리의 굵기가

굵어진 것을 확인 할 수 있습니다.


이번에는 테이블의 

들어가는 정보를 몇개

더 추가해서 실행시켜보겠습니다

(td=table data)

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title>ITPANGPANG</title>
    </head>
    <body>
        <table border = "2">
            <td> ITPANGPANG </td> <td> ITPANGPANG2</td>
            <td> ITPANGPANG3 </td> <td> ITPANGPANG4</td>
        </table>
    </body>
</html>
cs


이런식으로 몇개 

더 추가해서 실행시켜 보면

데이터가 추가된 것을 확인할 수 있습니다.


마지막으로 이번에는

나름 표답게 보이기 위해서

행을 구분해보도록 하겠습니다


이를 위해서는

<TR>을 추가하여야 합니다

예상 하시는데로

TR은 Table Row입니다


TR을 추가해서 코드를

짜보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
        <title>ITPANGPANG</title>
    </head>
    <body>
        <table border = "2">
            <tr>
                <td> NAME </td> <td> AGE </td> <td> ID </td>
            </tr>
            <tr>
                <td> HONG </td> <td> 50 </td> <td> honghong</td>
            </tr>
        </table>
    </body>
</html>
cs


이런식으로 <tr>로 줄단위 

분리를 해주시고

<td>로 하나하나 

데이터를 넣어주시면

됩니다.


결과를 보면서 마무리하도록

하겠습니다.

저작자 표시 비영리 변경 금지
신고

'웹(Web) > HTML' 카테고리의 다른 글

Form(폼) 태그를 써보자  (0) 2016.07.31
HTML 표를 만들어보자  (0) 2016.07.03
HTML 리스트를 만들자(li, ul, ol)  (0) 2016.06.27
HTML에서 하이퍼링크 걸기  (1) 2016.06.19
HTML 기본구조 및 Hello World 출력하기  (1) 2016.06.18
이 댓글을 비밀 댓글로