HTML & CSS

준비중..

HTML & CSS

웹 페이지 만들기!

03 테이블 추가하기

# 표 만들기 이번 장에서는 표를 만들어보도록 합시다. ### 테이블의 기본 요소 표(table)는 자료들을 행과 열로 나타냅니다. ![](https://www.dropbox.com/s/sl0fxqu7703yzob/0301.png?dl=1) 표를 만들기 위한 기본 구성요소는 아래와 같습니다. + `<table>` + `<tr>` + `<td>` 위의 2행 3열 테이블을 만들어 봅시다. ``` <table> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> <tr> <td>Four</td> <td>Five</td> <td>Six</td> </tr> </table> ``` ### 테이블 행(row)과 데이터(data) 표는 `<table>`태그를 선언함으로써 만들어 집니다. ``` <table> ... </table> ``` `<tr>`태그는 테이블의 행(row)을 의미합니다. 아래는 2개의 행으로 이루어진 테이블 코드입니다. ``` <table> <tr></tr> <tr></tr> </table> ``` 각 행(row)은 여러개의 데이터(data)를 가질 수 있습니다. 이러한 데이터는 `<td>`태그를 사용하여 표현합니다. 위의 코드에 데이터들을 추가하여 볼까요? 각 행당 3개의 데이터를 넣어봅시다. ``` <table> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> <tr> <td>Four</td> <td>Five</td> <td>Six</td> </tr> </table> ``` ![](https://www.dropbox.com/s/kff4grn26yqzomz/0302.png?dl=1) 테이블의 선이 나타나지 않는다구요? 아래와 같이 코드를 추가해줍시다. ``` <table border="1px"> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> <tr> <td>Four</td> <td>Five</td> <td>Six</td> </tr> </table> ``` 1픽셀(pixel) 굵기의 선이 생겼습니다!! ![](https://www.dropbox.com/s/sl0fxqu7703yzob/0301.png?dl=1) 이번에는 3행 2열의 테이블을 만들어 볼까요? ``` <table border="1px"> <tr> <td>광복절</td> <td>8월 15일</td> </tr> <tr> <td>개천절</td> <td>10월 3일</td> </tr> <tr> <td>크리스마스</td> <td>12월 25일</td> </tr> </table> ``` ![](https://www.dropbox.com/s/wku8aifdx7gtnrq/0303.png?dl=1)