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(폼) 태그를 써보자 (1) | 2016.07.31 |
|---|---|
| HTML 리스트를 만들자(li, ul, ol) (0) | 2016.06.27 |
| HTML에서 하이퍼링크 걸기 (1) | 2016.06.19 |
| HTML 기본구조 및 Hello World 출력하기 (1) | 2016.06.18 |