본문

표를 만들어보자, TABLE 태그 - HTML 강좌



HTML 에 대해 정말 바닥부터 시원하게 설명을 듣고 싶으시다구요? http://donghoon.me/23 를 확인해 보세요!


이번 시간에는 HTML 에서 <TABLE> 태그의 역할에 대해 알아보도록 하겠습니다.


<TABLE> 태그


<TABLE> 태그는 한번 쯤 사용해보셨을 법한 워드나 한글의 표 기능, 엑셀이라고 보시면 쉽습니다. <TABLE> 태그는 표를 만들어 줍니다. ▼



<TABLE> 태그는 조금 복잡할 수도 있습니다, 안에 다양한 태그가 사용되기 때문인데요. 하나 하나 설명해 보도록 하겠습니다. <THEAD> 태그는 표에서 분류를 나타내는 첫 줄을 감싸는 태그 입니다. <TBODY> 태그는 첫 줄 외에 표에서 데이터들을 감싸는 태그입니다. <TR> 태그는 표에서 한 줄을 감싸는 태그입니다. <TH> 태그는 <THEAD> 안에 있는 하나의 셀을 나타냅니다. <TD> 태그는 <TBODY> 안에 있는 하나의 셀을 나타냅니다. 설명이 어렵다구요? 아래의 예제와 함께 보시죠. ▼



위의 결과물의 코드는 이와 같습니다. ▼


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 이 곳에는 사이트의 설정 등의 코드가 담기는 부분 입니다. -->
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>1</td>
                    <th>2</td>
                    <th>3</td>
                    <th>4</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
cs


이번 시간은 <TABLE> 의 역할과 어떻게 작성하면 되는지에 대해 알아보는 시간 이었습니다. 표에 테두리와 같은 요소들은 추후 CSS 를 배우면서 알아보도록 하겠습니다.


공유

댓글 2

  • 게스트 썸네일
    Good!
    2016.07.30 13:51 신고

    HTML강좌 덕분에 공부를 잘 할 수 있게 되었어요 ! 정말 감사합니다!

    • 게스트 썸네일
      2016.07.30 13:53 신고

      감사합니다! HTML 을 보다 깊게 배우고 싶으시다면 http://donghoon.me/23 글도 추천드리고 싶습니다.

      도움이 되셨다니 기쁩니다. :-)