글
표만들기 기초
HTML
2011. 7. 14. 19:20
안녕하세요?
지난번에는 글자색을 바꾸는 법을 배워봤습니다. 오늘은 대망의 표만들기를 배워보도록 하겠습니다. 왜 대망의 라고 하는가하면 이 표만들기가 아주 중요하기 때문입니다. 웹페이지를 돌아다니다보면 마치 글자들이 정렬된듯이 아주 잘 짜여져 있는 것을 보는데 이게 다 표를 이용해서 글자를 정렬하기 때문입니다. 웹페이지의 거의 모든 레이아웃(구성)은 표로 이루어져 있다고 봐도 무방합니다. 그럼 표는 어떻게 만드는지 알아볼까요?
먼저 표를 하나 그려볼까요?
이 표는 어떻게 만들까요? 바로 <TABLE>이라는 태그로 만듭니다. 위와 같이 만들려면
<TABLE>
<TR>
<TD>1행1열</TD>
<TD>1행2열</TD>
</TR>
<TR>
<TD>2행1열</TD>
<TD>2행2열</TD>
</TR>
</TABLE>
이렇게 해주면 됩니다. 그럼 하나하나 설명해드리겠습니다. 먼저 <TABLE>은 표라는 뜻이죠? 그래서 표를 만들겠다라는 뜻입니다. 표에는 행과 열이 있습니다. 세로가 행이고 가로가 열입니다. 그래서 <TR>로 행을 먼저 생성하고 <TD>로 열을 하나씩 늘려가는 겁니다. 즉, <TR>은 행을 추가하는 태그이고 <TD>는 그추가한 행에 열들을 추가하는 것입니다. 그럼 1행3열짜리 테이블은 어떻게 만들까요?
<TR>
<TD>1행1열</TD>
<TD>1행2열</TD>
<TD>1행3열</TD>
</TR>
이렇게 하면 되겠죠? 이제 이해가시죠? 그 열안에 무슨 글자나 그림을 넣을려면 글자는 그냥 써주시면되고 그림은 저번에 배운 <IMG SRC>태그를 이용하시면 됩니다. 그럼 간단하게 시간표를 한번 만들어 봅시다.
이렇게 만들려고 합니다. 어떻게 하면 될까요?
먼저 테이블을 만들고 <TR>이 몇번 들어갈까요? TR은 행이니깐 4행이니깐 4번들어가겠죠? <TD는 각 <TR>당 2번씩 들어가면 되겠습니다. 그럼 소스가 이렇게 되겠죠?
<html>
<head><title>테이블</title>
</head>
<body>
<table border>
<tr>
<td>시간</td>
<td>과목</td>
</tr>
<tr>
<td>1교시</td>
<td>국어</td>
</tr>
<tr>
<td>2교시</td>
<td>수학</td>
</tr>
<tr>
<td>3교시</td>
<td>영어</td>
</tr>
</table>
</body>
</html>
이렇게요. 위에 <table>에 border가 들어간것은 표의 테두리를 주기 위해서입니다. 이것에 대해서는 계속해서 배워보도록 하구요. 오늘은 이렇게 표를 만들어봤습니다. 결과는 어떻게 될까요? 한번 보시죠.
이렇게 나오네요. 잘 나왔죠? 신기하지 않습니까? 이렇게 표도 만들수 있고...ㅎㅎ...그럼 다음시간에 또 만나요~
지난번에는 글자색을 바꾸는 법을 배워봤습니다. 오늘은 대망의 표만들기를 배워보도록 하겠습니다. 왜 대망의 라고 하는가하면 이 표만들기가 아주 중요하기 때문입니다. 웹페이지를 돌아다니다보면 마치 글자들이 정렬된듯이 아주 잘 짜여져 있는 것을 보는데 이게 다 표를 이용해서 글자를 정렬하기 때문입니다. 웹페이지의 거의 모든 레이아웃(구성)은 표로 이루어져 있다고 봐도 무방합니다. 그럼 표는 어떻게 만드는지 알아볼까요?
먼저 표를 하나 그려볼까요?
| 1행1열 | 1행2열 |
| 2행1열 | 2행2열 |
이 표는 어떻게 만들까요? 바로 <TABLE>이라는 태그로 만듭니다. 위와 같이 만들려면
<TABLE>
<TR>
<TD>1행1열</TD>
<TD>1행2열</TD>
</TR>
<TR>
<TD>2행1열</TD>
<TD>2행2열</TD>
</TR>
</TABLE>
이렇게 해주면 됩니다. 그럼 하나하나 설명해드리겠습니다. 먼저 <TABLE>은 표라는 뜻이죠? 그래서 표를 만들겠다라는 뜻입니다. 표에는 행과 열이 있습니다. 세로가 행이고 가로가 열입니다. 그래서 <TR>로 행을 먼저 생성하고 <TD>로 열을 하나씩 늘려가는 겁니다. 즉, <TR>은 행을 추가하는 태그이고 <TD>는 그추가한 행에 열들을 추가하는 것입니다. 그럼 1행3열짜리 테이블은 어떻게 만들까요?
<TR>
<TD>1행1열</TD>
<TD>1행2열</TD>
<TD>1행3열</TD>
</TR>
이렇게 하면 되겠죠? 이제 이해가시죠? 그 열안에 무슨 글자나 그림을 넣을려면 글자는 그냥 써주시면되고 그림은 저번에 배운 <IMG SRC>태그를 이용하시면 됩니다. 그럼 간단하게 시간표를 한번 만들어 봅시다.
| 시간 | 과목 |
| 1교시 | 국어 |
| 2교시 | 수학 |
| 3교시 | 영어 |
이렇게 만들려고 합니다. 어떻게 하면 될까요?
먼저 테이블을 만들고 <TR>이 몇번 들어갈까요? TR은 행이니깐 4행이니깐 4번들어가겠죠? <TD는 각 <TR>당 2번씩 들어가면 되겠습니다. 그럼 소스가 이렇게 되겠죠?
<html>
<head><title>테이블</title>
</head>
<body>
<table border>
<tr>
<td>시간</td>
<td>과목</td>
</tr>
<tr>
<td>1교시</td>
<td>국어</td>
</tr>
<tr>
<td>2교시</td>
<td>수학</td>
</tr>
<tr>
<td>3교시</td>
<td>영어</td>
</tr>
</table>
</body>
</html>
이렇게요. 위에 <table>에 border가 들어간것은 표의 테두리를 주기 위해서입니다. 이것에 대해서는 계속해서 배워보도록 하구요. 오늘은 이렇게 표를 만들어봤습니다. 결과는 어떻게 될까요? 한번 보시죠.
이렇게 나오네요. 잘 나왔죠? 신기하지 않습니까? 이렇게 표도 만들수 있고...ㅎㅎ...그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 표의 경계선, 너비와 높이조절 (0) | 2011.07.19 |
|---|---|
| Rowspan, Colspan (0) | 2011.07.17 |
| 글자색바꾸기, <BODY TEXT>, <FONT COLOR> (0) | 2011.07.12 |
| 페이지 배경색을 내맘대로 (0) | 2011.07.10 |
| IMG 태그, 링크, 경계선 (0) | 2011.07.08 |
