오늘은 HTML 12강으로 table을 배워보도록 하겠습니다.
table은 웹 페이지 제작에서 굉장히 중요한 요소이니 꼭 숙달해 두시기 바랍니다.^^
테이블을 왜 사용해야 하는가?
html을 사용하다 보면 테이블을 엄청나게 많이 사용하게 될 것이다. 그렇다면 우리는 테이블을 왜 사용해야 하는가? 일단 기본적으로 html 작성은 우리가 한글에서 사용하는 문법과 다르다. 예를 들어, 한글에서
위의 그림처럼 작성하면 출력도 입력한 것과 똑같이 나온다.
하지만 html 작성 할 때는 다르다. html작성 시 위의 그림처럼 작성을 했다면
라고 나올 것이다. 다중 뛰어 쓰기(space키)와 줄 바꾸기(enter키)가 html에서는 작동이 안 되는 것이다.(엔터키도 스페이스키로 인식을 한다고 생각하면 된다.) 그래서 html 작성 시에는 테이블을 만들어서 정렬을 시켜야 한다.
html 작성 시에는 왼쪽(위)의 그림처럼 작성을 해야 결과 화면이 오른쪽 그림(위)처럼 나온다.
<테이블 태그의 이해>
1. 표 만들기
1) <table> 태그
1. 표를 만들 때에는 <table>로 시작해서 </table>로 끝낸다.
2. <table> 태그에 border값을 지정하지 않으면 테두리 선이 보이지 않는다.
2) <tr> 태그 (table row의 의미 ) : 줄을 만들 때에 사용된다.
3) <td> 태그 (table data의 의미) : 칸을 만들 때에 사용된다.
1. 모든 내용은 <td></td>사이에 입력한다.
2. 셀의 내용들은 왼쪽으로 정렬된다.
3. <td>와 </td>사이에 아무런 내용도 입력되지 않으면, 칸이 만들어지지 않는다.
4) <th> 태그 (table header의 의미)
1. 내용을 자동으로 가운데에 정렬하고 진하게 표현한다.
(보통 표 분류의 기준을 입력할 때 사용된다.)
2. <td>와 사용법이 같다.
5) <caption> 태그
1. 표의 제목을 지정한다.
2. 반드시 <table></table> 사이에 입력해야 한다.
3. align="bottom/left/right" 속성을 이용하여 표의 제목을 정렬할 수 있다.
'웹제작 강의 > HTML' 카테고리의 다른 글
| HTML 15-2강 - 자신의 미니홈피 만들기(3) - (2) | 2009/04/23 |
|---|---|
| HTML 15-1강 자신의 미니홈피 만들기(2) (0) | 2009/04/23 |
| HTML 15강 - 자신의 미니홈피 만들기 - (14) | 2009/04/23 |
| HTML 14강 table ( rowspan, colspan) (12) | 2009/04/04 |
| HTML 13강 table에 효과주기 (6) | 2009/04/04 |
| HTML 12강 table (6) | 2009/04/04 |
| HTML 11강 - 수평선, marquee 태그 - (1) | 2009/04/04 |
| HTML 10강 - 음악, 동영상, 플래시 삽입하기 - (15) | 2009/04/04 |
| HTML 9강 - 이미지 삽입 - (13) | 2009/04/04 |
| HTML 8강 (글자관련 태그, 글자 모양 태그(font)) (5) | 2009/04/04 |
| HTML 7강 - 리스트 만들기 - (18) | 2009/04/04 |
